diff --git a/Wireframe/README.md b/Wireframe/README.md index 0ae0216d1..8243b7101 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -14,22 +14,22 @@ There are some provided HTML and CSS files you can use to get started. You can u -- [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including a title, summary, and a link -- [ ] Check a webpage against a wireframe layout -- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) -- [ ] Use version control by committing often and pushing regularly to GitHub +- [x] Use semantic HTML tags to structure the webpage +- [x] Create three articles, each including a title, summary, and a link +- [x] Check a webpage against a wireframe layout +- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) +- [x] Use version control by committing often and pushing regularly to GitHub ## Acceptance Criteria -- [ ] Semantic HTML tags are used to structure the webpage. -- [ ] The page scores 100 for Accessibility in the Lighthouse audit. -- [ ] The page header includes a title and description. -- [ ] The articles section has three unique articles, each including a title, summary, and a link. -- [ ] The page footer is fixed to the bottom of the viewport. -- [ ] The webpage is styled using a linked .css file. -- [ ] The webpage is properly committed and pushed to a branch on GitHub. +- [x] Semantic HTML tags are used to structure the webpage. +- [x] The page scores 100 for Accessibility in the Lighthouse audit. +- [x] The page header includes a title and description. +- [x] The articles section has three unique articles, each including a title, summary, and a link. +- [x] The page footer is fixed to the bottom of the viewport. +- [x] The webpage is styled using a linked .css file. +- [x] The webpage is properly committed and pushed to a branch on GitHub. ## Resources diff --git a/Wireframe/answers.html b/Wireframe/answers.html new file mode 100644 index 000000000..e0504aefb --- /dev/null +++ b/Wireframe/answers.html @@ -0,0 +1,49 @@ + + + + + + Wireframe Answers + + + +
+

Wireframe Answers

+

This code includes the answers to the wireframe exercise.

+
+
+
+ +
+ placeholder image +

1. What is the purpose of a README file?

+

A README file provides essential information about a project, including its purpose, usage instructions, and setup requirements.

+ + +

2. What is the purpose of a wireframe?

+

A wireframe is a visual guide that represents the skeletal framework of a website or application, used to plan layout and functionality.

+ Read more +
+ +
+ +
+

3. What is a branch in Git?

+

A branch in Git is a separate line of development that allows you to work on different versions of a project simultaneously without affecting the main codebase.

+ Read more +
+ + +
+

4. What is the point of the article tag in HTML?

+

The article tag in HTML is used to define a self-contained piece of content that can be independently distributed or reused, such as a blog post or news article.

+ Read more +
+
+
+
+ + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..a4d970d5a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -87,3 +87,20 @@ article { grid-column: span 3; } } + +.container { + padding: 0 10%; +} + +.second-container { + padding-top: 20px; + display: flex; + gap: 1.5rem; + align-items: stretch; +} + +.second-container article { + flex: 1; + max-width: 45%; + padding: 1rem; +}