# Wireframe

![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.

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

## Acceptance Criteria

- [ ] Semantic HTML tags are used to structure the webpage.
- [ ] The HTML code has no errors or warnings when validated with https://validator.w3.org/.
- [ ] 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.

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