Create and style a webpage
Building a webpage using HTML and CSS
## Task 1: Create the HTML file.
Objectives
- Add a photo.jpg to the webpage.
- Add your name as a heading to the webpage.
- Add an unordered list of your five favorite music artists.
- Add an ordered list of your top five favorite films.
- Add a hyperlink to your Facebook profile, or, meta.com.
Follow the Step by Step instructions below:
1. Open the `index.html` file and set up the following basic HTML document structure:
```HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
```
2. Set the title of the HTML document to your name:
```HTML
<!DOCTYPE html>
<html>
<head>
<title>your name</title>
</head>
<body>
</body>
</html>
```
3. Link to `styles.css` in the `head` element.
4. Add five divider elements to the `body` element.
5. Add a heading 1 to the first divider element that displays your name.
6. Add `photo.jpg` using an image element in the second divider element.
7. Add an ID attribute with the value `photo` on the image element.
8. Add a heading 2 for `Favorite Music Artists` in the third divider element. In the same divider add an unordered list with your top 5 favorite artists.
9. Add a heading 2 for `Favorite Films` in the fourth divider element. In the same divider add an ordered list with your top 5 favorite films.
10. Add a hyperlink to your Facebook profile page in the last divider element. Alternatively, add a hyperlink to `https://www.meta.com/`. As a last step, add `My Profile` to the descriptive text of the `<a>` tag.
## Task 2: Style the webpage using CSS.
Objectives
- Style the webpage using CSS.
Follow the Step by Step instructions below:
1. Open the `styles.css` file.
2. Add a CSS rule for your image that sets the `border` property to `2` pixels wide with a `solid blue` color.
3. Add a CSS rule for heading 1 containing your name and set its color to `blue`.
4. Add a CSS rule for all `<h2>` headings and set their color to `grey`.
5. Add a CSS rule that applies a `margin` of `4` pixels to the divider elements.