¿Cómo creo y le doy estilo a una página web?

Las instrucciones son:

Open the index.html file and set up the following basic HTML document structure:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Set the title of the HTML document to your name:

<!DOCTYPE html>
<html>
<head>
    <title>your name</title>
</head>
<body>
</body>
</html>
Link to styles.css in the head element.

Add five divider elements to the body element.

Add a heading 1 to the first divider element that displays your name.

Add photo.jpg using an image element in the second divider element..

Add an ID attribute with the value photo on the image element.

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.

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.

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:

Open the styles.css file.

Add a CSS rule for your image that sets the border property to 2 pixels wide with a solid blue color.

Add a CSS rule for heading 1 containing your name and set its color to blue.

Add a CSS rule for all <h2> headings and set their color to grey.

Add a CSS rule that applies a margin of 4 pixels to the divider elements.

Lo que he probado:

HTML

<title> Ana Carolina

    <div>
        <h1> Ana Carolina</h1>
        <div>
            
            <div>
                <ul>
                    <li>Justin Bieber</li>                    <li>Jão</li>                    <li>Metallica</li>                    <li>One Direction</li>                    <li>Demi Lovato</li>                </ul>
                <div>
                    <h2> Favorite Films</h2>
                    <ol>
                        <li>Para todos garotos que já amei</li>                        <li>Bingo</li>                        <li>Big Daddy</li>                        <li> Shrek 3</li>                        <li> Moana</li>                    </ol>
                    <div>
                        <a href="https://www.facebook.com/">My Profile</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Parte CSS:

CSS

>image{
    border: 4px solid green
}
h1{
    color:blue
}
h2{
    color: grey
}
body{
    margin: 4px;
}

Y muestra estos errores que realmente no entiendo:

The following tests failed:

✗ There should be 5 <div> tags in the <body>
✗ The 1st <div> tag should have a margin of 4px
✗ 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)

Solución 1

Lea las instrucciones, son muy específicas:

Instrucción

Add five divider elements to the body element.

No tienes eso: tienes un elemento de cuerpo que contiene una etiqueta DIV y un total de cinco anidado Etiquetas DIV:

HTML

<div>
    <div>
        <div>
            <div>
                <div>
                </div>
            </div>
        </div>
    </div>
</div>

Eso no es lo mismo que esto:

HTML

<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>

Etcétera.
¿Tener sentido?