# Wireframe

## Learning Objectives

<!--{{<objectives>}}>-->

- [ ] 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
<!--{{</objectives>}}>-->

## Task
![Wireframe](./wireframe.png)

Using the provided wireframe and resources, write a new webpage explaining:

1. What is the purpose of a README file?
1. What is the purpose of a wireframe?
1. What is a branch in Git?

The page layout should closely match the wireframe. Exact replication is the goal, but small differences may be accepted.

There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this criteria yourself before you submit your work.

## 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.



## Resources

- [Wireframe](https://www.productplan.com/glossary/wireframe/)
- [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
- [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child)
- [Format Code and Make Logical Commits in VS Code](../practical_guide.md)