diff --git a/Wireframe/README.md b/Wireframe/README.md index aa85ec80b..6ff0b9f2f 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -4,15 +4,16 @@ -- [ ] 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 -- [ ] Develop the habit of writing clean, well-structured, and error-free code +- [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 +- [x] Develop the habit of writing clean, well-structured, and error-free code ## Task + ![Wireframe](./wireframe.png) Using the provided wireframe and resources, write a new webpage explaining: @@ -27,13 +28,13 @@ There are some provided HTML and CSS files you can use to get started. You can u ## Acceptance Criteria -- [ ] Semantic HTML tags are used to structure the webpage. -- [ ] The page scores 100 for Accessibility in the Lighthouse audit. -- [ ] The webpage is styled using a linked .css file. -- [ ] The webpage is properly committed and pushed to a branch on GitHub. -- [ ] The articles section contains three distinct articles, each with its own unique image, title, summary, and link. -- [ ] The page footer is fixed to the bottom of the viewport. -- [ ] The page layout closely match the wireframe. +- [x] Semantic HTML tags are used to structure the webpage. +- [x] The page scores 100 for Accessibility in the Lighthouse audit. +- [x] The webpage is styled using a linked .css file. +- [x] The webpage is properly committed and pushed to a branch on GitHub. +- [x] The articles section contains three distinct articles, each with its own unique image, title, summary, and link. +- [x] The page footer is fixed to the bottom of the viewport. +- [x] The page layout closely match the wireframe. ### Developers must adhere to professional standards. @@ -42,10 +43,10 @@ There are some provided HTML and CSS files you can use to get started. You can u These practices reflect the level of quality expected in professional work. They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. -- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ -- [ ] My code is consistently formatted -- [ ] My page content is free of typos and grammatical mistakes -- [ ] I commit often and push regularly to GitHub +- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/ +- [x] My code is consistently formatted +- [x] My page content is free of typos and grammatical mistakes +- [x] I commit often and push regularly to GitHub ## Resources diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..ae96ff9bd 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,4 +1,4 @@ - + @@ -8,26 +8,59 @@
-

Wireframe

+

Userful things to know as a software developer

- This is the default, provided code and no changes have been made yet. + This page explains a few things such as what is a README, the purpose of + a wireframe and how branches work in git.

- -

Title

+ +

What is a README?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README is a file that describes things about a project on github. + And is usually the first thing that you have to read when contributing + to a new project.

- Read more + Read more +
+
+ +

What's the purpose of a wireframe?

+

+ Wireframes can be used to sketch a website. UX designers use them to + communicate their ideas about how the UI should be designed. +

+ Read more +
+
+ +

What is a branch in Git?

+

+ A branch is a separate workspace that allows you to work on a feature + without touching the main projects code and then merge it to the main + branch once the feature is mature enough. +

+ Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..dda6b4343 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -49,8 +49,15 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } + +header { + text-align: center; +} + footer { - position: fixed; + background-color: var(--paper); + border: var(--line); + bottom: 0; text-align: center; }