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..4c20a76fa 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,47 @@ - - - - - - Wireframe - - - -
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

-
-
-
- -

Title

+ + + + + + Wireframe + + + +
+

Wireframe

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + This page explains key concepts used in web development, including README files, wireframes, and Git branches.

- Read more -
-
- - - + +
+
+
+ +

What is the purpose of a README file?

+

+ A ReadMe file explains what a project is, how to set it up and how to use it. +

+ 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..f9d946f91 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -51,7 +51,12 @@ main { } footer { position: fixed; + left: 0; + right: 0; bottom: 0; + padding: var(--space); + background: var(--paper); + border-top: var(--line); text-align: center; } /* ====== Articles Grid Layout ====