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.
What I have tried:
I am getting this error:
✗ There should be 5 <div> tags in the <body>
✗ There should be a 1st <div> tag in the <body> tag (+ 4 related tests)
✗ There should be a 2nd <div> tag in the <body> tag (+ 7 related tests)
✗ There should be a 3rd <div> tag in the <body> tag (+ 7 related tests)
✗ There should be a 4th <div> tag in the <body> tag (+ 7 related tests)
✗ There should be a 5th <div> tag in the <body> tag (+ 4 related tests)
Submit an article or tip