Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es FullStack?

5

Páginas Estáticas vs. Dinámicas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Quiz: Responsive Design

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Desafío: Layout 1

39/55
Recursos

Aportes 1604

Preguntas 89

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

hola
continuando con la temática de mi desafío anterior, les dejo aquí mi reto

Desafìo completado 😄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Among us Layout</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
</head>
<body>
    <header class="header">
        <figure class="logo">
            <img src="./img/logo.png" alt="among us logo">
        </figure>
        <nav class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Maps</a></li>
                <li><a href="#">Skins</a></li>
                <li><a href="#">Server</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <aside class="crewmate">
            <figure class="crewmate__img">
                <img src="./img/purple.png" alt="purple crewmate">
                <img src="./img/yellow.png" alt="yellow crewmate">
                <img src="./img/pink.png" alt="pink crewmate">
                <img src="./img/green.png" alt="green crewmate">
                <img src="./img/white.png" alt="white crewmate">

            </figure>
        </aside>
        <section class="map">
            <h1 class="map__title">POLUS</h1>
            <figure>
                <img src="./img/map.png" alt="polus map">
            </figure>
        </section>
    </main>
    <footer class="footer">
        <div class="social__media">
            <a href="#">Coded by: ALEJANDRA LOPEZ</a>
        </div>
    </footer>
</body>
</html>

/* La fuente usada es In your face, Joffrey! hecha por 
[email protected] */

@font-face {
  font-family: AmongUs;
  src: url(./font.ttf);
}

body {
  background-color: black;
  font-family: AmongUs;
  width: 100vw;
  height: 100vh;
}

header {
  height: 5vh;
  background-color: black;
  border-bottom: #25282c 2px solid;
}

main {
  height: 88vh;
}

.logo {
  display: inline-block;
  margin: 0 0 0 30px;
}

.logo img {
  height: 40px;
}

.nav {
  display: inline-block;
  list-style: none;
  position: absolute;
  right: 0;
}

.nav li {
  display: inline-block;
  margin-right: 3rem;
  font-size: 1.5rem;
}

.nav li a {
  color: white;
  text-decoration: none;
}

.crewmate {
  width: 10%;
  min-width: 150px;
  height: 100%;
  background-color: #25282c;
  display: inline-block;
  padding: 0;
}

.crewmate__img {
  margin: 0em;
}

.crewmate__img img {
  height: 120px;
  margin: 1.5em;
  background-color: #6f7174;
  border-radius: 10px;
  display: block;
}

.map {
  width: 90%;
  height: 80vh;
  display: inline-block;
  background-color: black;
  position: absolute;
}

.map__title {
  text-align: center;
  font-size: 3rem;
  color: white;
}

.map figure {
  text-align: center;
  width: 95%;
}

.map img {
  height: 700px;
  text-align: center;
}

footer {
  width: 100vw;
  height: 4vh;
  border-top: #25282c 2px solid;
}

.social__media {
  margin: 10px;
  text-align: center;
  font-size: 2rem;
}

.social__media a {
  color: white;
}

Reto cumplido
Sin usar flex ni grid
Clave: Conocer bien el funcionamiento de los valores de display y position.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <header class="header">
    <figure class="header__logo">
      <img src="./images/logo.webp" alt="Logo">
      <img src="./images/platzi.webp" alt="Platzi">
    </figure>
    <nav class="nav">
      <ul class="nav__list">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Cursos</a>
        </li>
        <li>
          <a href="#">Instructores</a>
        </li>
        <li>
          <a href="#">Blog</a>
        </li>
      </ul>
    </nav>
  </header>
  <main class="main">
    <aside class="routes">
      <figure class="routes__images">
        <img src="./images/route_1.png" alt="Route 1">
        <img src="./images/route_2.png" alt="Route 1">
        <img src="./images/route_3.png" alt="Route 1">
        <img src="./images/route_4.png" alt="Route 1">
      </figure>
    </aside>
    <section class="content">
      <p class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem debitis nulla reprehenderit culpa architecto fuga deserunt quos repellat officia ut magni quibusdam earum, aliquam, vitae dicta blanditiis excepturi! Neque, dolorum.
      </p>
    </section>
  </main>
  <footer class="footer">
    <p>About us</p>
  </footer>
</body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.header {
  background-color: peru;
}
.header__logo, .nav, .nav__list li {
  display: inline-block;
  margin: 5px;
}
.nav {
  position: absolute;
  right: 0;
}
.nav__list {
  list-style: none;
}
.nav__list li a {
  text-decoration: none;
  color: white;
}
.main {
  height: 400px;
  background-color: seagreen;
}
.routes {
  display: inline-block;
  height: 100%;
  padding: 10px;
  background-color: royalblue;
}
.routes__images img {
  display: block;
  margin: 5px 0;
  border-radius: 10px;
}
.content {
  display: inline-block;
  padding: 10px;
  position: absolute;
}
.footer {
  padding: 20px;
  text-align: center;
  background-color: orange;
}

Este es mi resultado (muy simple xD)

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>layout - Example</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <figure>Logo</figure>
    <nav>
      <ul>
        <li>Inicio</li>
        <li>Cursos</li>
        <li>Blog</li>
        <li>Acerca De</li>
      </ul>
    </nav>
  </header>
  <main>
    <aside>
      <div>Elemento 1</div>
      <div>Elemento 2</div>
      <div>Elemento 3</div>
      <div>Elemento 4</div>
    </aside>
    <section>
      Area principal
    </section>
  </main>
  <footer>
    <div class="footer-social">
      Redes Sociales
    </div>
    <div class="footer-info">
      Información
    </div>
  </footer>
</body>

</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

li {
  list-style: none;
}

header {
  height: 10vh;
  background-color: cadetblue;
}

main {
  height: 80vh;
}

footer {
  height: 10vh;
  background-color: darkorange;
}

figure, nav {
  display: inline-block;
}

figure {
  margin: 1rem;
}

li {
  display: inline-block;
  margin: 1rem;
}

nav {
  position: absolute;
  right: 1.5rem;
}

aside, section {
  display: inline-block;
  height: 80vh;
}

aside {
  width: 20vw;
  background-color: chocolate;
}

aside div {
  height: 15vh;
  margin: 3vh;
  background-color: crimson;
}

section {
  position: absolute;
  left: 20vw;
  width: 80vw;
  padding: 1rem;
  background-color: darkblue;
}

.footer-social, .footer-info {
  display: inline-block;
  margin: 1rem;
}

.footer-info {
  position: absolute;
  right: 1.5rem;
}

Cumpliendo reto

Comparto este diseño que hice de SNK. Para que se inspiren en la estructura que da el profe.

Siguiendo la temática de Pokémon, les dejo el link de mi repo:

https://github.com/carosalazar28/claseHtmlCssDefinitivo/tree/master/reto5

Desafío completado. Este layout es parte de un diseño desechado de mi portafolio 😄
.

Yo repliqué el layout del feed de Youtube, fue un poco complejo a pesar de ya haber tenido algunos conocimientos, pero lo logré :3 (no me dejen morir en los comentarios :c) En un futuro podría añadirle algún framework para que cada video tenga cosas diferentes 😄

Aquí está el HTML y el repositorio es este: https://github.com/sergiosinlimites/replica-youtube

<!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>Desafío Layout</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,[email protected],300;0,400;0,500;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="header-contenedor">
            <span class="header-contenedor__span">&#9776;</span>
            <figure class="logo-figura">
                <img src="./img/youtube.png" alt="logo Youtube" class="logo-figura__imagen">
            </figure>
        </div>
        <div class="header-buscador">  
            <input type="text" placeholder="Buscar" id="buscador" required class="header-buscador__buscador"> 
            <figure class="header-buscador__lupa">
            <img src="./img/buscar.png" alt="" class="header-buscador__lupa-imagen">
            </figure>
            <figure class="header-buscador__voz">
                <img src="./img/buscar-voz.png" alt="" class="header-buscador__voz-imagen">	
            </figure>
        </div>
        <div class="header-botones">
            <figure class="header-botones__botones">
                <img src="./img/video-crear.png" alt="" class="header-botones__botones-imagen">
            </figure>
            <figure class="header-botones__botones">
                <img src="./img/nueve-puntos.png" alt="" class="header-botones__botones-imagen">
            </figure>
            <figure class="header-botones__botones">
                <img src="./img/campanita.png" alt="" class="header-botones__botones-imagen">
            </figure>
            <figure class="header-botones__perfil">
                <img src="./img/mi-cuenta.jpg" alt="" class="header-botones__perfil-imagen">
            </figure>
        </div>
    </header>
    <aside class="menu-secundario">
        <figure class="menu-figura">
            <img src="./img/inicio.png" alt="" class="menu-figura__imagen">
            <span class="menu-figura__span">Inicio</span>
        </figure>
        <figure class="menu-figura">
            <img src="./img/tendencias.png" alt="" class="menu-figura__imagen">
            <span class="menu-figura__span">Tendencias</span>
        </figure>
        <figure class="menu-figura">
            <img src="./img/suscripciones.png" alt="" class="menu-figura__imagen">
            <span class="menu-figura__span">Suscripciones</span>
        </figure>
        <figure class="menu-figura"> 
            <img src="./img/biblioteca.png" alt="" class="menu-figura__imagen">                
            <span class="menu-figura__span">Biblioteca</span>
        </figure>
    </aside>
    <main class="main">
        <div class="main-content">

            <div class="video-contenedor video-1">
                <figure class="video-contenedor__miniatura">
                    <img src="./img/miniatura.webp" alt="" class="video-contenedor__imagen-miniatura video-contenedor__imagen-miniatura--desaparece">   
                    <img src="./img/miniatura-moviendose.webp" alt="" class="video-contenedor__miniatura-moviendose"> 
                    <div class="video-contenedor__overlay-imagen">
                        <span class="video-contenedor__overlay-tiempo">19:13</span>
                    </div>
                </figure>
    
                <div class="detalles">
                    <figure class="detalles__icono-canal">
                        <a href=""><img src="./img/logo-platzi.jpg" alt="" class="detalles__imagen-icono"></a>
                    </figure>
                    <div class="descripcion-contenedor">
                        <h2 class="descripcion-contenedor__titulo">Cómo subir el precio del Bitcoin con solo un tweet | Caso Elon Musk</h2>
                        <div class="descripcion-contenedor__mas-info">
                            <span class="descripcion-contenedor__nombre-canal">Platzi</span>
                            <span class="descripcion-contenedor__visualizaciones">3031 visualizaciones · hace 1 hora</span>
                        </div>
                    </div>
                </div>    
            </div>

            <div class="video-contenedor video-1">
                <figure class="video-contenedor__miniatura">
                    <img src="./img/miniatura.webp" alt="" class="video-contenedor__imagen-miniatura video-contenedor__imagen-miniatura--desaparece">   
                    <img src="./img/miniatura-moviendose.webp" alt="" class="video-contenedor__miniatura-moviendose"> 
                    <div class="video-contenedor__overlay-imagen">
                        <span class="video-contenedor__overlay-tiempo">19:13</span>
                    </div>
                </figure>
    
                <div class="detalles">
                    <figure class="detalles__icono-canal">
                        <a href=""><img src="./img/logo-platzi.jpg" alt="" class="detalles__imagen-icono"></a>
                    </figure>
                    <div class="descripcion-contenedor">
                        <h2 class="descripcion-contenedor__titulo">Cómo subir el precio del Bitcoin con solo un tweet | Caso Elon Musk</h2>
                        <div class="descripcion-contenedor__mas-info">
                            <span class="descripcion-contenedor__nombre-canal">Platzi</span>
                            <span class="descripcion-contenedor__visualizaciones">3031 visualizaciones · hace 1 hora</span>
                        </div>
                    </div>
                </div>    
            </div>

            <div class="video-contenedor video-1">
                <figure class="video-contenedor__miniatura">
                    <img src="./img/miniatura.webp" alt="" class="video-contenedor__imagen-miniatura video-contenedor__imagen-miniatura--desaparece">   
                    <img src="./img/miniatura-moviendose.webp" alt="" class="video-contenedor__miniatura-moviendose"> 
                    <div class="video-contenedor__overlay-imagen">
                        <span class="video-contenedor__overlay-tiempo">19:13</span>
                    </div>
                </figure>
    
                <div class="detalles">
                    <figure class="detalles__icono-canal">
                        <a href=""><img src="./img/logo-platzi.jpg" alt="" class="detalles__imagen-icono"></a>
                    </figure>
                    <div class="descripcion-contenedor">
                        <h2 class="descripcion-contenedor__titulo">Cómo subir el precio del Bitcoin con solo un tweet | Caso Elon Musk</h2>
                        <div class="descripcion-contenedor__mas-info">
                            <span class="descripcion-contenedor__nombre-canal">Platzi</span>
                            <span class="descripcion-contenedor__visualizaciones">3031 visualizaciones · hace 1 hora</span>
                        </div>
                    </div>
                </div>    
            </div>

            <div class="video-contenedor video-1">
                <figure class="video-contenedor__miniatura">
                    <img src="./img/miniatura.webp" alt="" class="video-contenedor__imagen-miniatura video-contenedor__imagen-miniatura--desaparece">   
                    <img src="./img/miniatura-moviendose.webp" alt="" class="video-contenedor__miniatura-moviendose"> 
                    <div class="video-contenedor__overlay-imagen">
                        <span class="video-contenedor__overlay-tiempo">19:13</span>
                    </div>
                </figure>
    
                <div class="detalles">
                    <figure class="detalles__icono-canal">
                        <a href=""><img src="./img/logo-platzi.jpg" alt="" class="detalles__imagen-icono"></a>
                    </figure>
                    <div class="descripcion-contenedor">
                        <h2 class="descripcion-contenedor__titulo">Cómo subir el precio del Bitcoin con solo un tweet | Caso Elon Musk</h2>
                        <div class="descripcion-contenedor__mas-info">
                            <span class="descripcion-contenedor__nombre-canal">Platzi</span>
                            <span class="descripcion-contenedor__visualizaciones">3031 visualizaciones · hace 1 hora</span>
                        </div>
                    </div>
                </div>    
            </div>

            <div class="video-contenedor video-1">
                <figure class="video-contenedor__miniatura">
                    <img src="./img/miniatura.webp" alt="" class="video-contenedor__imagen-miniatura video-contenedor__imagen-miniatura--desaparece">   
                    <img src="./img/miniatura-moviendose.webp" alt="" class="video-contenedor__miniatura-moviendose"> 
                    <div class="video-contenedor__overlay-imagen">
                        <span class="video-contenedor__overlay-tiempo">19:13</span>
                    </div>
                </figure>
    
                <div class="detalles">
                    <figure class="detalles__icono-canal">
                        <a href=""><img src="./img/logo-platzi.jpg" alt="" class="detalles__imagen-icono"></a>
                    </figure>
                    <div class="descripcion-contenedor">
                        <h2 class="descripcion-contenedor__titulo">Cómo subir el precio del Bitcoin con solo un tweet | Caso Elon Musk</h2>
                        <div class="descripcion-contenedor__mas-info">
                            <span class="descripcion-contenedor__nombre-canal">Platzi</span>
                            <span class="descripcion-contenedor__visualizaciones">3031 visualizaciones · hace 1 hora</span>
                        </div>
                    </div>
                </div>    
            </div>

            <div class="video-contenedor video-1">
                <figure class="video-contenedor__miniatura">
                    <img src="./img/miniatura.webp" alt="" class="video-contenedor__imagen-miniatura video-contenedor__imagen-miniatura--desaparece">   
                    <img src="./img/miniatura-moviendose.webp" alt="" class="video-contenedor__miniatura-moviendose"> 
                    <div class="video-contenedor__overlay-imagen">
                        <span class="video-contenedor__overlay-tiempo">19:13</span>
                    </div>
                </figure>
    
                <div class="detalles">
                    <figure class="detalles__icono-canal">
                        <a href=""><img src="./img/logo-platzi.jpg" alt="" class="detalles__imagen-icono"></a>
                    </figure>
                    <div class="descripcion-contenedor">
                        <h2 class="descripcion-contenedor__titulo">Cómo subir el precio del Bitcoin con solo un tweet | Caso Elon Musk</h2>
                        <div class="descripcion-contenedor__mas-info">
                            <span class="descripcion-contenedor__nombre-canal">Platzi</span>
                            <span class="descripcion-contenedor__visualizaciones">3031 visualizaciones · hace 1 hora</span>
                        </div>
                    </div>
                </div>    
            </div>

            <div class="video-contenedor video-1">
                <figure class="video-contenedor__miniatura">
                    <img src="./img/miniatura.webp" alt="" class="video-contenedor__imagen-miniatura video-contenedor__imagen-miniatura--desaparece">   
                    <img src="./img/miniatura-moviendose.webp" alt="" class="video-contenedor__miniatura-moviendose"> 
                    <div class="video-contenedor__overlay-imagen">
                        <span class="video-contenedor__overlay-tiempo">19:13</span>
                    </div>
                </figure>
    
                <div class="detalles">
                    <figure class="detalles__icono-canal">
                        <a href=""><img src="./img/logo-platzi.jpg" alt="" class="detalles__imagen-icono"></a>
                    </figure>
                    <div class="descripcion-contenedor">
                        <h2 class="descripcion-contenedor__titulo">Cómo subir el precio del Bitcoin con solo un tweet | Caso Elon Musk</h2>
                        <div class="descripcion-contenedor__mas-info">
                            <span class="descripcion-contenedor__nombre-canal">Platzi</span>
                            <span class="descripcion-contenedor__visualizaciones">3031 visualizaciones · hace 1 hora</span>
                        </div>
                    </div>
                </div>    
            </div>

            <div class="video-contenedor video-1">
                <figure class="video-contenedor__miniatura">
                    <img src="./img/miniatura.webp" alt="" class="video-contenedor__imagen-miniatura video-contenedor__imagen-miniatura--desaparece">   
                    <img src="./img/miniatura-moviendose.webp" alt="" class="video-contenedor__miniatura-moviendose"> 
                    <div class="video-contenedor__overlay-imagen">
                        <span class="video-contenedor__overlay-tiempo">19:13</span>
                    </div>
                </figure>
    
                <div class="detalles">
                    <figure class="detalles__icono-canal">
                        <a href=""><img src="./img/logo-platzi.jpg" alt="" class="detalles__imagen-icono"></a>
                    </figure>
                    <div class="descripcion-contenedor">
                        <h2 class="descripcion-contenedor__titulo">Cómo subir el precio del Bitcoin con solo un tweet | Caso Elon Musk</h2>
                        <div class="descripcion-contenedor__mas-info">
                            <span class="descripcion-contenedor__nombre-canal">Platzi</span>
                            <span class="descripcion-contenedor__visualizaciones">3031 visualizaciones · hace 1 hora</span>
                        </div>
                    </div>
                </div>    
            </div>

            <div class="video-contenedor video-1">
                <figure class="video-contenedor__miniatura">
                    <img src="./img/miniatura.webp" alt="" class="video-contenedor__imagen-miniatura video-contenedor__imagen-miniatura--desaparece">   
                    <img src="./img/miniatura-moviendose.webp" alt="" class="video-contenedor__miniatura-moviendose"> 
                    <div class="video-contenedor__overlay-imagen">
                        <span class="video-contenedor__overlay-tiempo">19:13</span>
                    </div>
                </figure>
    
                <div class="detalles">
                    <figure class="detalles__icono-canal">
                        <a href=""><img src="./img/logo-platzi.jpg" alt="" class="detalles__imagen-icono"></a>
                    </figure>
                    <div class="descripcion-contenedor">
                        <h2 class="descripcion-contenedor__titulo">Cómo subir el precio del Bitcoin con solo un tweet | Caso Elon Musk</h2>
                        <div class="descripcion-contenedor__mas-info">
                            <span class="descripcion-contenedor__nombre-canal">Platzi</span>
                            <span class="descripcion-contenedor__visualizaciones">3031 visualizaciones · hace 1 hora</span>
                        </div>
                    </div>
                </div>    
            </div>

            <div class="video-contenedor video-1">
                <figure class="video-contenedor__miniatura">
                    <img src="./img/miniatura.webp" alt="" class="video-contenedor__imagen-miniatura video-contenedor__imagen-miniatura--desaparece">   
                    <img src="./img/miniatura-moviendose.webp" alt="" class="video-contenedor__miniatura-moviendose"> 
                    <div class="video-contenedor__overlay-imagen">
                        <span class="video-contenedor__overlay-tiempo">19:13</span>
                    </div>
                </figure>
    
                <div class="detalles">
                    <figure class="detalles__icono-canal">
                        <a href=""><img src="./img/logo-platzi.jpg" alt="" class="detalles__imagen-icono"></a>
                    </figure>
                    <div class="descripcion-contenedor">
                        <h2 class="descripcion-contenedor__titulo">Cómo subir el precio del Bitcoin con solo un tweet | Caso Elon Musk</h2>
                        <div class="descripcion-contenedor__mas-info">
                            <span class="descripcion-contenedor__nombre-canal">Platzi</span>
                            <span class="descripcion-contenedor__visualizaciones">3031 visualizaciones · hace 1 hora</span>
                        </div>
                    </div>
                </div>    
            </div>

            <div class="video-contenedor video-1">
                <figure class="video-contenedor__miniatura">
                    <img src="./img/miniatura.webp" alt="" class="video-contenedor__imagen-miniatura video-contenedor__imagen-miniatura--desaparece">   
                    <img src="./img/miniatura-moviendose.webp" alt="" class="video-contenedor__miniatura-moviendose"> 
                    <div class="video-contenedor__overlay-imagen">
                        <span class="video-contenedor__overlay-tiempo">19:13</span>
                    </div>
                </figure>
    
                <div class="detalles">
                    <figure class="detalles__icono-canal">
                        <a href=""><img src="./img/logo-platzi.jpg" alt="" class="detalles__imagen-icono"></a>
                    </figure>
                    <div class="descripcion-contenedor">
                        <h2 class="descripcion-contenedor__titulo">Cómo subir el precio del Bitcoin con solo un tweet | Caso Elon Musk</h2>
                        <div class="descripcion-contenedor__mas-info">
                            <span class="descripcion-contenedor__nombre-canal">Platzi</span>
                            <span class="descripcion-contenedor__visualizaciones">3031 visualizaciones · hace 1 hora</span>
                        </div>
                    </div>
                </div>    
            </div>

            <div class="video-contenedor video-1">
                <figure class="video-contenedor__miniatura">
                    <img src="./img/miniatura.webp" alt="" class="video-contenedor__imagen-miniatura video-contenedor__imagen-miniatura--desaparece">   
                    <img src="./img/miniatura-moviendose.webp" alt="" class="video-contenedor__miniatura-moviendose"> 
                    <div class="video-contenedor__overlay-imagen">
                        <span class="video-contenedor__overlay-tiempo">19:13</span>
                    </div>
                </figure>
    
                <div class="detalles">
                    <figure class="detalles__icono-canal">
                        <a href=""><img src="./img/logo-platzi.jpg" alt="" class="detalles__imagen-icono"></a>
                    </figure>
                    <div class="descripcion-contenedor">
                        <h2 class="descripcion-contenedor__titulo">Cómo subir el precio del Bitcoin con solo un tweet | Caso Elon Musk</h2>
                        <div class="descripcion-contenedor__mas-info">
                            <span class="descripcion-contenedor__nombre-canal">Platzi</span>
                            <span class="descripcion-contenedor__visualizaciones">3031 visualizaciones · hace 1 hora</span>
                        </div>
                    </div>
                </div>    
            </div>

            <div class="video-contenedor video-1">
                <figure class="video-contenedor__miniatura">
                    <img src="./img/miniatura.webp" alt="" class="video-contenedor__imagen-miniatura video-contenedor__imagen-miniatura--desaparece">   
                    <img src="./img/miniatura-moviendose.webp" alt="" class="video-contenedor__miniatura-moviendose"> 
                    <div class="video-contenedor__overlay-imagen">
                        <span class="video-contenedor__overlay-tiempo">19:13</span>
                    </div>
                </figure>
    
                <div class="detalles">
                    <figure class="detalles__icono-canal">
                        <a href=""><img src="./img/logo-platzi.jpg" alt="" class="detalles__imagen-icono"></a>
                    </figure>
                    <div class="descripcion-contenedor">
                        <h2 class="descripcion-contenedor__titulo">Cómo subir el precio del Bitcoin con solo un tweet | Caso Elon Musk</h2>
                        <div class="descripcion-contenedor__mas-info">
                            <span class="descripcion-contenedor__nombre-canal">Platzi</span>
                            <span class="descripcion-contenedor__visualizaciones">3031 visualizaciones · hace 1 hora</span>
                        </div>
                    </div>
                </div>    
            </div>
            
        </div>
        
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </main>
    
</body>
</html>


Quizás no sea tan bonito como los demás… 😢
Pero es trabajo duro y honesto

Hola amigos quiero compartir con ustedes mi historia de cómo cumplí este reto:
Hace un mes cuando empecé a ver este curso e intentar el reto, la verdad es que me frustré al no entender como hacerlo. Lo intenté un par de veces y siempre había algo que no me gustaba y decidí no compartirlo y seguir avanzando, terminé este curso y un par más en la ruta de desarrollo web, seguía practicando e interiorizando los conceptos, así fue como, regrese aquí, intente hacer de nuevo este reto pendiente y puede decirles que la satisfacción es muy grande al ver que si lo puedes lograr. PD. Con CSS-Grid pueden hacer este layout en 3 minutos pero es importante aprender bien estas bases.

Hacer esto con display flex y grid es pan comido

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto layout1</title>
    <link rel="stylesheet" href="reto.css">
</head>
<body>
    <header class="header">
        <section class="header__section">Logo</section>
        <nav class="header__nav">
            <ul class="nav__ul">
                <li>Home</li>
                <li>Cursos</li>
                <li>Instructores</li>
                <li>Blog</li>
            </ul>
        </nav>
    </header>
    <aside class="aside">
        <section class="aside__section"></section>
        <section class="aside__section"></section>
        <section class="aside__section"></section>
        <section class="aside__section"></section>
    </aside>
    <main class="main">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, dolor id. Tenetur, enim corporis ab culpa velit odit autem nemo cupiditate pariatur perspiciatis blanditiis. Magnam tempore voluptatem rem ad quae.</p>
    </main>
    <footer class="footer">
        <a href="#">About us</a>
        <a href="#">Contact us</a>
    </footer>
</body>
</html>

Codigo CSS:

*{
    box-sizing: border-box;
    margin:0;
    padding: 0;
    font-size: 62.5%;
    font-size: 1.3rem;
}

body{
    display: grid;
    grid-template-areas: "header header"
                        "aside main"
                        "footer footer";
}

.header{
    background-color: burlywood;
    width: 100vw;
    height: 10vh;
    grid-area: header;
    display: flex;
    justify-content: space-between;
}

.header__nav .nav__ul li{
    display: inline-block;
    padding-right: 25px;
}

.aside{
    background-color: coral;
    width: 25vw;
    height: 80vh;
    grid-area: aside;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aside .aside__section{
    background-color: blue;
    width: 80%;
    height: 20%;
    margin:10px;
    border-radius: 20px;
}

.main{
    background-color: crimson;
    width: 75vw;
    height: 80vh;
    grid-area: main;
}

.footer{
    background-color: dodgerblue;
    width: 100vw;
    height: 10vh;
    grid-area: footer;
    display: flex;
    justify-content: space-between;
}

.footer a{
    text-decoration: none;
}

Aquí dejo mi reto concluido
Espero les agrade


Desafio Completado:
Sin Flex!!

HTML

<!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="./style.css">
  <title>Layout example</title>
</head>
<body>
  <header>
    <figure>Logo</figure>
    <nav>
    <ul>
      <li>Inicio</li>
      <li>Cursos</li>
      <li>Blog</li>
      <li>Acerca de</li>
    </ul>
    </nav>
  </header>

  <main>
  <aside>
    <div>Elemento 1</div>
    <div>Element 2</div>
    <div>Elemento 3</div>
    <div>Elemento 4</div>
  </aside>
  <section>Area principal</section>
  </main>
  
  <footer> 
    <h2 class="footer-social" >
  Redes sociales
</h2>

<a class="footer-info"> Informacion</a>
  </footer>
</body>
</html> 

CSS

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

html{
  font-size: 62.5%;
}

li{
  list-style: none;
}

body{
  font-size: 1.6rem;
  background-color: #f4f4f4;
  }

header{
  height: 10vh;
  background-color: #273b47;
  color: #fff;
}

main{
  height: 80vh;
}

footer{
  height: 10vh;
  background-color: #273b47;
  color: #fff;
}

figure, nav{
  display: inline-block;
  
}

figure{
  margin: 1rem;
  
}

li{
  display: inline-block;
  margin: 1rem;
}

nav{
  top: 1rem;
  position: absolute;
  right: 1.5rem;
}

aside,section{
  display: inline-block;
  height: 80vh;
  background-color: #f9f9f9;
}

aside{
  width: 20vw;
  }

aside div{
  height: 15vh;
  margin: 3vh;
  background-color: #fff;
  box-shadow: 1px 2px 4px 0 rgba(21,99,157,.16);

}

section{ 
  position: absolute;
  left: 20vw;
  width: 80vw;
  padding: 1rem;
  background-color: #e9e9e9;

}


.footer-social, .footer-info {
  display: inline-block;
  margin: 1rem;
}

.footer-info {
  position: absolute;
  right: 1.5rem;
}

hola ,como estan?.
Quisiera una opinion porfavor , en realidad dure bastante realizandolo con casi todo lo que e aprendido

Mi desafio

Reto Completado 😃


Código HTML 👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="description" content="Tiene el reto de la clase de display"/>
    <meta name="robots" content="index,follow"/>
    <title>Reto Clase Display</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:[email protected];400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css" type="text/css">
  </head>
  <body>
    <header class="header">
      <figure class="headerLogo">
        <img 
        src="./img/logo_mario.png" 
        alt="Mario's logo"
        />
      </figure>
      <nav class="headerMenu">
        <ul>
          <li>Play</li>
          <li>Options</li>
          <li>Exit</li>
          <li>Credit</li>
        </ul>
      </nav>
    </header>
    <div class="pageCentralPart">
      <section>
        <div>
          <figure class="sectionImageContainer">
            <img 
            src="https://i.pinimg.com/236x/d2/bb/3c/d2bb3c58ee763691758450eaeb2c6554.jpg" 
            alt="Red Pocket Star"
            />
          </figure>
        </div>
        <div>
          <figure class="sectionImageContainer">
            <img 
            src="https://i.pinimg.com/236x/2b/ed/3b/2bed3b4c5d94a0dfc137c49a38f0db0a.jpg" 
            alt="Blue Pocket Power"
            />
          </figure>
        </div>
        <div>
          <figure class="sectionImageContainer">
            <img 
            src="https://i.pinimg.com/236x/00/28/4b/00284b481fe41b3e0a8fb801257bfe3a.jpg" 
            alt="Red Pocket Flower"
            />
          </figure>
        </div>
        <div>
          <figure class="sectionImageContainer">
            <img 
            src="https://i.pinimg.com/236x/c3/26/a6/c326a661e7009e3c5e51cbea0c62481a.jpg" 
            alt="Blue Pocket Star"
            />
          </figure>
        </div>
      </section>
      <main class="main">
        <div class="mainImageContainer">
          <div>
            <figure class="muroContainer">
              <img 
              src="./img/muro.png" 
              alt="muro"
              />
            </figure>
          </div>
          <div>
            <figure class="browserContainer">
              <img 
              src="./img/browser.png" 
              alt="browser"
              />
            </figure>
          </div>
          <div>
            <figure class="enemigo1Container">
              <img 
              src="./img/enemigo_1.png" 
              alt="enemigo_1"
              />
            </figure>
          </div>
          <div>
            <figure class="luiguiContainer">
              <img 
              src="./img/luigui.png" 
              alt="luigui"
              />
            </figure>
          </div>
          <div>
            <figure class="marioContainer">
              <img 
              src="./img/mario.png" 
              alt="mario"
              />
            </figure>
          </div>
          <div>
            <figure class="enemigo2Container">
              <img 
              src="./img/enemigo_2.png" 
              alt="enemigo_2"
              />
            </figure>
          </div>
          <div>
            <figure class="enemigo3Container">
              <img 
              src="./img/enemigo_3.png" 
              alt="enemigo_3"
              />
            </figure>
          </div>
        </div>
      </main>
    </div>
    <footer>
      <p>Hecho por: <strong>Fabiola Castro 😃</strong></p>
    </footer>
  </body>
</html>

Código CSS 👇

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  font-size: 62.5%;
  font-family: 'Roboto Mono', monospace;;
}
.header{
  background-image: url('./img/fondo_1.png');
  background-size: 400px 65px;
  height: 10vh;
  width: 100vw;
}
.headerLogo{
  width: 15%;
  height: 60px;
  position: absolute;
  top: 0;
  margin-top: 2.5px;
  margin-left: 10px;
  background-color: #96A08E;
  border: 2px solid black;
  border-radius: 6px;
}
.headerLogo img{
  height: 58px;
  margin: 1px 20%;
  width: 60%;
}
.headerMenu{
  position: absolute;
  right: 0;
  top: 0;
  margin: 17px;
  width: 50%;
}
.headerMenu ul li{
  display: inline-block;
  list-style: none;
  padding: 5px;
  font-size: 1.6rem;
  border: 2px solid black;
  background-color: #96A08E;
  text-align: center;
  border-radius: 5px;
  width: 20%;
  margin: 0 12px;
}
.pageCentralPart{
  display: flex;
}
section{
  background-color:  #137EDE;
  height: 80vh;
  display: inline-block;
  width: 20vw;
}
section div{
  width: 90%;
  margin: 20px auto;
  height: 20%;
  border: 2px solid black;
  border-radius: 10px;
  background-color: #96A08E;
}
.sectionImageContainer{
  height: 100%;
  width: 100%;
}
.sectionImageContainer img{
  height: 95%;
  width: 95%;
  margin: 1.5% 2.5%;
  border-radius: 10px;
}
.main{
  background-image: url('./img/fondo_3.png');
  background-size: 500px 525px;
  height: 80vh;
  width: 80vw;
}
.mainImageContainer{
  display: flex;
}
.muroContainer, .browserContainer, .enemigo1Container, .luiguiContainer, .marioContainer, .enemigo2Container, .enemigo3Container{
  height: 100%;
  width: 5%;
}
.muroContainer img{
  height: 525px;
  position: relative;
  right: 10px;
}
.browserContainer img{
  height: 300px;
  position: relative;
  top: 120px;
}
.enemigo1Container img{
  height: 300px;
  position: relative;
  top: 240px;
  left: 650px;
}
.luiguiContainer img{
  height: 150px;
  position: relative;
  top: 220px;
  left: 60px;
}
.marioContainer img{
  height: 150px;
  position: relative;
  bottom: 20px;
  right: 30px;
}
.enemigo2Container img{
  height: 80px;
  position: relative;
  top: 130px;
  right: 100px;
}
.enemigo3Container img{
  height: 150px;
  position: relative;
  top: 375px;
  right: 250px;
}
footer{
  background-image: url('./img/fondo_2.png');
  background-size: 300px 65px;
  height: 10vh;
  width: 100vw;
}
footer p{
  position: absolute;
  bottom: 0;
  margin: 10px;
  width: 360px;
  height: 40px;
  padding: 5px;
  background-color: rgb(178,118,31);
  border-radius: 10px;
  font-size: 2rem;
}

Practicando se entiende mejor
aún siento que me hace falta mucho, tengo muchas dudas.

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>Ejercicio Display</title>
        <link rel="stylesheet" href="./style.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],400;0,700;1,500&display=swap" rel="stylesheet">    
    </head>
    <body>
        <header>
            <nav class="nav">
                    <img src="./logo.png" class="nav__logo" alt="logo de la empresa">
                <ul class="nav__list">
                    <li><a href="#"></a>home</li>
                    <li><a href="#"></a>Inspiration</li>
                    <li><a href="#"></a>Find Work</li>
                    <li><a href="#"></a>Learn Design</li>
                </ul>
            </nav>
        </header>
        <aside class="aside">
            <!-- no se si usar div o section
            no se si sea necesario usar el figure o solo img-->

            <div class="card">
                <p class="card__texto">Lorem ipsum dolor sit amet, nummy nibh</p>
                <img src="./ico_services_1.png" class="card__imag" alt="imagen de la seccion uno">

                <button type="button" class="card1__btn">READ MORE</button>
            </div>
            <div class="card">
                <p class="card__texto">Lorem ipsum dolor sit amet, nummy nibh</p>
                <img src="./ico_services_2.png" class="card__imag" alt="imagen de la seccion dos">
                <button type="button" class="card2__btn">READ MORE</button>
            </div>
            <div class="card">
                <p class="card__texto">Lorem ipsum dolor sit amet, nummy nibh</p>
                <img src="./ico_services_3.png" class="card__imag" alt="imagen de la seccion tres">
                <button type="button" class="card3__btn">READ MORE</button>
            </div>
            <div class="card">
                <p class="card__texto">Lorem ipsum dolor sit amet, nummy nibh</p>
                <img src="./ico_services_4.png" class="card__imag" alt="imagen de la seccion cuatro">
                <button type="button" class="card4__btn">READ MORE</button>
            </div>
        </aside>
        <main class="main">
            <section class="main__description">
                <img src="./img_description.png" class="main_img" alt="imagen de la descripcion">
                <h3 class="main__title">Lorem ipsum<br>dolor sit amet</h3>
                <p class="main__parrafo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>

                <button type="button" class="main__btn">READ MORE</button>
            </section>
        </main>
    </body>
</html>

CSS

<code> 
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Poppins', sans-serif;
}
.nav{
    width: 100%;
    height: 80px;
    padding: 10px;
    background-color: #343552;
    border-bottom: 5px solid #1D1F3A;
}
.nav__logo{
    left:0px;
    margin-left: 50px;
    width: 100px;
    height: auto;
}
.nav__list{
    position: absolute;
    right:0px;
    display: inline-block;
    list-style: none;
    margin: 20px 50px;
}
.nav__list li{
    display: inline-block;
    font-weight: 500;
    font-size: 15px;
    margin-right: 20px;
    color: #ffffff;
}
.aside{
    display: inline-block;
    height: auto;
    padding: 10px 40px;
    background-color: #D7DBE6; 
}
.card{
    display: block;
    width: 300px;
    height: auto;
    background-color: #ffffff;
    margin-bottom: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 15px;
    align-items: center;
}
.card__texto{
    display: inline-block;
    width: 120px;
    font-size: 15px;
    vertical-align: middle;
}
.card__imag{
    position: relative;
    left: 15px;
    width: 120px;
    height: auto;
    vertical-align: middle;
}
.card1__btn{
    display: block;
    position: absolute;
    background-color: #FF586B;
    border: none;
    color: white;
    padding: 8px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 100px;
    margin-left: 55px;   
}
.card2__btn{
    display: block;
    position: absolute;
    background-color: #00B7C4;
    border: none;
    color: white;
    padding: 8px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 100px;
    margin-left: 55px;   
}
.card3__btn{
    display: block;
    position: absolute;
    background-color: #35A194;
    border: none;
    color: white;
    padding: 8px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 100px;
    margin-left: 55px;   
}
.card4__btn{
    display: block;
    position: absolute;
    background-color: #734D9C;
    border: none;
    color: white;
    padding: 8px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 100px;
    margin-left: 55px;   
}
.main{
    width: auto;
    height: 800px;
    display: inline-block;
    position: absolute;
    background-color: #F5F5F5;
    padding: 80px 100px;
}
.main__description{
    display: block;
}
.main__title{
    font-size: 43px;
    font-weight: 700;
    color: #343552;
    margin: 20px 0;
}
.main__parrafo{
    font-size: 20px;
    margin-right: 750px;
    font-weight: 600;
    color: #212121;
}
.main__btn{
    margin-top: 30px;
    background-color: #734D9C;
    border: none;
    color: white;
    padding: 8px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 100px;
}

Borré mi comentario con el desafío, así que lo vuelvo a subir. Llevo jugando Genshin Impact desde que salió a finales de Septiembre. Mi código es 602442074, lvl 52. Mundo lvl 7. Les dejo mi reto de Layout con los personajes que más me gustan del juego.

Desafío completado! 😄

Hola comparto mi ejercicio.



ESte es mi desafio me costo trabajo ubicar el aside y el main pero al final pude los estilos si no es muy bonito que digamos

![](

Aquí mi desafío o reto



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="./estilo.css">
    <title>Layout</title>
</head>
<body>
    <header class="container">
        <p class="left">Logo</p>
        <div class="right">
                <li>Home</li>
                <li>Page</li>
                <li>About</li>
        </div>
    </header>
    <main class="navbar">
        <section class="one">
            <div id="one"></div>
            <div id="two"></div>
            <div id="three"></div>
            <div id="four"></div>
        </section>
        <section class="two"></section>
    </main>
    <footer class="footer">
        Adriel Pezo
    </footer>
</body>
</html> 

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 62.5%;
}

.container {
    background-color: rgb(175, 149, 110);
    width: 100%;
    height: 4rem;
    font-size:4rem;
    padding-top:0.5rem ;
}

.left{
    float: left;
    margin-left: 2rem;
}

.right{
    float: right;
    margin-right: 2rem;
}

.container li{
    display: inline-block;
}

.navbar{
    display: grid;
    grid-template-columns: 0.75fr 2.25fr;
    height: 68.9rem;
}

.one{
    background-color: rgb(153, 118, 65);
    display: block;
    padding: 1rem;
}

#one{
    background-color: rgb(212, 166, 96);
    height:14rem;
    border-radius: 1rem;
    margin: 1.5rem 1rem;
}

#two{
    background-color: rgb(212, 166, 96);
    height:14rem;
    border-radius: 1rem;
    margin: 1.5rem 1rem;
}

#three{
    background-color: rgb(212, 166, 96);
    height:14rem;
    border-radius: 1rem;
    margin: 1.5rem 1rem;
}

#four{
    background-color: rgb(212, 166, 96);
    height:14rem;
    border-radius: 1rem;
    margin: 1.5rem 1rem;
}

.two{
    background-color: rgb(250, 153, 7);
}

footer{
    position:absolute;
    background-color: rgb(139, 223, 235);
    width: 100%;
    height:3rem;
}

Cumplí el reto, me costo pero algo es algo, les dejo el código puesto que me costo harto colocar el menu a la derecha y ordenar lo del medio, pero helo aquí.
Deje el código con comentarios puesto que les pueden ayudar harto, por lo menos a mi me sirve para orientarme.

.

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>Desafio1</title>
    <link rel="stylesheet" href="./style.css">

</head>
<body>
    <header class="header">
        <div class="logo">Logo</div>
        <nav class="nav">
            <ul>
                <li>Home</li>
                <li>Cursos</li>
                <li>Instrustores</li>
                <li>Blog</li>
            </ul>
        </nav>
    </header>
    <main class="main">
        <div class="anuncios">
            <div class="anun"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>
            <div class="anun"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>
            <div class="anun"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>
            <div class="anun"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>
        </div>
        <div class="info-principal"><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam reiciendis quas unde doloremque omnis quo rem recusandae molestiae, ipsa minima maxime, assumenda aspernatur laudantium quidem aut explicabo dolor saepe culpa.</p></div>        
    </main>
    <footer>
        <div class="info"><p>Info de la empresa</p></div>
        <div class="rrss"><p>RRSS</p></div>
    </footer>
</body>
</html>

.
CSS

/* Etiquetas globales */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

/* Etiquetas del header */
header {
    background-color: blueviolet;
}

.logo {
    display: inline-block;
    font-size: 2rem;
    margin: 10px;
}

.nav {
    display: inline-block;
    /* con esto logré ...*/
    position: absolute;
    right: 0;
    /*...que el menu quedase a la derecha */
    padding-top: 4px; /*para centrarlo verticalmentes*/
}

.nav li {
    font-size: 1.6rem;
    display: inline-block;
    list-style: none;
    margin: 10px 0;
    padding: 0 20px;
}

/* Etiquetas del main */
p {
    font-size: 1.6rem;
}

.main {
    height: 500px;
    background-color: burlywood;
}

.anuncios {
    display: inline-block;
    background-color: blue;
    height: 100%;
    width: 20%;
    max-width: 170px;
    padding: 10px;
}

.info-principal {
    display: inline-block;
    position: absolute;
    padding: 10px;
}

.anun {
    display: block; /* Esto es para que queden apilados*/
    margin: 10px;
    padding: 5px;
    background-color: cyan;
    border-radius: 10px;
}

/* Etiquetas del footer */

footer {
    background-color: yellow;
    height: 30px;
    padding: 0px 10px 0px 10px;
}

.info {
    display: inline-block;
    position: absolute;
    padding-top: 7px; /*Esto es para centrarlo al medio verticalmente */
}

.rrss {
    display: inline-block;
    position: absolute; /*Con estas ...*/
    right: 10px; /*... 2 lineas las rrss quedan a la derecha */
    padding-top: 7px;
}


Hola!
Así me quedo el Reto del Layout1.

Aqui comparto el reto que realice.

Traté de simular una interfaz tipo netflix, no lo hice funcional porque solo queria experimentar las posiciones y eso pero dejo el codigo por si le sirve a alguien mas

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">
    <link rel="stylesheet" href="./styles.css">
    <title>Intento Netflix</title>
</head>
<header class="encabezado"><div class="logo"><img src="/EJERCICIO/imagenes/Netflix.png" alt="Logo de netflix">
<section><nav class="navbar">
    <ul>
        <li>Home</li>
        <li>Peliculas</li>
        <li>Series</li>
        <li>Mi cuenta</li>
    </ul>
</nav></section></div>

</header>
<body>
    <main>
        <section class="columna__trailers">
            <div class="trailer__1"><figure><img src="./imagenes/trailer1 (1).jpg" alt="Trailer ladrones de bancos"></figure></div>
            <div class="trailer__2"><figure><img src="./imagenes/trailer2 (1).jpg" alt="Trailer vieja loca"></figure></div>
            <div class="trailer__3"><h1>Clic Aqui Para Ver Mas Trailers</h1></div>
        </section>
        <section class="reproductor"><figure><img src="./imagenes/reproduciendo2final.jpg" alt=""></figure></section>
    </main>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    font-size: 62.5%;
  }

 header {
     height: 16vh;
     background-color: rgb(0, 0, 0);
     display:block;
     
  }


  .logo {
      display: block;
  }

  .logo img {
    width: 80%;
    max-width: 170px;
    display:inline-block;
    margin: 5px auto;
    padding: 0px;
    position: relative;
    left: 25px;
  }

.navbar {
    text-align: right;
    color: white;

    
}

  .navbar li {
    width: 80px;
    height: 0px;
    display: inline-block;
    text-align: right;
    padding: 3px;
    margin: 10px;
    position: relative;
    font-size: 15px;
    right: 40px;
    bottom: 80px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  .columna__trailers {
      width: 25vw;
      height: 85vh;
      background-color: rgba(20, 20, 20, 0.836);

  }

  .trailer__1 {
      width: 20vw;
      height: 15vw;
      padding: 10px;
      border: 5px white solid;
      position: relative;
      left: 35px;
      top: 10px;
      background-color: royalblue;
  }

  .trailer__1 img {
      width:19.5vw;
      height: 14.5vw;
      position: relative;
      right: 10.8px;
      bottom: 10.8px; 
  }

  .trailer__2 {
    width: 20vw;
    height: 15vw;
    padding: 10px;
    border: 5px white solid;
    position: relative;
    left: 35px;
    top: 60px;
    background-color: royalblue;
}

.trailer__2 img {
    width:19.45vw;
    height: 14.5vw;
    position: relative;
    right: 10px;
    bottom: 10.8px;
}


.trailer__3 {
    width: 24vw;
    height: 2.8vw;
    padding: 10px;
    border: 1px white solid;
    position: relative;
    top: 98px;
    left: 7px;
    background-color: rgb(20, 20, 20, 0.836);
}

.trailer__3 h1 {
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.8rem;
    color:white;
    position: relative;
    bottom: 3px;
}

.reproductor {
    width: 73.9vw;
    height: 85vh;
    border: 5px black solid;
    background:cadetblue;
    position: relative;
    left: 384px;
    bottom: 614px;
    display: inline-block;
}

.reproductor img {
    width: 73.3vw;
    height: 84.3vh;
    position: relative;
    bottom: 5px;
}
<h3>Aquí mi copia de Duolingo con sólo imágenes, espero pronto poder replicar una de mis aplicaciones web favoritas por completo 🚀</h3> <h3>
</h3>


Hola, en mi caso quise hacer una emulación del sitio de platzi, me costó mucho mucho trabajo pero pude hacerlo:

Mucha, mucha paciencia me ha llevado pero me siento contento con el resultado.

La foto es de mi pueblo!!

Acá mi reto completado, sigo con la onda de los 90’

Madremia, que le quito el trabajo a Diego

Hola gente.

Este es mi aporte. Me inspiré en uno de mis juegos favoritos XD. No quedó tan pulido pero igual contento con el resultado.

<code> 
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="descripcion" content="RETO">
        <meta name="viewport" content="width=device-width,
        user-scalable=no, initial-scale=1.0,
           maximum-scale=1.0, minimum-scale=1.0">
        <meta name="robots" content="index, follow">
        <title>RETO</title>
        <link rel="stylesheet" href="./style.css">

    </head>
    <body>
        <figure class="body-fondo">
            <img class="body-fondo__img" loading="lazy" src="./img/mass-effect-legendary-edition-6615.png" alt="imagen mass effectde fondo"/>

        </figure>
        <header>
            <nav>
                <figure class="nav-logo">
                    <img class="nav-logo__img" loading="lazy" src="./img/N7_logo.png" alt="imagen de logo mass effect">
                </figure>
                
                <ul class="nav-bar">
                    <li class="nav-bar__item"><a href=""><strong>Setting</strong></a></li>
                    <li class="nav-bar__item"><a href=""><strong>Menu</strong></a></li>
                    <li class="nav-bar__item"><a href=""><strong>Web Site</strong></a></li>
                    <li class="nav-bar__item"><a href=""><strong>Log Out</strong></a></li>
                </ul>
                
            </nav>
        </header>
        <main>
             <aside class="main-aside">

                <figure class="main-aside__figureCharacter " class="soldado">
                    <img src="./img/personaje-select.png" loading="lazy" alt="Human">
                </figure >
                <div class="main-aside__div">
                    <p><strong>Raza: Humano</strong></p>
                    <p><strong>Clase: Soldado</strong></p>
                </div>
                
                <figure class="main-aside__figureCharacter">
                    <img src="./img/Asari-character.png" loading="lazy" alt="Asari">
                </figure>
                <div class="main-aside__div">
                    <p><strong>Raza: Asari</strong></p>
                    <p><strong>Clase: Biótico</strong></p>
                </div>

                <figure class="main-aside__figureCharacter">
                    <img src="./img/Krogan-character.png" loading="lazy" alt="Krogan">
                </figure>
                <div class="main-aside__div">
                    <p><strong>Raza: Krogan</strong></p>
                    <p><strong>Clase: Vanguardia</strong></p>
                </div>
                
                <figure class="main-aside__figureCharacter">
                    <img src="./img/mass-effect-las-turiano ga.png" loading="lazy" alt="Turiano">
                </figure>
                <div class="main-aside__div">
                    <p><strong>Raza: Turiano</strong></p>
                    <p><strong>Clase: Infiltrado</strong></p>
                
                </div> 
                
            </aside> 
            <section class="main-section"> -->
                
                <div>
                    <figure>
                        <img src="./img/personaje-selected2.png" loading="lazy" alt="Personaje seleccionado">
                    </figure>
                    <p> 
                        <strong>SOLDADO:</strong> Esta clase está enfocada casi exclusivamente en el uso de las armas de fuego, que maneja
                         con una habilidad sin igual.
                    </p> 

                </div>
                <div>
                    <figure>
                        <img src="./img/liara-relacion_select.png" loading="lazy" alt="Personaje seleccionado">
                    </figure>
                    <p> 
                        <strong>BIÓTICA:</strong> Manipulan la energía oscura y crean campos 
                        de efecto de masa mediante el uso de los impulsos eléctricos de su cerebro.
                    </p> 

                </div>
                <div>
                    <figure>
                        <img src="./img/Urdnot_Wrex_select.png" loading="lazy" alt="Personaje seleccionado">
                     </figure>
                    <p> 
                        <strong>VANGUARDIA:</strong> Combina los poderes ofensivos del Adepto y el Soldado. Los Vanguardias
                        tienen acceso a varias armas y armaduras. 
                    </p> 

                </div>
                
                <div>
                    <figure>
                        <img src="./img/Turiano selected.png" loading="lazy" alt="Personaje seleccionado">
                     </figure> 
                    <p> 
                        <strong>INFILTRADO:</strong> Especialistas en tecnología y combate, por lo que son el guerrero perfecto
                         para entrar en el territorio enemigo.
                    </p> 

                </div>  
                      
            
            </section>   

        </main>
        
        
        <footer class="footer">
            <P><strong>Desarrolado por "El que aprende" - Love Mass Effect </strong> </P>
        </footer> 

    </body>
</html>
<code> 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
}
/*BODY*/

/* Page Background */

.body-fondo__img{
    position: absolute;
    width: 100vw;
    height: 100vh;
}

/*HEADER*/

header{
    width: 100vw;
}


nav{
    position: relative;
    padding: 0.3rem;
    width: 100vw;
    border: solid 0.7rem black;
    background-color: rgba(255, 0, 0, 0.411);
}


/*Logo*/

.nav-logo{
    
    display: inline-block;
    margin-right: 0;  
}
.nav-logo__img{
    border-radius: 0.8rem;
}

/*Barra de navegación*/


.nav-bar{
    
    position:relative;
    display: inline-block;
    left: 62.5rem; 
    bottom: 2.4rem;
  
   
}
.nav-bar__item{
    display:inline-block;
    padding-left: 1.9rem;
    padding-right: 1.5rem;
    
}
.nav-bar__item a{
   
    font-size: 2rem;
    text-decoration: none;
    color: white;
    padding: 0.7rem;
    border: white 0.1rem solid;
    border-radius: 0.8rem;
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;

}


/*MAIN*/




/*Section*/

.main-section {
    position: relative; 
    display: inline-block;
    bottom: 2rem; 
   

} 

    .main-section div{
        display: inline-block;
        
    }

    /*Imagen de personaje*/

    .main-section figure{

        opacity: 1;
        border: 0.2rem solid white; 
        
    
    }

    .main-section p{
        display: inline-block;
        color: white;
        font-size: 5rem;
        width: 21.7rem;
        min-width: 21.7rem;
        max-height: 300rem;
        font-size: 1.8rem;
        padding: 0.5rem;
        border: 0.4rem solid black;
        border-radius: 0.8rem;
        
    
    }

/*Aside*/

.main-aside{
    width: 40rem;
    position: relative;
    display: inline-block;
}

/* Figuras de personajes*/

.main-aside__figureCharacter{
    padding-top: 0.3rem;
    display: inline-block;
    padding-left: 0.8rem;
    padding-right: 0.6rem;
    
}

.main-aside__figureCharacter img{
    display: inline-block;
    border: 0.4rem solid black;
    border-radius: 0.8rem;
    padding: 0.2rem;

}

.main-aside__div{
    display: inline-block;
    position: relative;
    bottom: 3.7rem; 
    color: white;
    font-size: 2rem;
    background-color: red;
    border: 0.4rem solid black;
    border-radius: 0.8rem; 
    
    
}

 /*FOOTER*/

footer{
    position: relative;
    background-color: rgba(255, 0, 0, 0.411);
    width: 100%;
    bottom: 0.2rem; 
    padding-left: 3rem; 
    border: solid 0.5rem black; 
}
   
     
 
footer p{
   
    color: white;
    font-size: 1.5rem;

}


HTML

<!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="layo.css">
    <title>Document</title>
</head>
<body>
    <header class="main-header">
        <nav class="main-nav">
            <h1 class="title">Titulo</h1>
            <figure>
                <img class="arbol" src="arbol.png" alt="arbol">
            </figure>
            <ul class="main-nav_ul">
                <li class="main-nav_li""><a href="index.html">Home</a></li>
                <li><a href="#">Plant a tree</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <label for="buscar">
            <img class="lupa" src="lupa.png" alt="">
            <input class="search" type="search" placeholder="buscar...">
            </label>
        </nav>
    </header>
    <main class="main">
        <aside class="aside">
            <div class="reforestacion">
                <img class="aside-refo" src="refo.jpeg" alt="">
                <p>Reforestaciones</p>
            </div>
            <div class="aside-div_playa">
                <img class="aside-playa" src="playa.jpg" alt="">
                <p>Limpiar playas</p>
            </div>
            <div>
                <img class="aside-reciclaje" src="reciclaje.jpg" alt="">
                <p>Reciclaje</p>
            </div>
            </aside>
            <section class="principal">
                <div class="principal-div">
                    <h3>Salvemos a nuestro mundo</h3>
                    <figure>
                        <img class="mundo" src="mundo.jpeg" alt="">
                    </figure>
                    <p class="principal-div_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita doloremque reprehenderit quos deleniti vel perferendis sequi ut rem iusto quidem, illum provident sunt porro error debitis ducimus eos dolorem eveniet.</p>
                </div>
            </section>
    </main>
</body>
</html>```

CSS


`* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 62.5%;
}

.main-header {
background-color: rgb(67, 216, 67);
}

.main-nav .main-nav_ul li{
display: inline-block;
padding: 25px;

}

.title {
font-size: 6rem;
font-family: ‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, sans-serif;
color: white;
position:absolute;
top: 2%;
margin-left: 15px;
}

.arbol {
width: 50px;
height: 50px;
position: absolute;
top: 5%;
left: 15%;
}

.main-nav_li, a {
display: inline-block;
padding: 5px;
margin: 5px 20px;
font-size: 2.5rem;
font-family: ‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, sans-serif;
text-decoration: none;
color:white;
}

.main-nav_li {
margin-left: 20%;
}

.search {
position: absolute;
left: 73%;
top: 7%;
border-radius: 5%;
border: none;
padding: 5px;
}

.lupa {
width: 25px;
height: 20px;
position: absolute;
top: 7%;
left: 70.5%;
}

.aside {
height: 100vh;
width: 300px;
}

.principal {
position: absolute;
left: 23%;
top: 18%;
width: 76vw;
height: 100vh;
align-items: center;
}

div
{
background-color: rgba(12, 12, 12, 0.253);
width: 250px;
height: 150px;
border-radius: 10%;
margin-top: 15px;
margin-left: 25px;
}

.aside-refo {
width: 245px;
height: 120px;
position: absolute;
top: 24%;
left: 2%;
border-radius: 10%;
}

.aside-playa {
width: 245px;
height: 120px;
position: absolute;
top: 50%;
left: 2%;
border-radius: 10%;
}

.aside-reciclaje {
width: 245px;
height: 120px;
position: absolute;
top: 77%;
left: 2%;
border-radius: 10%;
}

p {
text-align: center;
font-size: 1.8rem;
font-family: Helvetica, sans-serif;
color: white;
}

.principal-div {
width: 85%;
min-height: 500px;
margin: 0 auto;
background-color: white;
}

h3 {
background-color: white;
color: rgb(17, 184, 17);
font-family: monospace ;
font-size: 4rem;
margin: 15px auto;
text-align: center;
}

.mundo {
width: 600px;
height: 2300;
position: absolute;
left: 20%;
border-radius: 10%;
}

section .principal-div p {
font-size: 1.7rem;
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
color:grey;
position: absolute;
top: 65%;
}````

``<code>

Este es mi sencillo layout 😄

<!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>Desafío</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <figure>Logo</figure>
        <nav>
            <ul>
                <li>Home</li>
                <li>Cursos</li>
                <li>Instructores</li>
                <li>Blog</li>
            </ul>
        </nav>
    </header>
    <main>
        <aside>
            <div>Box1</div>
            <div>Box2</div>
            <div>Box3</div>
            <div>Box4</div>
        </aside>
        <section>Ingresar contenido...</section>
    </main>
    <footer>
        <div class="footer-social">
            Redes sociales
        </div>
        <div class="footer-info">
            Información
        </div>
    </footer>
</body>
</html>
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

html{
    font-size: 62.5%;
}

body{
    font-size: 1.6rem;
}

li{
    color: white;
    font-size: 2rem;
    list-style: none;
    display: inline-block;
    margin: 1.5rem;
}

header{
    height: 10vh;
    background-color:steelblue;
}

figure, nav{
    display: inline-block;
}

figure{
    margin: 1.5rem;
    font-size: 2rem;
}

nav{
    position: absolute;
    right: 1.5rem;
}

main{
    height: 80vh;
}

footer{
    height: 10vh;
    background-color: teal;
}

aside, section{
    display: inline-block;
    height: 80vh;
}

aside{
    width: 20vw;
    background-color: turquoise;
}

aside div{
    color: white;
    font-size: 2rem;
    height: 15vh;
    margin: 3vh;
    background-color:darkslateblue;
}

section{
    color: white;
    font-size: 2rem;
    position: absolute;
    left: 20vw;
    width: 80vw;
    padding: 1rem;
    background-color: cornflowerblue;
}

.footer-social, .footer-info{
    color: white;
    font-size: 2rem;
    display: inline-block;
    margin: 1.5rem;
}

.footer-info{
    position: absolute;
    right: 1.5rem;
}

Finalicé el reto, está feo, pero mi reto personal fue que lo realicé TODO con medidas relativas, ningún px. Prometo dejarlo más lindo, en otro momento…
Los reto a ustedes a que hagan el reto de esta forma!

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto Layout Cursos</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="page--header">
        <h1 id="page--title" class="title">Empresa</h1>
        <nav>
            <ul id="main--nav" class="nav">
                <li><a href="">Home</a></li>
                <li><a href="">Cursos</a></li>
                <li><a href="">Instructores</a></li>
                <li><a href="">Blog</a></li>
            </ul>
        </nav>
    </header>

    <main class="page--main">
        <section class="page--main--sidebar">
            <div class="main--sidebar__block" id="block--1"></div>
            <div class="main--sidebar__block" id="block--2"></div>
            <div class="main--sidebar__block" id="block--3"></div>
            <div class="main--sidebar__block" id="block--4"></div>
        </section>
        
        <section class="page--main--content">
            <p>soy un texto</p>


        </section>
    </main>

    <footer class="page--footer">


        <p>soy un footer texto</p>


    </footer>
    
</body>
</html>  ```



<code>


CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.page--header {
      background-color: grey;
      height: 10vh;
}

.title {
    display: inline-block;
}

.page--header nav {
    display: inline-block;
    margin-left: 80%;
    position: relative;
    bottom: 40%;
}

.nav li {
    display: inline-block;

}

.page--main {
    height: 80vh;

}

.page--main--sidebar {
    width: 30vw;
    height: 80vh;
    background-color: blue;

}

.main--sidebar__block {
    width: 40%;
    height: 10%;
    padding: 5%;
    position: relative;
    position: relative;
    margin: 0 auto;
    margin-top: 10vh;
    background-color: blueviolet;

} 

.page--main--content {
    width: 80vw;
    height: 80vh;
    position: relative;
    bottom: 80vh;
    left: 62vh;
    background-color: aqua;
}

.page--footer {
   height: 10vh;
   background-color: green;
}





Hola PlatziNautas;

Les adjunto mi desafío del Layout, quería aplicarlo a algo que podría presentarse en la vida cotidiana, algunas cosas no se ven tan pulidas pero logre aplicar mis conocimientos:


Estaré esperando sus comentario y observaciones.

Saludos!

Aqui esta mi 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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <figure class="figure">
            <img src="./img/1280px-International_Pokémon_logo.svg.png" alt="logo" class="logo">
        </figure>
        <nav class="navbar">
            <ul>
                <li>
                    <a href="/">Pokedex</a>
                </li>
                <li>
                    <a href="/">Map</a>
                </li>
                <li>
                    <a href="/">Help</a>
                </li>
                <li>
                    <a href="/">Logout</a>
                </li>
            </ul>
        </nav>
    </header>
    <aside class="aside">
        <div class="pokemon">
            <figure>
                <img src="./img/bulbasaur.png" alt="pokemon_1">
            </figure>
            <div class="pokemon-name">
                <p>Bulbasaur</p>
                <p>Lv12</p>
            </div>
            <div class="pokemon-hp">
                <p>HP</p>
                <div class="hp-bar"></div>
                <p>50/50</p>
            </div>
        </div>
        <div class="pokemon">
            <figure>
                <img src="./img/charizard.png" alt="pokemon_2">
            </figure>
            <div class="pokemon-name">
                <p>Charizard</p>
                <p>Lv40</p>
            </div>
            <div class="pokemon-hp">
                <p>HP</p>
                <div class="hp-bar"></div>
                <p>135/135</p>
            </div>
        </div>
        <div class="pokemon">
            <figure>
                <img src="./img/butterfly.png" alt="pokemon_3">
            </figure>
            <div class="pokemon-name">
                <p>Butterfly</p>
                <p>Lv25</p>
            </div>
            <div class="pokemon-hp">
                <p>HP</p>
                <div class="hp-bar"></div>
                <p>67/67</p>
            </div>
        </div>
        <div class="pokemon">
            <figure>
                <img src="./img/pidgeot.png" alt="pokemon_4">
            </figure>
            <div class="pokemon-name">
                <p>Pidgeot</p>
                <p>Lv32</p>
            </div>
            <div class="pokemon-hp">
                <p>HP</p>
                <div class="hp-bar"></div>
                <p>96/96</p>
            </div>
        </div>
        <div class="pokemon">
            <figure>
                <img src="./img/pikachu.png" alt="pokemon_5">
            </figure>
            <div class="pokemon-name">
                <p>Pikachu</p>
                <p>Lv42</p>
            </div>
            <div class="pokemon-hp">
                <p>HP</p>
                <div class="hp-bar"></div>
                <p>89/89</p>
            </div>
        </div>
        <div class="pokemon">
            <figure>
                <img src="./img/squirtle.png" alt="pokemon_6">
            </figure>
            <div class="pokemon-name">
                <p>Squirtle</p>
                <p>Lv10</p>
            </div>
            <div class="pokemon-hp">
                <p>HP</p>
                <div class="hp-bar"></div>
                <p>42/42</p>
            </div>
        </div>
    </aside>
    <main class="main">
        <section>
            <figure>
                <img src="./img/Battle.png" alt="battle">
            </figure>
        </section>
    </main>
    <footer class="footer">
        <a href="https://github.com/MarianoConte" target="_blank">CODED BY: MARIANO CONTE</a>
    </footer>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --red: #FB1B1B;
    --black: #000000;
    --grey: #DFDFDF;
    --white: #FFFFFF;
}

@font-face{
    font-family: "Pokemon";
    src: url("./PKMN\ RBYGSC.ttf")
}

html{
    font-family: "Pokemon";
    font-size: 62.5%;
}

body{
    width: 100%;
    height: 100vh;
}

header{
    background-color: var(--red);
    height: 9vh;
    border-bottom: 1px solid var(--black);
}

header img{
    margin-top: 8px;
    margin-left: 16px;
    width: 16rem;
    height: auto;
}

.navbar{
    display: inline-block;
    list-style: none;
    position: absolute;
    right: 3.2rem;
    top: 0;
}

.navbar li{
    display: inline-block;
    padding: 2.8rem;
}

.navbar ul li a {
    color: #000000;
    font-size: 1.6rem;
    text-decoration: none;
}

.navbar ul li a:hover{
    color: #FFFFFF;
} 

.aside{
    width: 20%;
    display: inline-block;
    height: 85vh;
    background-color: #206960;
}

.pokemon{
    background: rgb(54,147,217);
    background: linear-gradient(180deg, rgba(54,147,217,1) 0%, rgba(124,194,225,1) 90%);width: 90%;
    border: 1px solid black;
    border-radius: 10px;
    margin: 16px auto;
    padding: 8px 8px 0px 8px;
    min-height: 8rem;
}

.pokemon:hover{
    cursor: pointer;
    border: 1px solid #FFCC00;
}

.pokemon figure{
    display: inline-block;
    margin-top: 8px;
    margin-left: 8px;
    width: 20%;
}

.pokemon img{
    min-height: 64px;
}

.pokemon .pokemon-name{
    color: white;
    position: absolute;
    margin-top: 12px;
    margin-left: 24px;
    font-size: 1.2rem;
    text-shadow: 1px 1px 1px #2A2A2A;
    display: inline-block;
}

.pokemon .pokemon-name p:first-child{
    text-transform: uppercase;
    font-weight: bold;
}

.pokemon .pokemon-name p:last-child{
    margin-top: 4px;
}

.pokemon .pokemon-hp{
    display: inline;
    margin-left: 24px;
    position: relative;
    top: -12px;
}

.pokemon .pokemon-hp p:first-child{
    color: #FFCC00;
    display: inline-block;
    text-shadow: 1px 1px 1px #2A2A2A;
    font-size: 1.2rem;
}

.pokemon .pokemon-hp .hp-bar{
    width: 50%;
    height: 1.2rem;
    background-color: #68e692;
    display: inline-block;
    border-radius: 10px;
    border: 1px solid white;
    margin-left: 8px;
    box-shadow: 1px 1px 1px #2A2A2A;
}

.pokemon .pokemon-hp p:last-child{
    color: white;
    font-size: 1.2rem;
    text-shadow: 1px 1px 1px #2A2A2A;
    text-align: right;
    margin-right: 16px;
    margin-bottom: 8px;
}

.main{
    background-color: #000000;
    display: inline-block;
    position: absolute;
    width: 80%;
    height: 85vh;
}

.main img{
    display: block;
    margin: auto;
    height: 85vh;
}

.footer{
    width: 100%;
    height: 6vh;
    font-size: 1.6rem;
    text-align: center;
    padding-top: 16px;
    background-color: #FB1B1B;
}

.footer a{
    color: white;
    text-decoration: none;
}

.footer a:hover{
    color: black
}

Aqui el reto!
.

.
CÓDIGO
.
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">
    <link rel="stylesheet" href="./css/layout-challenge.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected];500;900&display=swap" rel="stylesheet">
    <title>Layout-challenge</title>
</head>
<body>
    <header class="header">
        <nav>
            <h2>Sergio's-Tech-Garage...</h2>
            <ul class="nav-list">
                <li class="nav-element"><a href="#">Home</a></li>
                <li class="nav-element"><a href="#">Software</a></li>
                <li class="nav-element"><a href="#">Cloud</a></li>
                <li class="nav-element"><a href="#">Drones</a></li>
            </ul>
        </nav>
    </header>
    <main class="main">
        <aside class="aside">
            <h2 class="inventions-title">Our latest inventions</h2>
            <ul class="inventions">
                <li class="inventions-item first-item">
                    <img src="./css/nano-coating.png" alt="nano-coating" class="inventions-img">
                    <a href="#">Bio-nanotech</a> 
                </li>
                <li class="inventions-item second-item">
                    <img src="./css/wire.png" alt="wire" class="inventions-img">
                    <a href="#">Miofibrillar wire</p> 
                </li>
                <li class="inventions-item third-item"> 
                    <img src="./css/brain.png" alt="analysis" class="inventions-img" id="brain-img">
                    <a href="#">Advanced A.I analysis</a> 
                </li>
                <li class="inventions-item fourth-item"> 
                    <img src="./css/cpu.png" alt="cpu" class="inventions-img">
                    <a href="#">Ultra-resistant hardware</a> 
                </li>
            </ul>
        </aside>
        <section class="section">
            <div class="division-1">
                <img src="./css/blockchain.png" alt="blockchain" class="block-img">
                <h1>Empower your decisions with A.I</h1>
            </div>
            <div class="division-2">
                    <img src="./css/drone.png" alt="drone" class="drone-img">
                    <div class="words">
                        <h3 class="words-title">Keep your eyes in the skies</h3>
                        <p>Our retinal-scan-like lens will keep track of every move from your targets</p>
                    </div>                                
            </div>
        </section>
    </main>
    <footer class="footer">
        <section>
            <p class="footer-text">Find us on</p>
            <ul class="footer-list">
                <li class="footer-item">
                    <img src="./css/gorjeo.png" alt="twitter" class="footer-img">
                </li>
                <li class="footer-item">
                    <img src="./css/telegrama.png" alt="telegram" class="footer-img">
                </li>
                <li class="footer-item">
                    <img src="./css/facebook.png" alt="facebook" class="footer-img">
                </li>
            </ul>
        </section>
    </footer>
</body>
</html>

.
CSS
.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    font-family: 'Roboto Slab', serif;;
}
.header {
    display: block;
    position: relative;
    height: 9vh;
    background: rgb(131,58,180);
    background: linear-gradient(327deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); 
}
.header nav h2 {
    position: absolute;
    left: 8%;
    top: 24%;
    font-size: large;
    color: #fff;
  text-shadow:
      0 0 5px #aaa,
      0 0 8px #aaa,
      0 0 19px #aaa,
      0 0 40px #fff,
      0 0 80px #fff,
      0 0 90px #fff,
      0 0 100px #fff,
      0 0 149px #fff;
}
.nav-list {
    display: inline-block;
    position: absolute;
    list-style: none;
    text-align: center;
    left: 68vw;
    width: 32vw;
}
.nav-element {
    display: inline-block;
    position: relative;
    margin-top: 2em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 4%;
    padding-right: 4%;
    font-weight: bold;
}
.nav-element a {
    text-decoration: none;
    color: #fff;
    text-shadow:
        0 0 5px #aaa,
        0 0 8px #aaa,
        0 0 19px #aaa,
        0 0 40px #fff,
        0 0 80px #fff,
        0 0 90px #fff,
        0 0 100px #fff,
        0 0 149px #fff;
}
.main {
    display: block;
    position: relative;
    height: 80vh;
    width: 100vw;
}
.aside {
    display: inline-block;
    position: absolute;
    width: 24%;
    height: 100%;
    background-color: #FFFFFF;
    background-image: -webkit-linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
    background-image: -moz-linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
    background-image: -o-linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
    background-image: linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
}
.inventions-title {
    position: absolute;
    left: 6%;
    color: #fff;
    text-shadow:
        0 0 5px #aaa,
        0 0 8px #aaa,
        0 0 19px #aaa,
        0 0 40px #fff,
        0 0 80px #fff,
        0 0 90px #fff,
        0 0 100px #fff,
        0 0 149px #fff;
}
.inventions {
    display: inline-block;
    position: absolute;
    height: 100%;
    width: 100%;
}
.inventions-item {
    list-style: none;
    position: relative;
    display: block;
    margin-top: 6%;
    padding-right: 6%;
    padding-left: 6%;
    height: 20%;
    width: 80%;
    border-radius: 5%;
    left: 6%;
    top: 2%;
}
.inventions-item a {
    display: inline-block;
    position: relative;
    top: 68%;

    text-align: center;
    text-decoration: none;
    color: #fff;
    text-shadow:
        0 0 5px #aaa,
        0 0 8px #aaa,
        0 0 19px #aaa,
        0 0 40px #fff,
        0 0 80px #fff,
        0 0 90px #fff,
        0 0 100px #fff,
        0 0 149px #fff;
    
}
.inventions .first-item {
    background-color: #8EC5FC;
    background-image: -webkit-linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
    background-image: -moz-linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
    background-image: -o-linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);       
}
.inventions-img {
    position: absolute;
    height: 12vh;
    width: 12vh;
    left: 60%;
    top: 12%;
}
#brain-img {
    position: absolute;
    height: 8em;
    width: 8em;
    display: inline-block;
    left: 10vw;
    top: -11vh;
  }
.inventions .second-item {
    background-color: #00DBDE;
    background-image: -webkit-linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
    background-image: -moz-linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
    background-image: -o-linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
    background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);    
}

.inventions .third-item {
    background-color: #FFE53B;
    background-image: -webkit-linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
    background-image: -moz-linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
    background-image: -o-linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
    background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
}

.inventions .fourth-item {
    background-color: #FF3CAC;
    background-image: -webkit-linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
    background-image: -moz-linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
    background-image: -o-linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
    background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);     
}

.section {
    display: inline-block;
    position: relative;
    height: 100%;
    width: 76%;
    left: 24%;
    background: #59C173;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #5D26C1, #a17fe0, #59C173);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #5D26C1, #a17fe0, #59C173); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
}
.block-img {
    position: absolute;
    top: 83%;
    bottom: 50%;
    height: 64vh;
    width: 64vh;
    left: 50%;
    top: 0%;
}
.division-1 {
    display: inline-block;
    position: relative;
    height: 50%;
    width: 100%;
}
.division-1 h1, .words {
    position: absolute;
    top: 85%;
    left: 32%;
    color: #fff;
    text-shadow:
        0 0 5px #aaa,
        0 0 8px #aaa,
        0 0 19px #aaa,
        0 0 40px #fff,
        0 0 80px #fff,
        0 0 90px #fff,
        0 0 100px #fff,
        0 0 149px #fff;
}
.drone-img {
    position: absolute;
    top: 83%;
    bottom: 50%;
    height: 44vh;
    width: 44vh;
    left: 20%;
    top: 46%;
}
 .words {
    text-align: end;
    position: absolute;
    left: 60%;
}
.words h3 {
    margin-bottom: 1em;
}
.footer {
    display: inline-block;
    position: relative;
    width: 100vw;
    height: 11vh;
    background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
}
.footer section {
    display: inline-block;
    position: relative;
    left: 50vw;
    top: 2vh;
    width: 50vw;
}
.footer-text {
    display: inline-block;
    position: relative;
    color: #fff;
    text-shadow:
        0 0 5px #aaa,
        0 0 8px #aaa,
        0 0 19px #aaa,
        0 0 40px #fff,
        0 0 80px #fff,
        0 0 90px #fff,
        0 0 100px #fff,
        0 0 149px #fff;
}
.footer-list {
    position: relative;
    display: inline-block;
    list-style: none;
    left: 12%;
    right: 0vw;
}
.footer-item {
    display: inline-block;
    position: relative;
    margin: 8% 0;
    padding-left: 1em;
    padding-right: 0em;
    color: #fff;
    text-shadow:
        0 0 5px #aaa,
        0 0 8px #aaa,
        0 0 19px #aaa,
        0 0 40px #fff,
        0 0 80px #fff,
        0 0 90px #fff,
        0 0 100px #fff,
        0 0 149px #fff;
}
.footer-img {
    position: relative;
    top: 100%;
    bottom: 100%;
    height: 4vh;
    width: 4vh;
    left: 0;
    top: 0;
} 

Qué opinan? xd hice mi mejor esfuerzo

Muy sencillo, pero es trabajo honesto 😄

Fue un gran desafío. Y este es mi resultado!

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>Layout</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header>
      <figure>Logo</figure>
      <nav>
        <ul>
          <li>Home</li>
          <li>Cursos</li>
          <li>Instructores</li>
          <li>Blog</li>
        </ul>
      </nav>
    </header>
    <main>
      <aside>
       <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
       </ul>
      </aside>
      <section class="texto">
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia
          aperiam dicta, obcaecati facere praesentium, temporibus dolorum porro
          itaque labore perferendis fugit quidem modi magni nesciunt, quo
          voluptatibus id alias fugiat?
        </p>
      </section>
    </main>
    <footer>
      <p>About us</p>
    </footer>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
  height: 12vh;
  width: 100%;
  background-color: pink;
  display: inline-block;
}
figure {
  background-color: pink;
  width: 50px;
  height: 50px;
  display: inline-block;
}
header nav {
  display: inline-block;
}
header ul {
  margin-top: 15px;
  margin-left: 900px;
  width: 300px;
}
header ul li {
  display: inline;
  list-style: none;
  margin-left: 5px;
}
main {
  height: 80vh;
  width: 100%;
  background-color: aquamarine;
  display: inline-block;
}
aside {
  width: 20%;
  height: 100%;
  background-color: coral;
  display: inline-block;
}
main aside ul {
  width: 100%;
  height: 100%;
}
main aside ul li {
  width: 250px;
  height: 100px;
  margin: 10px;
  background-color: brown;
}
.texto {
  width: 80%;
  height: 80%;
  background-color: yellow;
  display: inline-block;
  position: absolute;
}
footer {
  height: 8vh;
  background-color: darkgoldenrod;
  width: 100%;
  display: inline-block;
}

Y así quedo mi resultado del desafió

![](

index.html

    <header>
        <nav>
            <div>
                <img src="img/marvel.png" alt="">
            </div>
            <ul>
                <li>Fandom</li>
                <li>Juegos</li>
                <li>Peliculas</li>
                <li>Series</li>
            </ul>
        </nav>
        <main>
            <aside class="saga">
                <section>
                    <figure>
                        <img src="img/fase1.png" alt="">
                        <figcaption>Fase 1</figcaption>
                    </figure>
                </section>
                <section>
                    <figure>
                        <img src="img/fase2.png" alt="">
                        <figcaption>Fase 2</figcaption>
                    </figure>
                </section>
                <section>
                    <figure>
                        <img src="img/fase3.png" alt="">
                        <figcaption>Fase 2</figcaption>
                    </figure>
                </section>
                <section>
                    <figure>
                        <img src="img/fase4.jpg" alt="">
                        <figcaption>Fase 2</figcaption>
                    </figure>
                </section>
            </aside>
            <section class="information">
                <span class="title"> orden cronologico </span>
                
                <figure>
                    <img src="img/cronologia.jpg" alt="">
                    <figcaption>Cronologia</figcaption>
                </figure>
            </section>
        </main>
        <footer>
            By: Darynka Tapia
        </footer>
    </header>

styles.css

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;  
    
    background: black;
    color: white;
}
.body{
    width: 100vh;
}

nav{
    padding: 20px;
    width: 100%;
    height: 10vh;
}
nav div{
    display: inline-block;
    margin: revert;
}
nav div img{
    width: 100px;
    height: 10;
}

nav ul{ 
    display: inline-block;
    text-align: end;
    float: right;
    margin: revert
}
nav ul li{
    display: inline-block;
    list-style:none;
    font-weight: 800;
    font-size: 20px;
    margin-left: 10px;
}

nav ul li:hover{
    border-bottom: 2px solid;
    cursor: pointer;
}

main{
    display: inline-block;
    width: 100%;
}
main > aside{
    display: inline-block;
    padding: 20px;
    width: 20%;
    height: 80vh;
}
main > section{
    display: inline-block;
    padding: 20px;
    /* background:blueviolet;
    border: 2px solid rgba(255, 0, 0, .2); */
    width: 79%;
    height: 80vh;
    float: right;
}

.saga section{
    height: calc(78vh / 4  - 16px);
    border: 4px solid rgba(255, 0, 0, .2);
    border-radius: 20px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.saga section img{
    width: 100px;
}  
figcaption{
    text-align: center;
} 

.information {
    text-align: center;
}
.title{
    text-transform: uppercase;
    font-weight: 600;
    font-size: 20px;
}

.information img{
    width: 75%;
    height: 70vh;
    object-fit: contain;
}


footer{
    height: 10vh;  
    padding: 40px;
    font-weight: 600;
    text-align: end;
}

Hola, Mi aporte.

Ejercicio completado (casi que no )

Me tardé como 3 días, pero ha valido cada instante.
Link directo a la página

Aplicando lo que aprendi hasta el momento en el curso 😉

Se hizo lo que se pudo.
Se hizo sin flex ni grid.
Ahora se la importancia de esos 2.

Les comparto mi proyecto


HTML

CSS

Ahí vamos 😉

Hola, comparto mi desafío.

MI APORTE

Reto cumplido sin utilizar display flex y grid

Mi desafío terminado
do

Desafio Listo

No sé si sea el caso de ustedes, pero a mi sí se me complicó un poco jaja

Este es mi resultado…estuve 1 hora ahí luchando con el CSS xd.
Si alguien principiante (como yo) ve esto mi único consejo es que no pares de intentar y evaluar todas las posibilidades para arreglar el problema.

Interesante reto, me vi tentado a usar flex box pero pude hacer usando solo inline-block y position.

Profe le comparto mi tarea, invitándolos a visitar mi website sobre psicoterapia. Gracias a todos por sus aporte, sugerencias, aprendo mucho!!

Desafío completado 💪😁

El curso es muy bueno y el profe explica bastante bien, aunque creo que es un poco complicado.
alguien sabe por que me quueda ese espacio a la derecha en el main?

![](

por ultimo hice este:

<!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">
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&family=Raleway:[email protected];400;600;700;800&display=swap" rel="stylesheet">
    <title>Otro mio</title>
</head>
<body class="body">

    <div class="shadow">
    
        <header class="header">

            <div class="container">
                <div class="barra">
                    
                    <a class="brand">
                        Veridis Quo
                    </a>
            
                    <nav class="nav">
                        <a href="" class="nav__link">Home</a>
                        <a href="" class="nav__link">Store</a>
                        <a href="" class="nav__link">About Us</a>
                        <a href="" class="nav__link">Contact</a>
                    </nav>
                    
                </div>
            </div>
        </header>

        <div class="principal-container">
            <div class="view">

                <main class="main">
                    <h1 class="title">Sapere Aude</h1>
                    <p class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    <p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium suscipit expedita consequuntur? Ad, totam, assumenda adipisci nostrum rerum obcaecati numquam hic, animi saepe ratione commodi quisquam molestias deleniti ipsa blanditiis.
                    Aperiam iure aspernatur repellendus non, vel laborum reprehenderit optio deserunt, quod facilis quisquam qui, odit odio ex fuga inventore nam veritatis molestiae iusto! Nisi non cum voluptatem error, illo maxime.</p>

                </main>

                <aside class="aside">
                    <ul class="list">
                        <a href="" class="list-element">
                            <img src="./img/1.jpg" alt="imagen1" class="img__list">
                        </a>
                        <a href="" class="list-element">
                            <img src="./img/2.jpg" alt="imagen2" class="img__list">
                        </a>
                        <a href="" class="list-element">
                            <img src="./img/3.jpg" alt="imegen3" class="img__list">
                        </a>
                    </ul>
                </aside>
            </div>
        </div>

     

        <footer class="footer">
            <div class="container__footer">
                <div class="barra__footer">
                    <p class="brand__footer">VERIDIS QUO</p>
                    <nav class="nav">
                        <a href="" class="nav__link">Home</a>
                        <a href="" class="nav__link">Store</a>
                        <a href="" class="nav__link">About Us</a>
                        <a href="" class="nav__link">Contact</a>
                    </nav>
                </div>
            </div>
        </footer>

    </div>
    
</body>
</html>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    font-family: 'Raleway', sans-serif;
}

body{
    background: url(../otro_mio/1.jpg);
}

.body {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: auto;
}

.shadow{
    background-color: rgba(0, 0, 0, .1);
    /* position: absolute; */
    width: 100%;
    height: auto;
}


.header{
    height:  8rem;
    margin-bottom: 0 auto;
}

.container{
    width: min(95%);
    height: 100%;
    margin: 0 auto;
}

.barra{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    
}

.brand{
    /* -webkit-text-stroke: .05rem darkgray; */
    font-size: 4.5rem;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
}

.nav{
    display: flex;
    gap: 4rem;
}

a{
    color: white;
    text-decoration: none;
    font-size: medium;
}

.principal-container{
    width: 100%;
    height: 75%;
}

.view{
    display: grid;
    grid-template-columns: 3fr 1fr;
}

.main{
    padding: 5rem;
    color: white;
}

.title{
    font-size: 4rem;
    font-weight: 400;
}

.text{
    margin-top: 2rem;
    font-size: 1.6rem;
}

.aside{
    padding: 4rem 4rem 1rem 2rem;
    
}
.list{
    display: flex;
    text-align: center;
    align-items: center;
    flex-direction: column;
}

.list-element{
    margin-top: 1.5rem;
    width: 20rem;
    height: 13rem;
}

.list-element img{
    width: auto;
    height: 100%;
    border-radius: 5%;
    opacity: .9;
}

.footer{
    /* que este el footer pegadito a la parte inferio */
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 7rem;
    background-color:dimgray;
    opacity: .95;
    

    
}

.container__footer{
    width: min(95%);
    padding-top: 2rem;
    padding-left: 3rem;
    
}

.brand__footer{
        font-size: 2rem;
        font-weight: bold;
        text-transform: uppercase;
        color: white;
        align-items: center;

}

.barra__footer{
    display: flex;
    justify-content: space-between;
    align-items: center; 
}

Buenos chicos estoy muy motivado, tengo muchas cosas que dominar y aprender, ejemplo no puedo centrar elementos en bloque con respecto su contenido, ejemplo el aside que hice.

****HTML 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”>
<link rel=“preconnect” href=“https://fonts.googleapis.com”>
<link rel=“preconnect” href=“https://fonts.gstatic.com” crossorigin>
<link href=“https://fonts.googleapis.com/css2?family=Koulen&family=Quicksand:[email protected];500;700&display=swap” rel=“stylesheet”>
<title>Layout</title>
<link rel=“stylesheet” href="./style.css">
</head>
<body>
<header>
<nav>
<div class=“contenido-logo”>
<img src="./Octava vacia.png" alt=“octava” class=“logo”>
<p>AMA</p>
</div>

        <div class="menu">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/">Cursos</a></li>
                <li><a href="/">Maestros</a></li>
                <li><a href="/">Contacto</a></li>
                <li><a href="/">Sobre Nosotros</a></li>
            </ul>
        </div>
    </nav>
</header>

<main>
    <aside class="barra-lateral">
        <div class="caja-instrumento"> 
            <figure>
                <img src="./Piano.jpg" alt="piano" class="piano">
                <p>Piano</p>
            </figure>
        </div>

        <div class="caja-instrumento"><figure>
            <img src="./guitara.jpg" alt="guitarra" class="guitarra">
            <p>Guitarra</p>
        </figure>
    </div>

        <div class="caja-instrumento"><figure>
                <img src="./bajo.jpg" alt="bajo" class="bajo">
                <p>Bajo</p>
            </figure>
        </div>

        <div class="caja-instrumento"><figure>
                <img src="./bateria.jpg" alt="bateria" class="bateria">
                <p>Bateria</p>
            </figure>
        </div>
    </aside>
    <section class="info-principal">
      <figure class="container-foto">
          <img src="./Foto.jpg" alt="foto" class="foto">
      </figure>
        <ul>
            <li>Profesor de piano</li>
            <li><a href="/">Contacto</a></li>
        </ul>
        
    </section>
</main>

<footer>
    <div class="pie">
        <p>Todos los derechos reservador 2022</p>
    </div>
</footer>

</body>
</html>

*******codigo CSS

  • {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }

/* body {
background-color: blanchedalmond;
} */

nav {
display: flex;
justify-content: space-between;
border-bottom: 1px solid black;
}

.logo {
width: 100px;
margin-left: 16px;
margin-top: 5px;

}

.contenido-logo p {
display: inline-block;
font-family: ‘Koulen’, cursive;
font-family: ‘Quicksand’, sans-serif;
}

.menu {
padding-top: 5px;
padding-right: 25px;
}

.menu ul {
list-style: none;
display: flex;
}

.menu ul li {
padding: 10px;
font-family: ‘Koulen’, cursive;
font-family: ‘Quicksand’, sans-serif;
font-weight: bold;
list-style: none;
}

.menu ul li a {
text-decoration: none;
color: black;
}

.menu ul li a:hover {
color: chocolate;
background-color: aliceblue;
border-radius: 2px;
}

main {
display: flex;
height: calc(100vh - 46px);
justify-content: center;

}

.barra-lateral {
width: 20%;
height: 100%;
background-color:#DAF7A6 ;

}

.caja-instrumento {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 25px;
text-align: center;
}

.caja-instrumento p {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.piano {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}

.guitarra {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}

.bajo {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}

.bateria {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
.info-principal {
width: 80%;
height: 100%;
text-align: center;
}
.container-foto {
margin-top: 100px;
}

.foto {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
}

.info-principal ul {
list-style: none;
}

.info-principal ul li{
font-family:‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}

.info-principal ul a {
text-decoration: none;
color:chocolate;
}

footer {
width: 100%;
height: 50px;
background-color: black;
position:fixed;
bottom: 0;
}

.pie {
color: white;
text-align: center;
padding-top: 15px;
}

Me costo demasiado, me estrese como nunca, pero lo termine y creo que quedo bastante bien para lo poco que se de programacion.

Reto Cumplido

Listo

¡Esto sí que fue retador! 🥴😪 pero creo que lo logré (?)

Aca dejo mi resultado

<!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>Layout</title>
    <link rel="stylesheet" href="style.css">
</head>

<body class="body">
    <header class="header">
        <figure class="header__logo">Logo</figure>
        <nav class="header__navbar">
            <ul class="header__navbar--list">
                <li>Home</li>
                <li>Cursos</li>
                <li>Instructores</li>
                <li>Blog</li>
            </ul>
        </nav>
    </header>
    <main class="main">
        <nav class="main__navbar">
            <ul class="main__navbar--list">
                <li>Cuadro 1</li>
                <li>Cuadro 2</li>
                <li>Cuadro 3</li>
                <li>Cuadro 4</li>
            </ul>
        </nav>
        <section class="main__content">Principal</section>
    </main>
    <footer class="footer">
        Footer
    </footer>

</body>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.body {
  font-family: Verdana, Tahoma, sans-serif;
  font-weight: bold;

  background-color: #56bbf1;
}
.header {
  display: flex;
  flex-direction: row;

  width: 100vw;
  height: 10vh;

  align-items: center;
  justify-content: center;
}
.header__logo {
  display: flex;

  width: 15vw;
  height: inherit;

  color: white;
  background-color: #f0a500;

  align-items: center;
  justify-content: center;
}
.header__navbar {
  display: flex;

  width: 85vw;
  height: inherit;

  background-color: #890f0d;

  align-items: center;
  justify-content: flex-end;
}

.header__navbar--list {
  display: flex;
  flex-direction: row;

  list-style: none;

  color: white;

  justify-content: flex-end;
}
.header__navbar--list li {
  margin: 0 10px;
}

.main {
  display: flex;
  flex-direction: row;

  width: 100vw;
  height: 80vh;
}

.main__navbar {
  display: flex;
  flex-direction: column;

  width: 15vw;

  background-color: #f14a16;

  align-items: center;
  justify-content: center;
}

.main__navbar--list {
  display: flex;
  flex-direction: column;

  height: inherit;

  list-style: none;

  justify-content: space-between;
}

.main__navbar--list li {
  display: flex;

  width: 10vw;
  height: 17vh;
  margin: 5px 0;

  color: white;
  border-style: solid;
  border-color: #1c6dd0;
  border-radius: 10px;
  background-color: #139487;

  align-items: center;
  justify-content: center;
}

.main__content {
  display: flex;

  width: 85vw;

  color: white;
  background-color: #121212;

  align-items: center;
  justify-content: center;
}

.footer {
  display: flex;

  height: 10vh;

  color: white;
  background-color: #1a5f7a;

  align-items: center;
  justify-content: center;
}

Dejo mi aporte, trate de simular una pagina E-Commerce del producto estrella de Colombia, el CAFE, es posible que se pueda de hacer de mejor forma, si tienen sugerencias bienvenidas son.

CODE 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">
    <link rel="stylesheet" href="./desafio.css">
    <title>Expo-Deafio</title>
</head>

<body>
    <header>
        <div class="header-content">
            <figure class="header-logo-coffi">
                <a href="./desafio.html"><img class="incon"
                        src="https://st3.depositphotos.com/3246763/14277/v/600/depositphotos_142778305-stock-illustration-coffee-logo-made-from-the.jpg"
                        alt="Logo-Cafe"></a>
            </figure>
            <nav class="menu">
                <ul>
                    <li> <a href="">Home</a></li>
                    <li> <a href="">Cafe</a></li>
                    <li> <a href="">Premium</a></li>
                    <li> <a href="">Regiones</a></li>
                    <li> <a href="">Blog</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <section>
            <div class="main-contentrigth">
                <div class="main-contentrigth-div">
                    <figure>
                        <h3>Café expréss</h3>
                        <img class="imgcontent" src="https://www.cafealpaladar.com/wp-content/uploads/2020/07/CafeExpresso.webp" alt="Café expréss">
                    </figure>
                </div>
                <div class="main-contentrigth-div">
                    <figure>
                        <h3>Ristretto</h3>
                        <img class="imgcontent" src="https://www.cafealpaladar.com/wp-content/uploads/2020/07/Ristretto.jpg" alt="Ristretto">
                    </figure>
                </div>
                <div class="main-contentrigth-div">
                    <figure>
                        <h3>Carajillo</h3>
                        <img class="imgcontent" src="https://www.cafealpaladar.com/wp-content/uploads/2020/07/Carajillo.webp" alt="Carajillo">
                    </figure>
                </div>
             
                <div class="main-contentrigth-div">
                    <figure>
                        <h3>Café con leche</h3>
                        <img class="imgcontent" src="https://media.revistagq.com/photos/5e1747089883c90008feb7a7/4:3/w_2670,h_2003,c_limit/cafe-con-leche-de-almendras.jpg" alt="Café con leche">
                    </figure>
                </div>
             
            </div>
            <div class="main-contentleft">
                <ul class="main-contentleft-list">
                    <li>
                        <img class="imgprod"  src="https://www.midespertar.com/wp-content/uploads/2019/02/1-791x1024.jpg"
                            alt="">
                            <p>Cafe de Grano</p>
                    </li>
                    <li>
                        <img class="imgprod"  src=""
                            alt="">
                            <p>Cafe de Grano</p>
                    </li>
                    <li>
                        <img  class="imgprod"  src="https://m.media-amazon.com/images/I/81TQ7cDNyAS._SX385_.jpg"
                            alt="">
                            <p>Cafe de Grano</p>
                    </li>
                    <li>
                        <img class="imgprod"  src="https://i0.wp.com/www.cafelasmargaritas.com/wp-content/uploads/2020/04/cafe-lasmargaritas-bolsa.png?ssl=1"
                            alt="">
                            <p>Cafe de Grano</p>
                    </li>
                    <li>
                        <img class="imgprod"  src="https://www.midespertar.com/wp-content/uploads/2019/02/1-791x1024.jpg"
                            alt="">
                            <p>Cafe de Grano</p>
                    </li>
                    <li>
                        <img class="imgprod"  src="data:image/jpeg;base64,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"
                            alt="">
                            <p>Cafe de Grano</p>
                    </li>
                    <li>
                        <img  class="imgprod"  src="https://m.media-amazon.com/images/I/81TQ7cDNyAS._SX385_.jpg"
                            alt="">
                            <p>Cafe de Grano</p>
                    </li>
                    <li>
                        <img class="imgprod"  src="https://i0.wp.com/www.cafelasmargaritas.com/wp-content/uploads/2020/04/cafe-lasmargaritas-bolsa.png?ssl=1"
                            alt="">
                            <p>Cafe de Grano</p>
                    </li>
                </ul>
            </div>
            

        </section>
    </main>
    <footer>
        <div class="footer-content">
            <p>Contacto: 064-070707</p>
            <p>Politica de Privacidad</p>   
        </div>
    </footer>
</body>

</html>

CODE CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.header-content,.footer-content {
    box-shadow: 0 1px 8px rgba(128, 87, 33, 0.911);
}

footer{
    text-align: center;
}
h3 {
    text-align: center;
    color: #804000;
}

.header-logo-coffi,
.menu,
.header-logo-coffi {
    display: inline-block;
}

.incon{
    width: 125;
    height: 75px;
}

.imgcontent{
    width: 200px;
    height: 140px;
}

.imgprod{
    width: 200px;
    height: 220px;
    box-shadow: 0 1px 8px rgba(128, 87, 33, 0.911);
}

.menu {
    text-align: left;
    border-radius: 5px;
    margin-left: 40%;
}

li,
a {
    color: #804000;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-decoration: none;
}

li :hover {
    color: #fff;
    background-color: #804000;
    border-radius: 10px;
}

.menu li,
a {
    display: inline-block;
    list-style: none;
    margin: 2px 0px;
    padding-left: 10px;
    padding-right: 10px;
}

.main-contentrigth {
    box-shadow: 0 1px 8px rgba(128, 87, 33, 0.911);
    margin-top: 1%;
    display: inline-block;
    padding: 10px;
}

.main-contentrigth-div {
    border-radius: 5px;
    box-shadow: 0 1px 8px rgba(128, 87, 33, 0.911);
    padding: 10px;
    margin: 10px;
}

.main-contentleft {
    display: inline-block;
    text-align: center;
    position: absolute;
    padding: 4%;
}

.main-contentleft-list li {
    list-style: none;
    display: inline-block;
    padding-right: 20px;
    padding-left: 20px;  
}


me encanta empezar

Hola como estan, este es mi aporte!

Hola compañeros 😄
Comparto mi resolución del reto:

Mi aporte uwu:

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>BNHA JKanime</title>
    <link rel="stylesheet" href="probando.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">

</head>
<body>
    
    <header class="encabezado">
        <figure class="encabezado__logo">
            <img src="img/BKNHA/JK-logo.png" alt="logo de Jkanime">
        </figure>

        <nav class="encabezado__nav">
            <p>Inicio</p>
            <p>Nosotros</p>
            <p>Contactos</p>
        </nav>
    </header>

    <main>
        <aside class="personajes">
            <section class="personajes__title">
                <p>Personajes</p>
            </section>
            
            <section class="bloque1">
                <figure>
                    <img src="img/BKNHA/all-might.jpg" alt="all might">
                    <figcaption>All Might</figcaption>
                </figure>

                <figure>
                    <img src="img/BKNHA/midorya.jpg" alt="midorya">
                    <figcaption>Midorya</figcaption>
                </figure>
                
                <figure>
                    <img src="img/BKNHA/bakugo.jpg" alt="bakugo">
                    <figcaption>Bakugo</figcaption>
                </figure>
            </section>

            <section class="bloque2">
                <figure>
                    <img src="img/BKNHA/uraraka.jpg" alt="uraraka">
                    <figcaption>Uraraka</figcaption>
                </figure>
    
                <figure>
                    <img src="img/BKNHA/todoroki.jpg" alt="todoroki">
                    <figcaption>Todoroki</figcaption>
                </figure>
    
                <figure>
                    <img src="img/BKNHA/lida.jpg" alt="lida">
                    <figcaption>Lida</figcaption>
                </figure>
            </section>     
            

        </aside>

        <article class="article">

            <aside class="article__imagenes">
                <figure class="article__logo">
                    <img src="img/BKNHA/logo-BNHA.png" alt="Logo de Boku no Hero Academia">
                </figure>
    
                <figure class="article__img">
                    <img src="img/BKNHA/BKNH.png" alt="Boku no Hero Academia">
                </figure>
            </aside>
            
            <section class="article__text">
                <p>Las personas no nacen igual. El protagonista de esta historia es uno de esos casos raros que nacen sin superpoderes, pero esto no le impedirá perseguir su sueño: ser un gran héroe como el legendario All-Might. Para convertirse en el héroe que quiere ser, se apuntará a una de las academias de héroes más prestigiosas del país: Yueiko. Con la ayuda de su ídolo, All-Might, ¿podrá convertirse en un verdadero héroe?.</p>
            </section>

        </article>

    </main>

    <footer class="creditos">
        <p>Coded by Keneth Lopez with 💚</p>
    </footer>

</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face{
    font-family: commando;
    src: url('fonts/commando.ttf')
    format('truetype');
}

/*----------------------------------------------------------*/
/* BARRA DE NAVEGACIÓN */
.encabezado{
    display: flex;
    justify-content: space-between;
    margin: 10px 10px 0 10px;
    /* background-color: rgba(0, 73, 116, 0.534); */
    /* background-color: rgb(53,169,226); */
    /* background-color: #41B280; */
    background-color: rgb(65, 174, 179);
    /* flex-wrap: wrap; */
    /* align-items: stretch; */
    /* width: 95vw; */

}

body {
    min-height: 100vh;
}
.encabezado__logo{
    padding: 10px ;
    margin-left: 20px;
}

.encabezado__logo img{
    width: 130px;
    /* height: 20px; */

}

.encabezado__nav{
    display: flex;

}

.encabezado__nav p{
    padding: 17px;
    font-family: sans-serif;
    color: white;
    font-weight: bold;

    
}

main{
    display: flex;
}

/*----------------------------------------------------------*/
/* PERSONAJES */
.personajes{
    /* background-color: yellowgreen; */
    background-color: rgba(156, 9, 4, 0.753);
    border-radius: 2em;
    margin: 10px 0 10px 10px;
    padding: 10px 5px;
    /* padding-top: 30px; */
    display: flex;
    flex-direction: row;
    height: 82vh;
}

.bloque1, .bloque2{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.personajes__title{
    font-weight: bolder;
    position: absolute;
    font-size: 22px;
    width: 140px;
    top: 80px;
    left: 70px;
    font-family: commando;
    color: white;
    background-color: red;
    display: inline-block;
    padding: 5px;
    letter-spacing: 2px;
}

.personajes img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 10px 10px 0 10px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.418);
}


.personajes figcaption{
    text-align: center;
    font-family: sans-serif;
    font-style: oblique;
    font-weight: bold;
    color: white;

}


/*----------------------------------------------------------*/
/* ARTICULO */
.article{
    margin: 10px;
    background-color: #fcc300;
    width: 90vw;
    border-radius: 1em;
    height: 82vh;
    
}


.article__imagenes{
    display: flex;
    margin: 20px 60px 0 60px;
    justify-content: space-evenly ;
}

.article__logo{
    display: flex; align-items: center;
}

.article__logo img{
    width: 370px;
}

.article__img img{
    width: 250px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.418);

}

.article__text{
    text-align: justify;
    margin: 20px 60px 20px 60px;
    font-style: oblique;
    font-size: 18px;
    font-family: sans-serif;
    color: white;
    font-weight: 500;
}

.creditos{
    font-family: sans-serif;
    background-color: #41B37F;
    color: white;
    margin: 0 10px 0px 10px;
    text-align: center;
}

Hacer ejercicios a medida que se avanza es muy util para interiorizar conceptos 😁😎

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LAYAUT</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body class="body">
    <header class="header">
        <figure class="figura">
            <img class="logo" src="./pics/logo.png">
        </figure>
        <h1>BERKSHIRE HATAWAY</h1>
        <nav class="nav">
            <ul class="nav_list">
                <li>Home</li>
                <li>Cursos</li>
                <li>Instructores</li>
                <li>Clases</li>
            </ul>
        </nav>
    </header>
    <main class="main">
        <aside class="aside">
            <ul>
                <li>plus</li>
                <li>plus</li>
                <li>plus</li>
                <li>plus</li>
            </ul>
        </aside>
        <section class="mid">
            <p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate officia, iusto earum voluptatum, esse consequatur quis debitis sapiente nulla natus, necessitatibus veritatis explicabo quaerat sit ab enim perferendis similique? Ipsum?
            A dolorem nam provident pariatur sequi eum tenetur quae explicabo vero consequatur dignissimos dicta animi atque at ipsam iste, esse necessitatibus reprehenderit minima saepe incidunt. Quaerat laudantium sunt blanditiis totam.
            Odit ea iste minima, laboriosam tenetur placeat magnam delectus, aperiam amet nobis ipsam. Molestias quidem maiores magni ex laudantium aut dolorem quod placeat rerum, repellat eos ratione voluptates omnis sequi?
            Nihil recusandae natus excepturi suscipit! Omnis exercitationem quisquam, dolore numquam, laudantium eaque sed, sapiente maxime ipsa tenetur nobis tempore fugiat atque earum sunt laboriosam natus accusamus a voluptate! Temporibus, quidem.
            Maxime assumenda repellendus dignissimos itaque ducimus dolor sint. Aliquid dolores esse, atque ea ab maiores eum eligendi optio. Ratione earum repellendus non sit praesentium, exercitationem neque delectus molestias voluptas! Modi?
            Nihil quas vel provident inventore nam vero reprehenderit at consequatur sit nisi, quasi, atque hic facere ullam iste incidunt? Molestias odit laboriosam ullam ducimus explicabo quasi tenetur voluptas, eos atque?
            Sapiente saepe, accusantium voluptas odit eos doloremque iure dicta, libero ipsam dolores iste iusto odio esse. Sed laudantium magni eum, obcaecati autem dolorem aliquid ipsa quas repudiandae impedit minima commodi!
            Magnam quis explicabo at reprehenderit porro, iusto inventore sed. Nihil exercitationem possimus ad aspernatur, corporis vero? Temporibus, sequi. Fugit accusamus animi iure dolorem, modi veritatis libero asperiores deserunt? Quaerat, itaque.</p>
        </section>
    </main>

    <footer class="footer">
        <p>Yo soy footer</p>
    </footer>
</body>
</html>```


*{
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
border-radius: 10px;
}
header{
background-color: rgb(50, 250, 0);
height: 12vh;
}

.nav{
position: absolute;
right: 0;
}
.nav li{
display: inline;
padding: 10px;
margin: 10px;
background-color: blueviolet;
}

.logo{
width: 9vw;
height: 12vh;
}
.figura, h1, .nav{
display: inline-block;
}

main{
background-color: olivedrab;
width: 100%;
}
h1{
background-color: blueviolet;
position: relative;
bottom: 50px;
margin-left: 20%;
padding: 15px;
}

footer{
background-color: orchid;
width: 100%;
height: 11vh;
text-align: center;
}

.mid {
position: absolute;
display: inline-block;
background-color: rgb(26, 126, 6);
color: black;
width: 75%;
}
.aside{
display: inline-block;
background-color: blueviolet;
width: 25%;
}

.aside li {
background-color: khaki;
margin: 50px;
color: black;
width: 18vw;
height: 13vh;
}```

Desafío Completado
Trate de hacer el mejor intento, no salió exactamente igual, pero quedo bastante parecido

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>Desafio</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header class="header">
        <figure class="header__logo">
        <img src="./imagenes/logo.png" alt="logo">
        </figure>
        <ul class="header__atajos">
            <li class="header__listaAtajos"><a href="#">Inicio</a></li>
            <li class="header__listaAtajos"><a href="#">Pollo</a></li>
            <li class="header__listaAtajos"><a href="#">Carne</a></li>
            <li class="header__listaAtajos"><a href="#">Pescado</a></li>
        </ul>
    </header>
    <aside class="aside">
        <h2 class="aside__title">Mejores Platos</h2>
        <figure>
            <a href="#"><img src="link-imagen" alt="pollo-al-vino"></a>
        </figure>
        <figure>
            <a href="#"><img src="link-imagen" alt="gulash de carne"></a>
        </figure>
        <figure>
            <a href="#"><img src="link-imagen" alt="Crema marinera con trozos de pescado y pan francés"></a>
        </figure>
        <figure>
            <a href="#"><img src="link-imagen" alt="Arroz con pollo"></a>
        </figure>
    </aside>
    <main class="main">
        <span class="main__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui temporibus minima laudantium veniam. Rerum ea soluta earum tempora inventore veritatis natus facilis alias aliquam impedit, veniam, perspiciatis sapiente neque laboriosam!
        Harum praesentium magnam impeam esse sit delectus porro itaque modi quia blanditiis molestias cum, maiores dolorum impedit quae dignissimos dolor veritatis a adipisci.
        Nesciunt tempora dolorem aliquam dolores culpa adipisci voluptatem, minima voluptatibus placeat temporibus est consequuntur eum! Dolorem eveniet iusto incidunt sit consequuntur doloremque vitae iste ex inventore, corporis, odit optio ducimus. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam soluta distinctio, dolores autem recusandae consequatur ex pariatur in deleniti ab nulla, molestiae voluptatibus iusto vitae non excepturi. Similique, deserunt! Illo!</span>
    </main>
    <footer class="footer">
        <span class="footer__texto">
            Redes Sociales ➡
        </span>
            <ul class="footer__redesSociales">
                <li class="footer__listaRedes"><a href="#"><img src="link-imagen" alt="facebook"></a></li>
                <li class="footer__listaRedes"><a href="#"><img src="link-imagen"></a></li>
                <li class="footer__listaRedes"><a href="#"><img src="link-imagen"></a></li>
            </ul>
    </footer>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

.header {
    background-color: antiquewhite;
}

.header__logo {
    display: inline-block;
    position: absolute;
}

.header__logo img{
    width: 5rem;
    height: 5rem;
    margin: 15px;    
}

.header__atajos {
    display: inline-block;
    list-style: none;
    position: relative;
    text-align: right;
    margin: 20px;
    position: relative;
    margin-left: 70%;
}

.header__listaAtajos {
    display: inline-block;
    font-size: 20px;
    margin: 10px 0;
    padding-left: 20px;
    padding-right: 20px;
}

.header__listaAtajos a{
    text-decoration: none;
    color: #F47721;
}

.header__listaAtajos a:hover {
    color: #d8691e;
}

.aside {
    background-color: #f4ecff;
    display: inline-block;
}

.aside figure {
    display: list-item;
    margin: 20px 0;
}

.aside img {
    width: 20rem;
    height: 11rem;
}

.aside__title {
    text-align: center;
    color: #b47eff;
    font-size: 20px;
}

.main {
    background-color: rgb(221, 251, 255);
    display: inline-block;
    position: absolute;
}

.main__text {
    font-size: 40px;
}

.footer{
    background-color: #e8ffdc;
    padding: 5px;
    padding-left: 20px;
}

.footer__texto{
    display: inline-block;;
    font-size: 16px;
    color: rgb(121, 113, 102);
}

.footer__redesSociales {
    display: inline-block;
    list-style: none;
    position: relative;
    text-align: right;
    margin: 20px;
    position: relative;
    margin-left: 70%;
}

.footer__redesSociales li{
    display: inline-block;
    margin: 0;
    padding-left: 18px;
    padding-right: 18px;
}

.footer__redesSociales img {
    display: inline-block;
    width: 20px;
}

Hola chicos miren el desarrollo de mi reto…
Con muchas expectativas.

Me costo, debo practicar un montón!!!

Les dejo mi aporte del desafío, la neta si me costo jaja… tuve que consultar los códigos de los compañeros y otras fuentes, pero pues al fin quedo, ya vamos puliendo esto :'v

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/*Selectores*/
html {
    font-size: 62.5%;
}
html, body { 
    height: 100%
}
aside{
    font-size: 1.5rem;
}
main { 
    height: calc(100% - 90px);
    font-size: 1.5rem;   
}
footer{
    background-color: #000;
    height: 50px;
    color: white;
    font-size: 1.5rem;
}

/*Clases*/
header{
    font-size: 1.5rem;
    height: 40px;
    background-color: rgb(15, 35, 36);
}
.logo{
    display: inline-block;
    color: azure;
}
.nav{
    
    color: rgb(224, 225, 226);
    display: inline-block;
    position: absolute;
    right: 0;
}
.nav li{
    display: inline-block;
    padding: 0px 10px 0px 10px;
}
.box-aside{
    display: inline-block;
    border-right: solid 5px rgb(15 35 36);
    height: 100%;
}
.box-aside__item{
    width: 250px;
    height: 120px;
    border: black solid 1px;
    border-radius: 2px;
    margin: 2rem;
}
.seccion{
    display: inline-block;
    padding: 10px;
    position: absolute;
}

Aca está mi aporte.
Disculpen los colores, aun no se conbinarlos.

Aquí mi resultado, bastante sencillo de todas maneras.

Por acá el 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>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <figure id="logo">Logo</figure>
        <nav>
            <ul>
                <li>Home</li>
                <li>Cursos</li>
                <li>Instructores</li>
                <li>Blog</li>
            </ul>
        </nav>
    </header>
    <main>
        <aside class="container-aside">
            <div class="boxes">1</div>
            <div class="boxes">2</div>
            <div class="boxes">3</div>
            <div class="boxes">4</div>
        </aside>
        <section class="area-principal">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum, repudiandae praesentium nesciunt iusto consectetur ipsum? Error totam deserunt minima architecto quos? Numquam, vel placeat maiores sed voluptates neque aut quisquam.</section>
    </main>
    <footer>
        <div class="inf">Informacion</div>
        <div class="social">Redes Sociales</div>
    </footer>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

header {
    background-color: cadetblue;
    height: 10vh;
    padding: 15px;
}

#logo {
    display: inline;
    color: white;
}

nav {
    display: inline;
}

ul {
    display: inline;
    position: relative;
    left: 80%;
}

li {
    list-style: none;
    display: inline;
    color: white;

}

main {
    height: 80vh;
}

.container-aside {
    background-color: aqua;
    width: 20vw;
    display: inline-block;
}

.boxes {
    width: 18vw;
    height: 120px;
    background-color: white;
    margin: 10px;
    text-align: center;
    display: inline-block;
    padding: 15px;
}

.area-principal {
    display: inline-block;
    background-color: navajowhite;
    width: 80vw;
    height: 80vh;
    position: absolute;
    left: 20vw;
    padding: 15px;
}

footer {
    background-color: olive;
    height: 10vh;
    padding: 15px;
    color: white;
}

.social {
    display: inline;
    position: relative;
    left: 85%;

}

.inf {
    display: inline;
}

Este reto me sacó canas como dicen en mi país.

El primer día sufrí mucho ya que no entendía completamente el position. Hasta que leí bastante documentación y ví varios tutoriales que pude sacar el reto exitosamente.

Gracias Platzi porque a pesar de que me costó bastante, estoy super contento porque pude lograrlo. Y siento que aprendí bastante en una sola clase

Tuve que guiarme un poco con los aportes porque no quería usar display flex ni nada de eso que no hubiéramos visto. Evidentemente el sitio no quedó responsive, pero al menos lo conseguí xD

Me costó la verdad

¡Hola! No se imaginan el trabajo que me costó… No es mucho, pero es trabajo honesto. No sé cómo ubicar las imágenes, siempre me quedan súper grandes y no las logro mover.
#EsMiPrimeraVez!

[](

<!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>Tarea Layput 1</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body class="body">
 <header class="header">
     <figure class="logo">
         <img src="https://platzi.com/home" alt="logo">
     </figure>
     <nav class="nav">
        <ul class="list-nav">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Cursos</a>
            </li>
            <li>
                <a href="#">Instructores</a>
            </li>
            <li>
                <a href="#">Blog</a>
            </li>
        </ul>
     </nav>    
 </header>
 <section class="cuerpo">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat numquam quo, beatae repellat porro dolorum earum nulla dolorem. Pariatur, quam culpa consequuntur consectetur quisquam perferendis ducimus in provident facere sapiente!
    </p>
 </section>
 <section class="side-content">
    <div class="cuadro-1">Cuadro 1</div>
    <div class="cuadro-2">Cuadro 2</div>
    <div class="cuadro-3">Cuadro 3</div>
    <div class="cuadro-4">Cuadro 4</div>
 </section>
</body>
<footer class="footer">
    <ul class="footer-list">
        <li>
            <a href="#">Contáctanos</a>
        </li>
        <li>
            <a href="#">Ubicación</a>
        </li>
        <li>
            <a href="#">Redes</a>
        </li>
        <li>
            <a href="#">Trabaja con nosotros</a>
        </li>
    </ul>
</footer>
</html>
*{
    box-sizing: border-box;
    margin: 0;
}

.logo{
    margin: 5px;
    display: inline-block;
}

.body{
    background-color: blanchedalmond;
}

.header{
    background-color: powderblue;
    text-align: right;
}
.nav{
    list-style: none;
    padding: 5px;
    text-align: center;
    display: inline-block;
}
.list-nav li{
    display: inline-block;
    padding: 10px;
    list-style: none;
    margin: 5px;
}
.cuerpo{
    background-color: purple;
    border-radius: 2px;
    padding: 15px;
    position: absolute;
    margin-left: 160px;
    font-size: 9px;
    height: 322px;
}
.cuadro-1{
    background-color: beige;
    border-radius: 2px;
    display: block;
    margin: 5px;
    height: 75px;
    width: 150px;
}
.cuadro-2{
    background-color: beige;
    border-radius: 2px;
    display: block;
    margin: 5px;
    height: 75px;
    width: 150px;
}
.cuadro-3{
    background-color: beige;
    border-radius: 2px;
    display: block;
    margin: 5px;
    height: 75px;
    width: 150px;
}
.cuadro-4{
    background-color: beige;
    border-radius: 2px;
    display: block;
    margin: 5px;
    height: 75px;
    width: 150px;
}
.footer{
    list-style: none;
    padding: 5px;
    text-align: center;
    font-size: 10px;
    background-color: powderblue;
}
.footer-list li{
    display: inline-block;
    padding: 10px;
    margin: 5px;
}```

Hola, este es el desafio que hice

Pues aquí esta mi entento jaja