diff --git a/Wireframe/README.md b/Wireframe/README.md index aa85ec80b..8a18b2cbf 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -4,15 +4,16 @@ -- [ ] Use semantic HTML tags to structure the webpage +- [x] 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] 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/images.png b/Wireframe/images.png new file mode 100644 index 000000000..b1becc4c9 Binary files /dev/null and b/Wireframe/images.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..7a291e74c 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,4 +1,4 @@ - + @@ -10,24 +10,53 @@

Wireframe

- This is the default, provided code and no changes have been made yet. + What is a readme file for or what is the purpose of a wireframe and what + is a git branch?
+ Read below to find out!

- -

Title

+ photo of a readme page on a github repository +

What is a readme file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A readme file informs anyone looking at your repository what your + project is about. It lets them know how to install it (if its an + application) and how to use it.

- Read more + Read more +
+
+ Photo example of a wireframe +

What is the purpose of a Wireframe?

+

+ The purpose of a wireframe is to provide visual understanding for a + web page layout. In other words, it shows the layout of webpage so + clients can sign off on the layout before any extra creative work goes + into it. +

+ Read more +
+
+ photo representation of a 'branch' in git +

What is a branch in Git?

+

+ A branch in Git is like a seperate workspace that is contained within + the project where any changes made won't affect the main repository. +

+ Read more
-