diff --git a/Wireframe/README.md b/Wireframe/README.md index f7b59df8c..77f9f3399 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 an image, 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 an image, 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 an image, 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 an image, 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/index.html b/Wireframe/index.html index 0e014e535..5b6242b4f 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -10,24 +10,65 @@

Wireframe

- This is the default, provided code and no changes have been made yet. + This page explains key concepts used in web development, including README + files, wireframes, and Git branches.

+
+
-

Title

+

What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file explains what a project is, how to set it up, and how to + use it.

- Read more + + Learn more about READMEs +
+ + +
+ +

What is the purpose of a wireframe?

+

+ A wireframe is a simple visual guide that shows the layout and structure + of a webpage before it is built. +

+ + Learn more about wireframes + +
+
+ +

What is a branch in Git?

+

+ A Git branch allows developers to work on new features or fixes + independently without affecting the main codebase. +

+ + Learn more about Git branching + +
+
+ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..194903778 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -31,6 +31,9 @@ body { color: var(--ink); font: var(--font); } +header { + text-align: center; +} a { padding: var(--space); border: var(--line); @@ -48,10 +51,16 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + padding-bottom: 60px; } footer { position: fixed; + left: 0; + right: 0; bottom: 0; + padding: 3px var(--space); + background: var(--paper); + border-top: var(--line); text-align: center; } /* ====== Articles Grid Layout ====