Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

Reto 1: Organiza el siguiente bloque de código de forma semántica

11/43

Lectura

Hola !

Ya conocimos la importancia de hacer nuestro HTML de forma semántica. Así que, aquí tengo un reto para ti.

A continuación te mostraré un código HTML y la idea es que tu lo organices de forma semántica, es decir, que uses las etiquetas más adecuadas.

Reto 1.png

Aportes 2818

Preguntas 10

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

![]()

Así lo resolví yo 🍻🥂

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <body>
      <header>
        <h1>Platzi Video</h1>
        <ul>
          <li>Cuenta</li>
          <li>Cerrar Sesión</li>
        </ul>
      </header>
      <section>
        <h2>Sección principal</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </section>
      <footer>
        <ul>
          <li>Contáctanos</li>
          <li>Políticas de privacidad</li>
          <li>Términos y condiciones</li>
        </ul>
      </footer>
    </body>
  </body>
</html>

![](

<header>
  Platzi Video
  <ul>
    <li>Cuenta</li>
    <li>Cerrar Sesi&oacute;n</li>
  </ul>
</header>

<nav>
  Secci&oacute;n princpial
</nav>

<footer>
  <ul>
    <li>Cont&aacute;ctenos</li>
    <li>Pol&iacute;tica de privacidad</li>
    <li>T&eacute;rminos y condiciones</li>
  </ul>
</footer>```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>Platzi-Video</h1>
        <ul>
            <li>Cuenta</li>
            <li>Cerrar Sesión</li>
        </ul>
    </header>

    <main>
        <h2>Sección principal</h2>
    </main>
    
    <footer>
        <ul>
            <ol><a href="#">Contáctanos </a></ol>
            <ol><a href="#">Política de privacidad </a></ol>
            <ol><a href="#">Términos y condiciones </a></ol>
        </ul>
    </footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi-Video</title>
</head>

<body>

    <header>
        <ol>
            <li>Cuenta</li>
            <li>Cerrar Sesión</li>
        </ol>
    </header>

    <section>
        Sección principal
    </section>

    <footer>
        <ol>
            <li>Contáctanos</li>
            <li>Política de privacidad</li>
            <li>Términos y condiciones</li>
        </ol>
    </footer>

</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reto 1</title>
</head>
<body>
  <header>
    <h1>Platzi-Video</h1>
    <nav>
      <ul>
        <li>Cuenta</li>
        <li>Cerrar Sesión</li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>Seccion Principal</h2>
    </section>
  </main>
  <footer>
    <ul>
      <li>Contáctenos</li>
      <li>Política de privacidad</li>
      <li>Términos y condiciones</li>
    </ul>
  </footer>
</body>
</html>```

![](

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Platzi-Video</title>
</head>
<body>
  <header>
    <h1>Platzi-Video</h1>
    <nav>
      <ul>
        <li>Cuenta</li>
        <li>Cerrar Sesión</li>
      </ul>
    </nav>
  </header>
  <main>
    <p>Sección Principal.</p>
  </main>
  <footer>
    <p>Contáctanos</p>
    <p>Política de privacidad</p>
    <p>Términos y condiciones</p>
  </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clase de platzi</title>
</head>

<body>
<header>
    <h1>Platzi video</h1>
</header>
<ol>
    <li>cuenta</li>
    <li>cerrar sesion</li>
</ol>
<section>
    <h2><a href="">seccion principal</a></h2>
</section>
<footer>
    <ul>Contactanos a:</ul>
    <ul><a href="">Politicas de privasidad</a></ul>
    <ul><a href="">Terminos y condiciones</a></ul>

</footer>

</body>
</html>
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Platzi video</title>
	</head>
	<body>
		<header>
			Platzi video
			<nav>
				<ul>
					<a>Cuenta</a>
					<a>Cerrar sesión</a>
				</ul>
			</nav>
		</header>
		<main>
			<section>Sección principal</section>
		</main>
		<footer>
			<nav>
				<ul>
					<a>Contáctanos</a>
					<a>Política de privacidad</a>
					<a>Términos y condiciones</a>
				</ul>
			</nav>
		</footer>
	</body>
</html>
<h1>Platzi-Video</h1>
<ul>
	<li>Cuenta</li>
	<li>Cerrar Sesión</li>
</ul>
<section>Sección Principal</section>
<footer>
<ul>
	<li>Contáctanos</li>
	<li>Políticas de privacidad</li>
	<li>Términos y condiciones</li>
</ul>	
</footer>
<body>
  <header>
    <h1>Platzi Video</h1>
    <nav>
      <ul>
        <li>Cuenta</li>
        <li>Cerrar Sesión</li>
      </ul>
    </nav>
  </header>
  <main>
    <h2>Sección Principal</h2>
  </main>
  <footer>
    <nav>
      <ul>
        <li>Contáctanos</li>
        <li>Política de privacidad</li>
        <li>Términos y condiciones</li>
      </ul>
    </nav>
  </footer>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h2>Platzi-Video</h2>
        <ul>
            <li>Cuenta</li>
            <li>Cerra Sessión</li>
        </ul>
    </header>
    <h3>Sección principal</h3>
    <section>
        <a href="#">Contactános</a>
        <a href="#">Políctica de privacidad</a>
        <a href="#">Término y condiciones</a>
    </section>
</body>
</html>```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Geraldine Hernández Al-Attrach">
    <title>Challenge 1</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!-- Header -->
    <header>
        <h1>Bienvenidos al Platzi Video</h1>
        <nav class="navbar">
            <ul>
                <li>
                    <a href="#">Crea tu Cuenta</a>
                </li>
                <li> <a href="">
                        Inicia Sesión
                    </a>
                </li>
            </ul>
        </nav>
    </header>
    <!--  Section main content-->
    <section class="main-content">
        <h2>Sección Principal</h2>
        <div id="wrapper">

        </div>
    </section>
    <!-- Footer-->
    <footer class="footer">
        <ul>
            <li>
                Contáctanos
            </li>
            <li>
                Política de privacidad
            </li>
            <li>
                Términos y condiciones
            </li>
        </ul>
    </footer>
</body>

</html>
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi-Video</title>
  </head>
  <body>
    <header>
      <h1>Platzi-Video</h1>
    </header>
    <nav>
      <button>Cuenta</button><br>
      <button>Cerrar Sesión</button>
    </nav>
    <section>
      <h2>Sección principal</h2>
    </section>
    <hr>
    <footer>
      <ol>
        <li>Contáctanos</li>
        <li>Política de privacidad</li>
        <li>Términos y condiciones</li>
      </ol>
    </footer>
  </body>
</html>

Hola, dejo el resultado de mi Reto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>Platzi-Video</h1>
    </header>
    
    <nav>
        <ul>
            <li><a href="">Cuenta</a></li>
            <li><a href="">Cerrar Sesión</a></li>
        </ul>
    </nav>

    <section>
        <h2>Sección Principal</h2>
    </section>

    <footer>
        <ul>
            <li><a href="">Contáctanos</a></li>
            <li><a href="">Política de privacidad</a></li>
            <li><a href="">Términos y condiciones</a></li>
        </ul>
    </footer>

</body>
</html>```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <header>
       <ul>
           <li><a href="#" >Cuenta</a></li>
           <li><a href="">Cerrar Sesion</a> </li>
       </ul>
   </header>
   <section>
       <h1>Seccion Principal</h1>
   </section>
   <footer> 
       <ul>
           <li><a href="#">Contactanos</a></li>
           <li><a href="#">Politica de privacidad</a></li>
           <li><a href="#">Terminos y condiciones</a></li>
       </ul>
   </footer>
</body>
</html>```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi-Video</title>
</head>
<body>
    <header>
        <h1>Platzi-Video</h1>
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar Sesión</li>
            </ul>
        </nav>
    </header>
    <section>
        Sección principal
    </section>
    <footer>
        <ul>
            <li>Contáctanos</li>
            <li>Política de privacidad</li>
            <li>Términos y condiciones</li>
        </ul>
    </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Platzi Video -  reto de semántica</title>
  </head>
  <body>
    <header>
      <h1>Platzi-Video</h1>
      <nav>
        <a href="#">Cuenta</a>
        <a href="#">Cerrar sección</a>
      </nav>
    </header>
    <section>
        <h2>Sección Principal</h2>
    </section>
    <footer>
      <a href="#">Contactenos</a>
      <a href="#">Politica de privacidad</a>
      <a href="#">Terminos y condiciones</a>
    </footer>
  </body>
</html>```
    <header>
        <h1>Platzi - Video</h1>
        <ul>
            <li><a href="cuenta.html">cuenta</a></li>
            <li><a href="CerrarSesión.html">Cerrar Sesión</a></li>
        </ul>
    </header>

    <section>
        <h2>Sección principal</h2>
    </section>

    <footer>
        <ul>
            <li><a href="contacto.html">Contáctanos</a></li>
            <li><a href="politicas.html">Política de privacidad</a></li>
            <li><a href="terminos.html">Terminos y condiciones</a></li>
        </ul>
    </footer>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>Platzi-Video</h1>
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar sesión</li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Sección principal</h2>
    </main>
    <footer>
        <form>
            <h3>Contáctanos</h3>
        </form>
        <a href="">Políticas de privacidad</a>
        <a href="">Términos y condiciones</a>
    </footer>
</body>
</html>```

Aquí dejo el mío, espero sus retroalimentaciones.
Utilicé <h2></h2> y <h3></h3> para que no se viera tan grande!

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>Platzi Video</h1>
        <ul>
            <nav>
                <li>Cuenta</li>
                <li>Cerrar sesión</li>
            </nav>
        </ul>
    </header>
    <main>
        <h2>Sección principal</h2>
    </main>
    <footer>
        <ul>
            <nav>
                <li>Contáctanos</li>
                <li>Política de privacidad</li>
                <li>Términos y condiciones</li>
            </nav>
        </ul>
    </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi video project</title>
</head>
<body>
    <header>
        <h1>Platzi video</h1>
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar sesion</li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            Seccion principal
        </section>
    </main>
    <footer>
        <ul>
            <li>Contactanos</li>
            <li>Politicas de privacidad</li>
            <li>Terminos y condiciones</li>
        </ul>
    </footer>
</body>
</html>

this is my challege:

     <h1>Platzi-Video</h1>
    <ul>
      <li>Cuenta</li>
      <li>Cerrar Sesión</li>
    </ul>

  <section>  <h2>Sección Principal</h2>  </section>

  <footer>
    <ul>
      <li>Contáctanos</li>
      <li>Política de privacidad</li>
      <li>Términos y condiciones</li>
    </ul>
  </footer>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi-video</title>
</head>
<body>
    <header>
        <a href="platziVideo.com"><img src="logo-platziVideo.jpg" alt=""></a>
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar Sesion</li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h1> Seccion Principal</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt cumque, animi, soluta expedita deserunt deleniti, beatae dolores eos eum explicabo aliquid nobis dignissimos. Repellat accusantium officia voluptates maxime eum doloribus.</p>
        </section>
    </main>
    <footer>
        <ul>
            <li><a href="platziVideo.com/contacto">Contactanos</a></li>
            <li><a href="platziVideo.com/politicas">politicas de privacidad</a></li>
            <li><a href="platziVideo.com/terminos">Terminos y condiciones</a></li>
        </ul>
    </footer>
</body>
</html>```
<<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi Video</title>
</head>
<body>
    <header>
        <h1>Platzi video</h1>
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar sesión</li>
            </ul>
        </nav>
    </header>
    <section>
        <h2>Sección principal</h2>
    </section>
    <footer>
        <ul>
            <li>Contáctanos</li>
            <li>Política de privacidad</li>
            <li>Términos y condiciones</li>
        </ul>
    </footer>
</body>
</html>>
<code>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto 1</title>
</head>
<body>
    <header>
        <h1>Platzi-Video</h1>
        <nav>
            <ul>
                <li>
                    Cuenta
                </li>
                <li>
                    Cerrar Sesión
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <p>Sección principal</p>
    </main>
    <footer>
        <ul>
            <li>
                Contáctanos
            </li>
            <li>
                Política de privacidad
            </li>
            <li>
                Términos y condiciones
            </li>
        </ul>
    </footer>
</body>
</html>

Yo le agregué un elemento <a> a los item del menú del header y del footer

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Platzi-Video</title>
</head>

<body>
  <header>
    <div>
      <h1>Platzi-Video</h1>
    </div>

    <nav>
      <ul>
        <li><a href="">Cuenta</a></li>
        <li><a href="">Cerrar sesión</a></li>
      </ul>
    </nav>
  </header>

  <section>
    <h2>Sección principal</h2>
  </section>

  <footer>
    <ul>
      <li><a href="">Contáctanos</a></li>
      <li><a href="">Política de privacidad</a></li>
      <li><a href=""></a>Términos y condiciones</li>
    </ul>
  </footer>
</body>

</html>
<code>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi-Video</title>
</head>
<body>
    <header>
        <h1>Platzi-Video</h1>
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar Sesión</li>  
            </ul>  
        </nav>     
    </header>
    <main>
        <h2>Sección Principal</h2>
    </main>
    <footer>
        <ul>
            <li>Contáctanos</li>
            <li>Política de privacidad</li>
            <li>Términos y condiciones</li>     
        </ul>    
    </footer> 
</body>
</html>

Les recomiendo lo siguiente:

Aquí va el mío!!!

![](

Dejo mi tarea por aquí:

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi-Video</title>
</head>
<body>
    <header>
        <h1>Platzi-Video</h1>
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar Sesión </li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Sección Principal</h2>
    </main>
    <footer>
        <ul>
            <li>Contáctanos</li>
            <li>Política de privacidad</li>
            <li>Términos y condiciones</li>
        </ul>
    </footer>

</body>
</html>>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto 1</title>
</head>
<body>
    <header>
        <h1>Platzi-Video</h1>
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar Sesión</li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <p>Seccion Principal</p>
        </section>
    </main>
    <footer>
        <ul>
            <li><a href="">Contáctanos</a></li>
            <li><a href="">Política de privacidad</a></li>
            <li><a href="">Términos y condiciones</a></li>
        </ul>
    </footer>
</body>
</html>```

<div>
Platzi Video
<ul>
<li>Cuenta</li>
<li>Cerrar Sesión</li>
</ul>
</div>
<h1>Sección Principal</h1>
<ul>
<li>Contáctanos</li>
<li>Política de Privacidad</li>
<li>Términos y condiciones</li>
</ul>

Comparto mi reto:

<body>
    <header>
        <h1>Platzi Video</h1>
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar Sesión</li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>Sección Principal</h2>
        </section>
    </main>
    <footer>
        <section>
            <ul>
                <li>Contáctanos</li>
                <li>Política de Privacidad</li>
                <li>Términos y condiciones</li>
            </ul>
        </section>
    </footer>
</body>

Ahí vamos.

Recibo comentarios constructivos.

Reto cumplido: Agrego un estilo responsive:

Viewport:

HTML:

CSS:

<!Doctype html>
<html lang="esp">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport",content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <link rel="stylesheet" href="style.css">
        <title>Reto 1 semántica </title>
    </head>
    <body>
        <header>
            <h1>Platzi - videos</h1>
            <nav>
                <li><a href="">Cuenta</a></li>
                <li><a href="">Cerrar Sesión</a></li>
            </nav>
        </header>
        <section>
            <p>Seccion principal</p>
        </section>
        <footer>
            <nav>
                <li><a href="">Contáctanos</a></li>
                <li><a href="">Políticas de privacidad</a></li>
                <li><a href="">Términos y condiciones</a></li>
            </nav>
        </footer>
    </body>
</html>

Así mas o menos la organizaría yo…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi-Video</title>
</head>
<body>
    <header>
        <h1>Platzi-Video</h1>
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar Sesión</li>
            </ul>
        </nav>
    </header>
    <article>
        <h2>Sección Principal</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam dolorum sed ea non, consequuntur nostrum in. Ea autem facilis nesciunt dicta, suscipit voluptatibus distinctio mollitia. Facere laboriosam quas voluptas reiciendis?</p>
    </article>

    <footer>
            <ul>
                <li>Contáctanos</li>
                <li>Política de privacidad</li>
                <li>Términos y condiciones</li>
            </ul>
    </footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>Platzi Video</h1>
        <nav>
            <li><a href="">Cuenta</a></li>
            <li><a href="">Cerrar sesión</a></li>
        </nav>
    </div>

    <section>
        <h1>Seccióm principal</h1>
    </section>

    <footer>
        <ul>
            <li>Contactanos</li>
            <li>Politica de privacidad</li>
            <li>Terminos y condiciones</li>
        </ul>
    </footer>
</body>
</html>

Mi código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chalenge 1</title>
</head>
<body>
    <header>
        <h1>Platzi Video</h1>
        <ul>
            <li>Cuenta</li>
            <li>Cerrar Sesión</li>
        </ul>
    </header>
    <section>Sección principal</section>
    <footer>
        <ul>
            <li>Contáctanos</li>
            <li>Política de privacidad</li>
            <li>Términos y condiciones</li>
        </ul>
    </footer>
</body>
</html>
    <body>
        <header>
            <h1>Platzi-Video</h1>
            <nav>
                <ul>
                    <li>Cuenta</li>
                    <li>Cerrar Sesión</li>
                </ul>
            </nav>
        </header>

        <section>Sección Principal</section>
        <footer>
            <ul>
                <li>Contáctanos</li>
                <li>Política de privacidad</li>
                <li>Términos y Condiciones</li>
            </ul>
        </footer>
    </body>

Lo hice todo aqui en los comentarios para no hacer un archivo, es dificil sin un editor de codigo.

 <html>
	<header >
		<title> 
		Reto 1: Organiza el siguiente bloque de código de 	
		forma semantica
		</title>
	 </header>
	<body>
		<head>
			<div>Platzi-Video</div>
			<nav>
				<ul>
					<li>Cuenta<li>
					<li>Cerrar Sesion</li>
				</ul>
		</head>
		<main>
			<section> 
				<div> Seccion Principal </div>
			</section>
		</main>
		<footer>
			<ul>
				<li>Contactanos<li>
				<li>Politica de privacidad</li>
				<li>Terminos y condiciones</li>
			</ul>
		</footer>
</html>

Mi resultado (no se como hacer que se vayan “cuenta” y “cerrar sesion” para un ladito pero bueno jaja)

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link rel=“stylesheet” href=“reto.css”>
<title>Reto1 Platzi</title>

</head>
<body>

<header class="nav-header">
    <div class="list-header">
        <h1>Platzi Videos</h1>
    </div>
<nav class="nav-header">
    <ul class="list-header">
        <li class="item">Cuenta</li>
        <li class="item">Cerrar Sesión</li>
    </ul>
</nav> 
</header>

<main class="container-main">
    <h2>Sección Principal</h2>
</main>

<footer>
    <ul class="list-footer">
        <li class="item">Contactanos</li>
        <li class="item">Políticas de privacidad</li>
        <li class="item">Términos y condiciones</li>
    </ul>
</footer>

</body>
</html>

Logre completar el reto!

<Espacio>
HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="Estilos.css">
    <title>Document</title>
</head>
<body>
    <nav>
        <img src="./ezgif.com-gif-maker.png" alt="">
        <h1 class="Nav-Title">Platzi Video</h1>
        <ol class="Nav-1">
            <li>Cuenta</li>
            <li>Cerrar Sesion</li>
        </ol>
    </nav>
    <section class="principal-section">
        <h2 >Seccion Principal</h2>
    </section>
    <footer>
        <ol class="footer-nav">
            <li>Contactanos</li>
            <li>Politica de privacidad</li>
            <li>Terminos y condiciones</li>
        </ol>
    </footer>
</body>
</html>

CSS

*{
    margin: 0px;
}

body{
    background-color: #20366b;

}

nav{
    display: flex;
    align-content: center;
    align-items: center;
    background-color: #121f3d;
    justify-content: space-between;
    padding: 1rem;
}

nav .Nav-Title{
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-right: 48rem;
}

.Nav-1 li{
    display: inline-block;
    color: rgb(255, 255, 255);
    list-style: none;
    padding: 5px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    cursor: pointer;
    height: 2rem;

}



.principal-section h2{
    color: white;
    padding-left: 30px;
    padding-top: 30px;
    font-size: 50px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    height: 46rem;
}

footer .footer-nav{
    color: white;
    display: flex;
    height: 4rem;
    background-color: #121f3d;
    align-items: center;
    justify-content: space-around;
    list-style: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

Para este reto también inclui CSS de forma que se noten mas los elementos y tengan un mejor orden. Agradezco el aporte de Genesis. Hace que nos esforcemos mas para no plantear solo lo basico sino ir mas allá

![](

CODIGO

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Reto 1</title>
        <style>
            header {
                display: flex;
                justify-content: space-between;
                padding-top: 10px;
                align-items: center;
                background: green;
                color: white;
            }
            section {
                display: flex;
                justify-content: space-around;
                height: 500px;
                box-sizing: content-box;
                align-items: center;
                background:rgb(47, 47, 192);
                color: rgb(255, 255, 255);
            }
            footer {
                display: flex;
                justify-content: space-around;
                background:white;
                width: auto;
                height: 10px;
                color: green;
            }
        </style>
    </head>
    <body>
        <Header>
            <h1>Platzi Video</h1>
            <nav>
                <button>
                    <a href="/cuenta">Cuenta</a>
                </button>
                <button>
                    <a href="/cerrar_sesion">Cerra Sesion</a>
                </button>
            </nav>
        </Header>

        <section>
            <h2>Seccion Principal</h2>
        </section>
        <footer>
            <ul>
                <li>Contactanos</li>
                <li>Politica de privacidad</li>
                <li>Termino y condiciones</li>
            </ul>
            
        </footer>
    </body>
</html>
<body>
    <header>
        <h1>Platzi video</h1>
    </header>
    <nav>
        <ul>
            <li>Cuenta</li>
            <li>Cerrar sesión</li>
        </ul>
    </nav>
    <section>
        <h2>Sección principal</h2>
    </section>
    <footer>
        <ul>
            <li>Contáctanos</li>
            <li>Política de privacidad</li>
            <li>Términos y condiciones</li>
        </ul>
    </footer>
</body>

Mi solución 😁

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <header>
            <h1>Platzi-Video</h1>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar Sesion</li>
            </ul>
        </header>

        <main>
            <h2>
                Seccion principal
            </h2>
        </main>

        <footer>
            <nav>
                <ul>
                    <li>Contactanos</li>
                    <li>Privacidad</li>
                    <li>Condiciones</li>
                </ul>
            </nav>
        </footer>

    </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto-1</title>
</head>
<body>
    <header>
        <h1>platzi-video</h1>
        <nav>
            <ul>
                <li>cuenta</li>
                <li>Cerrar sesión</li>
            </ul>
        </nav>
    </header>
    <main>
        <div>sección principal</div>
    </main>
    <footer>
        <ul>
            <li>contactanos</li>
            <li>Política de privacidad</li>
            <li>Términos y condiciones</li>
        </ul>
    </footer>
</body>
</html>

Ya solo habría que darle estilos con CSS par que tuviera un aspecto mas familiar a las paginas que solemos visitar

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Organizacin de bloque de codigo</title>
</head>
<body>
	<header><h1>Platzi - Video</h1>	</header>
	<div>
		<ul>
			<li>Cuenta</li>
			<li>Cerrar Sesión</li>
		</ul>
	</div>
	<section><h2>Sección Proncipal</h2></section>
	<footer>
		<div>
			<div>Contactenos</div>
			<div>Politica de Privacidad</div>
			<div>Terminos y Condiciones</div>
		</div>		
	</footer>
</body>
</html>


Les dejo un screenshot del codigo y les adjunto mi repositorio de estudio donde empezare a subir los retos del curso por si alguien se interesa https://github.com/jperez331/learning/blob/main/frontendDeveloperCourse/fix_semantic.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi Video</title>
</head>
<body>
    <header>
        <ul>
            <li>Cuenta</li>
            <li>Cerrar sesión</li>
        </ul>
    </header>
    
    <section>Sección principal</section>
    <footer>
        <h4>Contactanos</h4>
        <h5>Politica de privacidad</h5>
        <h5>Términos y condiciones</h5>
    </footer>
</body>
</html>```

Reto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto 1</title>
</head>
<body>
    <!-- Transformar a html semantico:
       
    <div>
        Platzi Video
        <ul>
            <div>Cuenta</div>
            <div>Cerrar sesion</div>
        </ul>
    </div>
    <div>
        Seccion principal
    </div> 
    -->

    <header>
        <div>
            <h1>Platzi Video</h1>
            <img src="/" alt="Platzi-video">
        </div>
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar Sesion</li>
            </ul>
        </nav>
    </header>
    <main>
        Seccion principal
    </main>
    <footer>
        <ul>
            <li>Contactanos</li>
            <li>Terminos y condiciones</li>
            <li>Privacidad</li>
        </ul>
    </footer>

</body>
</html>
<header>
        <h1>Platzi-Video</h1>
        <ul>
            <li>
                <a href="">Cuenta</a>
            </li>
            <li>
                <a href="">Cerrar Sesi&oacuten</a>
            </li>
        </ul>
    </header>
    <main>
        <section>
            <h2>
                Secci&oacuten principal
            </h2>
        </section>
    </main>
    <footer>
        <ul>
            <li>
                <a href="">Cont&aacutentanos</a>
            </li>    
        </ul>
        <ul>
            <li>
                <a href="">Pol&iacutetica de privacidad</a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="">T&eacuterminos y condiciones</a>
            </li>
        </ul>
    </footer>

![](

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reto 1: Organiza el siguiente bloque de código de forma semántica</title>
  </head>
  <body>
    <header>
      <div>Platzi Video</div>
      <nav>
        <ol>
          <li>Cuenta</li>
          <li>Cerrar Sesión</li>
        </ol>
      </nav>
    </header>
    <main>Sección Principal</main>
    <footer>
      <ul>
        <li>Contactanos</li>
        <li>Política de Privacidad</li>
        <li>Términos y Condiciones</li>
      </ul>
    </footer>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <div>
            <h1>Platzi Video</h1>
        </div>
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar Sesión</li>
            </ul>
        </nav>
    </header>
    <section>
        <div>
            <h1>
                Sección principal
            </h1>
        </div>
    </section>
    <footer>
        <ul>
            <li>Contactanos</li>
            <li>Política de provacidad</li>
            <li>Términos y condiciones</li>
        </ul>
    </footer>    
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reto resuelto</title>
</head>
<body>
  <header>
    <h1>Platizo-Video</h1>
    <ul>
      <li>Cuenta</li>
      <li>Cerrar sesión</li>
    </ul>
  </header>
  <section>
    <h1>Sección principal</h1>
  </section>
  <footer>
    <ul>
      <li>Contáctanos</li>
      <li>Politica de privacidad</li>
      <li>Términos y condiciones</li>
    </ul>
  </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi Video</title>
</head>
<body>
    <header>
        <h1>Platzi Video</h1>
        <nav>
            <a href="#"><li>Cuenta</li></a>
            <a href="#"><li>Cerrar Sesión</li></a>
        </nav>
    </header>
    <section>
        <h2>Sección Principal</h2>
    </section>
    <footer>
        <ul>
            <a href=""><li>Contáctanos</li></a>
            <a href=""><li>Políticas</li></a>
            <a href=""><li>Términos</li></a>
        </ul>
    </footer>
</body>
</html>```
<!DOCTYPE html>
<htmllang="es">
  <head>
	<metacharset="UTF-8">
	<metaname="viewport"content="width=device-width, initial-scale=1.0">
	<title>Platzi-Video</title>
  </head>
  <body>
	<header>
		<h1>Platzi-Video</h1>
		<nav>
			<ul>
				<li>Cuenta</li>
				<li>Cerrar Sesión</li>
			</ul>
		</nav>
	</header>
	<main>
		<h2>Sección Principal<h2>
	</main>
	<footer>
		<ul>
			<li>Contáctanos</li>
			<li>Política de privacidad</li>
			<li>Términos y condiciones</li>
		</ul>
	</footer>
  </body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto 1: Organiza el siguiente bloque de código de forma semántica</title>
</head>
<body>
    <header>
        <h1>Platzi video</h1>
        <ul>
            <li><a href="#">Cuenta</a></li>
            <li><a href="#">Cerrar sesión</a></li>
        </ul>
    </header>

    <section>
        <h2>Sección principal</h2>
    </section>

    <footer>
        <ul>
            <li><a href="#">Contáctanos</a></li>
            <li><a href="#">Política de privacidad</a></li>
            <li><a href="#">Térmios y condiciones</a></li>
        </ul>
    </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Platzi demos</title>
</head>
<body>

  <header>
    <h1>Platzi videos</h1>

    <nav>
      <ul>
        <li>Cuenta</li>
        <li>Cerrar Sesión</li>
      </ul>
    </nav>
  </header>
  
  <section>
    <h2>Sección Principal</h2>
  </section>

  <footer>
    <ul>
      <li>Contáctanos</li>
      <li>Politicas de privacidad</li>
      <li>Términos y condiciones </li>
    </ul>
  </footer>

</body>
</html>```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>
    <h1>Platzi Video</h1>
    <ul>
      <li><a href="#">Cuenta</a></li>
      <li><a href="#">Cerrar Sesión</a></li>
    </ul>
  </header>
  <main>
    <section>
      <p>Sección principal</p>
    </section>
  </main>
  <footer>
    <ul>
      <li><a href="#">Contáctanos</a></li>
      <li><a href="#">Política de privacidad</a></li>
      <li><a href="#">Términos y condiciones</a></li>
    </ul>
  </footer>
</body>
</html>```
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi - Video</title>
</head>
<body>
    <header>
        <h1>Platzi-Video</h1>
        <nav>
            <ul>
                <li><ahref="#">Cuenta</a></li>
                <li><ahref="#">Cerrar Sesión</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h1>Sección Principal</h1>
        </section>
    </main>
    <footer>
        <ul>
           <li><ahref="#">Contactanos</a></li>
           <li><ahref="#">Política y Privacidad</a></li>
           <li><ahref="#">Términos y Condiciones</a></li>
        </ul>
    </footer>
    
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi-Video</title>
</head>
<body>
    <header>
        <div id="logo">
            <img src="e3t.png" alt="Logo de la E3T">
        </div>
        <div id="menu">
            <nav>
                <ul>
                    <li>Cuenta</li>
                    <li>Cerrar Sesión</li>
                </ul>
            </nav>
        </div>        
    </header>
    <main>
        <h2>Sección principal</h2>
    </main>
    <footer>
        <ul>
            <li><a href="contact.html">Contactanos</a></li>
            <li><a href="privacy.html">Politica de privacidad</a></li>
            <li><a href="legal.html">Terminos y condiciones</a></li>
        </ul>
    </footer>    
</body>
</html>

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Reto 1</title>
</head>
<body>
<header>
<h1>Platzi-Video</h1>
<nav>
<ul>
<li>Cuenta</li>
<li>Cerrar Sesión</li>
</ul>
</nav>
</header>

<section>
<h2>Sección principal</h2>
</section>

<footer>
<ul>
<li>Contáctanos</li>
<li>Política de privacidad</li>
<li>Términos y condiciones</li>
</ul>
</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi-Video</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar Sesión</li>
            </ul>
        </nav>
    </header>
    <section>
        <h1>Sección principal</h1>
    </section>
    <footer>
        <ul>
            <li><a href="/contacto">Contáctanos</a></li>
            <li><a href="/contacto">Política de privacidad</a></li>
            <li><a href="/contacto">Términos y condiciones</a></li>

        </ul>
    </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        Platzi-video
        <nav>
            <ul>
                <li>Cuenta</li>
                <li>Cerrar Sesión</li>
            </ul>
        </nav>
    </header>
    <section>
        <h2>Seccion principal</h2>
    </section>
    <footer>
        <p>Contactanos</p>
        <p>Politica de privacidad</p>
        <p>Terminos y condiciones</p>
    </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto 1 Platzi</title>
</head>
<body>
    <header>
    <h1 style="text-align: center;">Platzi-Video</h1>
    <ul>
        <li><a href="#">Cuenta</a></li>
        <li><a href="#">Cerrar Sesión</a></li>
    </ul>
</header>
<section>
    <p>Sección Principal</p>
</section>
        <footer>
        <ol>
            <li><a href="#">Contáctanos</a></li>
            <li><a href="#">Política de privacidad</a></li>
            <li><a href="#">Términos y condiciones</a></li>
        </ol>
        </footer>
</body>
</html>```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Arreglar semánticamente el HTML</title>
</head>
<body>
  <header>
    <img src="logo.svg" alt="Platzi Video">
    <nav>
     <ul>
       <li><a href="#">Cuenta</a></li>
       <li><a href="#">Cerrar sesión</a></li>
     </ul>
    </nav>
  </header>
  <main>
    <section>
      <h1>Sección principal</h1>
    </section>
  </main>
  <footer>
    <ul>
      <li><a href="#">Contáctanos</a></li>
      <li><a href="#">Política de privacidad</a></li>
      <li><a href="#">Términos y condiciones</a></li>
    </ul>
  </footer>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto 1 Platzi</title>
</head>
<body>
    <header>
        <h1>Platzi Video</h1>
        <nav>
            <ul>
                <li><a href="">Cuenta</a></li>
                <li><a href="">Cerrar Sesión</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <h2>Sección Principal</h2>
    </section>

    <footer>
        <ul>
            <li><a href="">Contáctanos</a></li>
            <li><a href="">Política de Privacidad</a></li>
            <li><a href="">Términos y Condiciones</a></li>
        </ul>
    </footer>
</body>
</html>

![](

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>Platzi-Video</h1>
        <nav>
            <ul>
                <li> <a href="">Cuenta</a></li>
                <li><a href="">Cerrar sesión</a></li>
            </ul>
        </nav>
    </header>
    <main>
        Seccion Principal
    </main>
    <footer>
        <nav>
            <ul>
                <li><a href="#">Contáctanos</a></li>
                <li><a href="#">Política de privacidad</a></li>
                <li><a href="#">Términos y condiciones</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>