Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es Full Stack?

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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripción 🔥

Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

3D
19H
9M
49S

Flexbox layouts

41/55
Recursos

Aportes 453

Preguntas 45

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Les recomiendo un sitio, donde se puede practicar las propiedades de Flex mediante un pequeño juego.

https://flexboxfroggy.com/#es

Saludos 😄

Mi Resumen 😄

Flex es un tipo de display que permite que el contenedor padre sea flexible a los cambios que puedan tener los elementos hijos en su alineación.

Una vez tengamos el elemento padre con display: flex tenemos otras propiedades que podremos usar para nuestro beneficio.

  • Flex-direction: Te permite elegir la alineación de los elementos hijos sea en vertical (column) u horizontal (row), esta alineación viene por defecto.
  • Justify-content: Esta propiedad nos permite alinear el contenido de forma horizontal
    • Valores:
      • Flex-start: Alinear items del flex desde el comienzo.
      • Flex-end: Alinear items desde el final.
      • Center: Alinear items en el centro del contenedor.
      • Space-between: Distribuir items uniformemente, el primer items al inicio, el último al final.
      • Space-around: Distribuir items uniformemente, estos tienen el mismo espacio a su alrededor.
      • Space-evenly: Distribuye uniformemente el espacio entre los items y su alrededor.
  • Align-items: Sirve para alinear los elementos hijos de forma vertical.
    • Valores:
      • Flex-start: Se alinean desde arriba.
      • Flex-end: Se alinean desde abajo.
      • Center: Alinea los item al centro del eje y del contenedor.
      • Stretch: Estira el alto de los elementos hijos al 100% del alto del elemento padre.
      • Baseline: Escala el alto del elemento al tamaño de su contenido.
  • Flex-wrap: Permite que un elemento cuyo tamaño sea mayor al de la página haga un salto de línea sin salirse del contenedor, pues este se agranda.
  • Order: Especifica el orden utilizado para disponer los elementos en su contenedor flexible. Los elementos estarán dispuestos en orden ascendente según el valor de order.
  • Flex-grow: Especifica qué cantidad del espacio restante dentro del contenedor flexible, debería ocupar el ítem en cuestión según su dirección principal, esta última determinada por flex-direction.
  • Flex-basis: Especifica el tamaño inicial de un elemento flexible.

Lo logreee!! 🥳🥳🥳 Me encantó descubrir flex

Antes

Después

Considero muy mal trabajar flexbox sin saber realmente que pasa con los algoritmos del navegador. Flexbox funciona con un main axis y cross axis (como los ejes de un plano cartesiano x,y).
En estos videos entenderás flexbox a profundidad para que no te quiebrela cabeza tanto.
Parte 1: https://youtu.be/_YUJ37FARrU
Parte 2: https://youtu.be/v4GIqmPiLmo

Una aclaración con flex-direction: Al ocupar flex-direction las propiedades justify-content y align-items cambian su funcionamiento, es decir, si se pone un flex-direction de column… justify-content ahora alineará de forma vertical y align-items de forma horizontal.

Listo! mejorado el reto con el uso de flexbox

**Antes: **

Despues:


CSS Flexbox Cheatsheet (link)

Extensión de VS Code que le permite abrir una hoja de trucos de flexbox directamente en el editor.
Tiene una ventana emergente flotante donde veras una descripción de las propiedades de flexbox y también colocando el mouse sobre una propiedad se muestra una imagen para cada propiedad de flexbox.

Que lo disfruten!

Su guia de confianza 😉

Reto cumplido
Larga vida a flexbox

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout with Flex</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <header class="header">
    <figure class="logo">
      <img src="./images/logo.webp" alt="Logo Platzi">
      <strong>Platzi</strong>
    </figure>
    <nav class="navbar">
      <ul class="menu">
        <li>
          <a href="">Home</a>
        </li>
        <li>
          <a href="">Courses</a>
        </li>
        <li>
          <a href="">Teachers</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">
        <img src="./images/route_2.png" alt="Route">
        <img src="./images/route_3.png" alt="Route">
        <img src="./images/route_4.png" alt="Route">
      </figure>
    </aside>
    <section class="content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum totam consequatur commodi nostrum fuga quae quam assumenda doloribus delectus dolorem! Nostrum eligendi accusamus iure ipsa ipsam illum accusantium? Magni, necessitatibus.</p>
    </section>
  </main>
  <footer class="footer">
    <p>Made with love in Platzi</p>
  </footer>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];700&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #003049;
}
body {
  font-family: 'Open Sans', sans-serif;
}
.header {
  display: flex;
  height: 65px;
  padding: 10px;
  border: 1px solid steelblue;
  justify-content: space-between;
  align-items: center;
}
.logo {
  display: flex;
  align-items: center;
}
.logo strong {
  margin-left: 5px;
  font-size: 1.6rem;
}
.menu {
  display: flex;
  list-style: none;
}
.menu li {
  margin: 0 5px;
}
.menu li a {
  text-decoration: none;
}
.main {
  display: flex;
}
.routes {
  padding: 10px;
  border: 1px solid greenyellow;
}
.routes-images {
  width: 298px;
}
.routes-images img {
  width: 100%;
  height: 82px;
}
.content {
  padding: 10px;
  border: 1px solid greenyellow;
}
.footer {
  display: flex;
  height: 50px;
  padding: 10px;
  border: 1px solid orange;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Desafío Layout</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <header class="header-container">
    <nav class="header-nav">
      <figure class="header-logo">
        <img src="./img/logo.png" alt="logo platzi" width="120px">
      </figure>
      <ul class="header-menu">
        <li><a href="#">Clases</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Foro</a></li>
        <li><a href="#">Agenda</a></li>
        <li><a href="#">TV</a></li>
      </ul>
    </nav>
  </header>
  <main class="main-container">
    <aside class="aside-container">
      <article class="aside-article">
        <h2 class="aside-title">Lorem ipsum, dolor sit.</h2>
        <p class="aside-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ex dolorem modi, eum ab harum corporis numquam ipsum quo ratione velit officiis vitae aliquam maiores dolore laudantium architecto repellat inventore.</p>
      </article>
      <article class="aside-article">
        <h2 class="aside-title">Lorem ipsum, dolor sit.</h2>
        <p class="aside-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ex dolorem modi, eum ab harum corporis numquam ipsum quo ratione velit officiis vitae aliquam maiores dolore laudantium architecto repellat inventore.</p>
      </article>
      <article class="aside-article">
        <h2 class="aside-title">Lorem ipsum, dolor sit.</h2>
        <p class="aside-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ex dolorem modi, eum ab harum corporis numquam ipsum quo ratione velit officiis vitae aliquam maiores dolore laudantium architecto repellat inventore.</p>
      </article>
      <article class="aside-article">
        <h2 class="aside-title">Lorem ipsum, dolor sit.</h2>
        <p class="aside-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ex dolorem modi, eum ab harum corporis numquam ipsum quo ratione velit officiis vitae aliquam maiores dolore laudantium architecto repellat inventore.</p>
      </article>
    </aside>
    <section class="section-container">
      <article class="article-container">
        <h1 class="article-title">Lorem ipsum dolor sit amet.</h1>
        <p class="article-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, a doloremque accusantium porro quidem veritatis doloribus dicta assumenda voluptates, ut, aspernatur quia delectus placeat culpa fuga nulla soluta quod quibusdam!
        </p>
        <p class="article-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem at impedit itaque. Recusandae quas, nihil libero minus qui repudiandae consequuntur debitis aut accusantium deleniti temporibus nostrum, consequatur explicabo commodi totam!
        Nisi ipsa laudantium reiciendis earum odit rerum quas dignissimos necessitatibus provident cupiditate quasi eaque, voluptatibus minima perferendis iusto at, sed ducimus officiis impedit error, ea iure numquam omnis sit! Repudiandae!
        Dolorem, architecto quidem deserunt soluta doloribus autem quibusdam? Et amet nulla libero facere soluta culpa eaque harum alias. Debitis animi libero incidunt in! Laudantium dicta facilis maxime voluptatem nam? Mollitia!
        Quasi corporis laudantium tenetur commodi, accusantium, odit, iure animi consectetur fuga adipisci eligendi! Ea odit deleniti perferendis necessitatibus esse! Quasi voluptate officiis enim reprehenderit. Magni minus deserunt consectetur illo maxime.
        Voluptatem consequatur maxime exercitationem culpa cum facere nostrum. Velit asperiores neque libero molestias cupiditate non dolorem error nihil laudantium vero odit esse quam quod animi possimus eos numquam, voluptate doloremque.
        </p>
        <div class="article-cards_container">
          <div class="article-card html"><p>HTML5</p></div>
          <div class="article-card css"><p>CSS3</p></div>
          <div class="article-card js"><p>JS</p></div>
        </div>
      </article>
    </section>
  </main>
  <footer class="footer-container">
    <section class="footer-slogan">
      <p class="footer-text_slogan">Transformamos la economía de nuestros países entrenando a la próxima generación de profesionales en tecnología.</p>
    </section>
    <section class="footer-social">
      <p class="footer-text_social">Aprende en nuestras redes:</p>
      <nav class="footer-nav">
        <ul class="footer-menu">
          <li><a href="#"><img src="./img/twitter.png" alt="Twitter" width="30%"></a></li>
          <li><a href="#"><img src="./img/youtube.png" alt="Twitter" width="30%"></a></li>
          <li><a href="#"><img src="./img/facebook.png" alt="Twitter" width="30%"></a></li>
          <li><a href="#"><img src="./img/instagram.png" alt="Twitter" width="30%"></a></li>
        </ul>
      </nav>
    </section>
  </footer>
</body>
</html>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  font-family: sans-serif;
  background-color: #f6f6f6;
}

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

a:hover {
  color: #b7bbc4;
}

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

.header-container {
  width: 100%;
  background-color: #121f3d;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5rem;
  height: 8rem;
  flex-wrap: wrap;
}

.header-menu li {
  font-weight: bold;
  padding: 0 3rem;
}

.main-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
}

.section-container {
  padding: 2rem;
  background-color: #f6f6f6;
}

.article-title {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.article-subtitle {
  font-size: 3rem;
  color: #b7bbc4;
  margin-bottom: 3rem;
}

.article-text {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.article-cards_container {
  display: flex;
  flex-wrap: wrap;
}

.article-card {
  width: 25rem;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10rem;
  color: white;
  padding: 1rem;
  font-size: 5rem;
  border-radius: 1rem;
}

.html {
  background-color: #e45126;
}

.css {
  background-color: #0c73b8;
}

.js {
  background-color: #e4a228;
}

.aside-container {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: #1e5270;
}

.aside-article {
  width: 30rem;
  color: white;
  background-color: #33b1ff;
  border-radius: 0.5rem;
  padding: 2rem;
  margin: 1rem;
}

.aside-title {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.aside-text {
  font-size: 1.5rem;
}

.footer-container {
  width: 100%;
  color: white;
  background-color: #1c3643;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 15rem;
  padding: 0 5rem;
}

.footer-slogan {
  width: 30rem;
  font-size: 1.5rem;
}

.footer-social {
  font-size: 1.5rem;
}

.footer-text_social {
  margin-bottom: 1rem;
}

Reto cumplido 😃😃, en el primer intento no le puse muchas cosas 😅
SIN FLEXBOX

CONFLEXBOX

CODIGO HTML

    <header class="header">
        <div class="header__logo">
            <img src="./img/pngegg.png" alt="Logo" class="header__logo--img">
        </div>
        <div class="header__title">
            <h1>Desafio con Flexbox</h1>
        </div>
        <nav class="nav">
            <ul>
                <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>
    <div class="content">
        <main class="content__main">
            <h2>Formulario de inscripción</h2>
            <form class="content__form">
                <fieldset>
                    <legend>Datos personales</legend>
                    <label for="name" class="form__label">
                        <p>Nombre</p>
                        <input type="text" id="name" name="name" placeholder="Nombre completo">
                    </label>
                    <label for="email" class="form__label">
                        <p>Email</p>
                        <input type="email" id="email" name="email" placeholder="Correo electrónico">
                    </label>
                    <label for="phone" class="form__label">
                        <p>Telefono Celular</p>
                        <input type="tel" id="phone" name="phone" placeholder="+591 12345678">
                    </label><br>
                    <button type="submit">Registrarse</button>
                </fieldset>
            </form>
        </main>
        <aside class="content__aside">
            <article class="article">
                <figure class="article__course">
                    <img src="./img/fotografia.jpg" alt="curso de fotografía" >
                    <figcaption>Curso Intermedio de Fotografía</figcaption>
                </figure>
            </article>
            <article class="article">
                <figure class="article__course">
                    <img src="./img/dibujo.jpg" alt="curso de dibujo" >
                    <figcaption>Curso Avanzado de Dibujo</figcaption>
                </figure>
            </article>
            <article class="article">
                <figure class="article__course">
                    <img src="./img/cocina.jpg" alt="curso de cocina" >
                    <figcaption>Curso de Cocina</figcaption>
                </figure>
            </article>
        </aside>
    </div>
    <footer class="footer">
        <p>Buscanos en nuestras redes</p>
        <div class="footer__icons">
            <a href="#">
                <img src="./icons/facebook.png" alt="facebook logo">
            </a>
            <a href="#">
                <img src="./icons/twitter.png" alt="twitter logo">
            </a>
            <a href="#">
                <img src="./icons/instagram.png" alt="instagram logo">
            </a>
        </div>
    </footer>

CODIGO CSS

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

/* -------header------ */

.header {
    background-color: violet;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__logo {
    width: 20%;
}

.header__title {
    width: 30%;
}

.nav {
    width: 40%;
}

.header__logo--img {
    width: 90%;
    display: block;
    margin: 0 auto;
}

.header__title h1 {
    text-align: center;
}

.nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav a {
    text-decoration: none;
    color: black;
}
.nav li {
    list-style: none;
    padding-right: 1em;
    font-size: 1.25rem;
}

/* ------content------ */

.content {
    display: flex;
    background-color: brown;
    justify-content: space-around;
}


/* content----main----- */

.content__main {
    order: 1;
    width: 70%;
    background-color: powderblue;
    padding: 1em;
}

.content__form {
    width: 40%;
    margin-top: 1.125em;
    margin-left: auto;
    margin-right: auto;
}

.content__form fieldset {
    padding: 1em;
}

.form__label input {
    width: 100%;
    margin-bottom: 1em;
    margin-top: .5em;
    border-radius: 5px;
    height: 25px;
    padding-left: .5em;
}

fieldset button:last-child {
    margin-top: .5em;
    width: 100%;
    height: 30px;
    border-radius: 10px;
}

/* content----aside------ */

.content__aside {
    order: 0;
    width: 30%;
    background-color: beige;
    padding: 1em;
}

.article__course {
    position: relative;
    
}

.article__course img {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    display: block;
    margin-bottom: .5em;
}

.article__course figcaption {
    background-color: rgba(32, 41, 32, .8);
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: whitesmoke;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* -------footer-------- */

.footer {
    background-color: snow;
    display: flex;
    justify-content: space-evenly;
    height: 50px;
    align-items: center;
}

.footer__icons a {
    margin-right: 2em;
}

Que empático el profe, cuando pregunta ¿Cómo te sientes? Tal cual como dijo, entré en frustración, pero poco a poco voy comprendiendo y jugando con los estilos y ahora flex-box 😃

Me imaginé hacer la página de una tienda de café 😍

Actualicé con lo aprendido 😎:

<!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 class="cabecera">
        <nav class="nav-bar">
            <picture class="logo">
                <img class="logo-img" src="./assets/logo.png" alt="Logo Platzi">
            </picture>
            <ul class="menu">
                <li class="menu-list">
                    <a href="">Home</a>
                    <img src="./assets/logos/home.png" alt="Menu"> 
                </li>
                <li class="menu-list">
                    <a href="">Cursos</a>
                    <img src="./assets/logos/cursos.png" alt="Cursos"> 
                </li>
                <li class="menu-list">
                    <a href="">Instructores</a>
                    <img src="./assets/logos/instructors.png" alt="Instructores"> 
                </li>
                <li class="menu-list">
                    <a href="">Blog</a>
                    <img src="./assets/logos/blog.png" alt="Blog"> 
                </li>
            </ul>
        </nav>
    </header>
    <main class="contenido">
        <aside class="cursos">
            <picture>
                <img src="./assets/cursos/android.png" alt="">
            </picture>
            <picture>
                <img src="./assets/cursos/web.png" alt="">
            </picture>
            <picture>
                <img src="./assets/cursos/blandas.png" alt="">
            </picture>
            <picture>
                <img src="./assets/cursos/azure.png" alt="">
            </picture>
            <picture>
                <img src="./assets/cursos/finanzas.png" alt="">
            </picture>
            <picture>
                <img src="./assets/cursos/marketing.png" alt="">
            </picture>
            <picture>
                <img src="./assets/cursos/software.png" alt="">
            </picture>
        </aside>
        <article class="articulo">
            <p class="parrafo">Bienvenido a</p>
            <picture class="logo-grande">
                <img src="./assets/logo.png" alt="">
            </picture>
            <button class="boton">INGRESAR</button>
        </article>
    </main>
    <footer>
        
    </footer>
</body>
</html>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.cabecera {
    display: flex;
    height: 100%;
    width: 100%;
}
.nav-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    background: linear-gradient(56deg, rgba(5,14,99,1) 0%, rgba(3,1,69,1) 60%);
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
.logo img{
    width: 150px;
}
.menu {
    display: flex;
    align-items: center;
}
.menu .menu-list{
    display: flex;
    font-size: 1.6rem;
    align-items: center;
    align-content: center;
    padding: 10px;
    list-style-type: none;
}
.menu-list a {
    text-decoration: none;
    color: whitesmoke;
}
.menu-list img {
    display: flex;
    height: 20px;
    padding-left: 5px;
    align-items: center;
    align-content: center;
}
.contenido {
    display: flex;
    width: 100vw;
    height: 100vh;
    padding-top: 60px;
    background: #050e63;
}
.cursos {
    display: flex;
    width: 350px;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    overflow-y: scroll;
}
.cursos::-webkit-scrollbar {
    width: 8px;     /* Tamaño del scroll en vertical */
    height: 8px;    /* Tamaño del scroll en horizontal */
}
.cursos::-webkit-scrollbar-thumb {
    background: rgba(3,1,69,1);
    border-radius: 4px;
}
.cursos img {
    width: 340px;
    padding: 5px 10px;
    border-radius: 20px;
}
.articulo {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}
.articulo .parrafo {
    font-size: 3rem;
    font-family: 'Courier New', Courier, monospace;
    color: greenyellow;
}
.logo-grande img {
    width: 400px;
}
.articulo .boton {
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: rgba(3,1,69,1);
    background-color: greenyellow;
    border-radius: 6px;
    border: 2px solid green;
}
.boton:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    background-color: rgba(3,1,69,1);
    color: greenyellow;
}

Aquí el resultado de mi diseño responsive y aquí el código fuente

Usando Flex, el tiempo para programar el reto se redujo en aprox 80%. Flexbox es la voz.

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

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


/* HEADER */
header {
  display: flex;
  justify-content: space-between;
  background-color: lightblue;
  height: 5vh;
}

/* Establecer un tamaño para el nav y que aplicando el justify-content se separe a cierta distancia.*/
nav {
  width: 30vw;
}

nav ul {
  display: flex;
  justify-content: space-around;
}

nav ul li {
  list-style: none;
  /* padding: 0 20px 20px; */

}

/* MAIN */
main {
  display: flex;
  height: 90vh;
}

aside {
  width: 30%;
  background-color: pink;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

aside div {
  width: 80%;
  height: 15%;
  border: 1px solid black;
  border-radius: 10px;
}

section {
  background-color: #273b47;
  color: white;
}

/* FOOTER */
footer {
  background-color: yellow;
  height: 5vh;
}

El anterior reto lo realicé sin Flexbox. Sin embargo, ya lo había implementado antes. Solo que como varios, no quise hacer trampa. Para dejarles uno de mis proyectos con este display, les dejo este de un reciente reto de Platzi:

Link del reto: https://platzi.com/blog/periodico-simpsons-css/

<h3>Algunas de propiedades de flex</h3>
  • flex-flow: se puede colocar wrap y column separados con espacios.
  • flex-align: alinea el texto de forma transversal a direction. Tiene varios valores como stretch que hace que ocupe el 100% de la pantalla. O baseline que ocupa solo el tamaño del texto que se esté usando.
  • order: n da un orden de ubicación colocando un número. Funciona con positivos y negativos. Los que no tengan un order tienen por defecto el 0.
  • flex-grow: 1 hace crecer a las cajas para ocupar todo el espacio restante en responsive. Se sobre escribe a space-evenly.

Volví a hacer el reto implementando Flex
Así estaba antes:

Así quedó con Flex:

También estuve estudiando con Flexbox Froggy y Flexbox Zombies

Reto Cumplido no cabe duda que Flexbox es lo mejor!!

CODIGO

CORRECCIÓN SOBRE align-items:baseline;
El profesor no explicó correctamente esta propiedad. Por lo general los contenedores van a adaptarse al tamaño de su contenido, pero align-items:baseline; no tiene esa función. Esta es la aclaratoria:

Dejo mi aporte que me costó UNA BANDA.

Lo aclaro porque no muchos aclaran el esffuerzo que puede llevar para alguien que recién arranca y ve las páginas de otros super avanzadas y puede sentirse frustrado. Es normal que te cueste y seguí intentadndo hasta que salga aunque se vea tan simple como el mío.

<!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>Desafío</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header>
      <nav class="nav">
        <figure class="nav_img-container">
          <img src="./imagenes/Logo.png" alt="" class="img-container_img" />
        </figure>
        <ul class="nav_button-container">
          <li class="button-container_button">Catálogo</li>
          <li class="button-container_button">Packs</li>
          <li class="button-container_button">¿Quienes somos?</li>
          <li class="button-container_button">Ayuda</li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="sidebar-main">
        <article class="sidebar-main_box"></article>
        <article class="sidebar-main_box"></article>
        <article class="sidebar-main_box"></article>
        <article class="sidebar-main_box"></article>
      </section>
      <section class="content-main">
        <article>
          <p class="p">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis,
            rerum amet voluptatibus illo adipisci iste fugiat aperiam corporis
            quidem, architecto, deleniti dicta saepe quos eius sed impedit autem
            delectus cumque. Libero aut qui in laboriosam quia cum modi ratione
            molestiae possimus omnis illum officia veritatis tenetur illo
            aperiam similique provident repellendus repellat dolore doloremque
            eveniet corrupti, deserunt harum! Consequuntur, magni? Perspiciatis
            optio ducimus quaerat aliquid? Fuga dolores minima deserunt nobis
            mollitia culpa adipisci quia accusamus dignissimos. Nostrum, culpa
            libero eaque laudantium recusandae iusto eligendi, rem non facilis
            officiis est doloribus. Tempora ratione eveniet libero repudiandae
            non quis odio cum inventore? Ex debitis voluptatum cupiditate quam
            nihil, sapiente maiores quidem nostrum voluptates exercitationem,
            numquam nulla quibusdam adipisci dolor est deleniti iusto! Sed quasi
            unde, tenetur eos excepturi aperiam fugit voluptatibus
            necessitatibus officiis doloribus iste ab explicabo dignissimos quis
            ex magni ipsa dolorem cum! Ducimus nemo dolorum veritatis sed iste
            maiores deserunt?
          </p>
        </article>
      </section>
    </main>
    <footer class="footer">
      <p>Info</p>
      <p>Contacto</p>
      <p>Preguntas frecuentes</p>
    </footer>
  </body>
</html>

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

html {
  font-size: 62.5%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/*  */

.nav {
  background-color: rgb(131, 197, 156);
  width: 100vw;
  height: 9vh;
  display: flex;

  text-align: center;
  align-items: center;
}

.nav_button-container {
  flex-grow: 1;
  margin-right: 1.5rem;
  color: rgb(32, 48, 38);
  font-size: 1vw;
  display: flex;
  justify-content: flex-end;
}

.nav_button-container li {
  width: 15vw;
  list-style: none;
}

.nav_img-container img {
  width: 4vw;
  height: 8vh;
  margin-left: 1.5rem;
}

/*  */

main {
  display: flex;
  font-size: 0.9vw;

}
.sidebar-main {
  background-color: rgb(31, 36, 33);
  width: 15vw;
  height: 86vh;
}

.sidebar-main article {
  background-color: rgb(76, 102, 86);
  width: 6vw;
  height: 12vh;
  margin: 3vh 1vw;
  border-radius: 2rem;
}

/*  */

p {
  color: rgb(31, 36, 33);
  font-size: 0.8vw;
}

footer {
  display: flex;
  flex-direction: flex-end;
  width: 100vw;
  height: 5vh;
  background-color: rgb(50, 131, 81);
  justify-content: space-around;
  align-items: center;
}

Ya con esto se puede hacer mucho XD

SIN FLEXBOX

**

CON FLEXBOX

Comparto mi Layout con Flexbox

Y el después con el relleno

Con Flex se volvió super sencillo y mucho más estético.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hollow Knight Layout</title>
    <link rel="shortcut icon" href="./pictures/hollowknight-icon2.png">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav class="nav">
            <input class="header__logo" type="image" src="./pictures/hollowknight-logo.svg" alt="El logo del hollow knight">
            <ul class="nav__list">
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Noticias</a>
                </li>
                <li>
                    <a href="#">Caracteristicas</a>
                </li>
                <li>
                    <a href="#">Info</a>
                </li>
            </ul>
        </nav>
    </header>
    <main class="main__container">
        <aside class="routes">
            <ul class="routes__list">
                <li>
                    <input type="image" src="./pictures/hollowknight1.jpg">
                </li>
                <li>
                    <input type="image" src="./pictures/hollowknight2.jpg">
                </li>
                <li>
                    <input type="image" src="./pictures/hollowknight3.jpg">
                </li>
                <li>
                    <input type="image" src="./pictures/hollowknight4.jpg">
                </li>
            </ul>
        </aside>
        <section class="content">
            <ul>
                <li>
                    <div class="content__card">
                        <img src="./pictures/hollowknight-collectorsEdition.webp">
                        <h1 class="content__card-title">Hollow Knight Collector's Edition</h1>
                        <p class="content__card-price">$79.99</p>
                        <p><button>Comprar</button></p>
                    </div>
                </li>
                <li>
                    <div class="content__card">
                        <img src="./pictures/hollowknight-shirt1.webp">
                        <h1 class="content__card-title">Scarab's Grotto T-Shirt</h1>
                        <p class="content__card-price">$24.99</p>
                        <p><button>Comprar</button></p>
                    </div>
                </li>
                <li>
                    <div class="content__card">
                        <img src="./pictures/hollowknight-shirt2.webp">
                        <h1 class="content__card-title">Nimble Protector T-Shirt</h1>
                        <p class="content__card-price">$24.99</p>
                        <p><button>Comprar</button></p>
                    </div>
                </li>
                <li>
                    <div class="content__card">
                        <img src="./pictures/hollowknight-shirt3.webp">
                        <h1 class="content__card-title">Quirrel's Quest T-Shirt</h1>
                        <p class="content__card-price">$24.99</p>
                        <p><button>Comprar</button></p>
                    </div>
                </li>
                <li>
                    <div class="content__card">
                        <img src="./pictures/hollowknight-shirt4.webp">
                        <h1 class="content__card-title">Troupe Master T-Shirt</h1>
                        <p class="content__card-price">$24.99</p>
                        <p><button>Comprar</button></p>
                    </div>
                </li>
                <li>
                    <div class="content__card">
                        <img src="./pictures/hollowknight-enamelPin7-pack.webp">
                        <h1 class="content__card-title">Hollow Knight Enamel Pin 7-Pack</h1>
                        <p class="content__card-price">$69.99</p>
                        <p><button>Comprar</button></p>
                    </div>
                </li>
            </ul>
        </section>
    </main>
    <footer class="footer">
        <div class="footer__text">
            <p>[email protected] © 2019 Team Cherry</p>
            <p>CODED BY: Emmanuel Cázarez Perea</p>
        </div>      
        <figure>
            <img src="./pictures/teamCherry-logo.svg">
        </figure>
    </footer>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body{
    font-size: 62.5%;
    min-width: 800px;
}
.nav {
    background-color: lightgray;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 6vh;
    box-shadow: 0 2px 10px;
    z-index: 1;
}
.header__logo {
    padding: 0.5vh;
    padding-right: 10vw;
}
.nav__list {
    height: 6vh;
    display: flex;
    align-items: center;
    padding-right: 2vw;
}
.nav__list li {
    list-style: none;
    padding: 0.5vw;
}
.nav__list li a {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
    color: black;
    font-size: 1.6rem;
    padding: 0.5vw;
}
.nav__list li a:hover {
    background-color: rgb(119, 136, 153, 0.5);
}
.main__container {
    display: flex;
}
.routes {
    background-color: rgb(128, 128, 128, 0.7);
    padding-right: 2vw;
}
.routes__list {
    position: sticky;
    top: 6vh;
}
.routes__list li input {
    width: 16vw;
    height: 18vh;
    min-width: 285px;
    min-height: 135px;
    margin: 2vh 1vw;
    border-radius: 8px;
    box-shadow: 2px 2px 10px;
}
.routes__list input:hover {
    box-shadow: 10px 10px 10px;
}
.routes__list input:active {
    width: 17vw;
    height: 19vh;
    margin-right: 0;
    margin-bottom: 1vh;
    box-shadow: 15px 15px 10px;
}
.content {
    background-color: gray;
    flex-grow: 1;
    min-width: 385px;
}
.content ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
}
.content ul li {
    list-style: none;
    margin: 2vh 2vw;
}
.content__card {
    background-color: whitesmoke;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8);
    width: 385px;
    height: 360px;
    text-align: center;
    font-family: arial;
}
.content__card img {
    width: 385px;
    height: 250px;
    box-shadow: 0 2px 8px;
}
.content__card-title {
    padding: 5px;
    font-size: 1.8rem;
}
.content__card-price {
    padding: 5px;
    font-size: 1.8rem;
}
.content__card button {
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 2rem;
}
.content__card button:hover {
    opacity: 0.9;
}
.footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    background-color: rgb(120, 40, 140);
}
.footer figure {
    display: flex;
    padding: 1vh 1vw;
}
.footer__text {
    display: flex;
}
.footer p {
    margin: 0 1vw;
    font-size: 16px;
    color: whitesmoke;
}

Dejo mi layout hecho con Flex

De pana que el desafio usando flex es una autentica maravilla. Sin el flex sentí una frustración. Amé flexbox!

Primero:

Segundo, inspirado de los demás compañeros:

Por si gustan ver el proyecto del segundo:
https://angelnewgate.github.io/amogus-webpage/index.html
https://github.com/angelNewgate/amogus-webpage

Mi desafío mejorado con Flex.

No tienen ni idea de cómo en el anterior reto me partí la cabeza para poder centrar todo. Pero estoy muy agradecido por eso, porque gracias a ello aprendes mucho más, el esforzarte y resolver problemas nos hace aprender mucho mejor.

Práctica con Flexbox

Se preguntan

¿porqué si aun elemento no le asigno un orden va al principio?

La respuesta es: Su propiedad “order” por default" es CERO

En el siguiente ejemplo a la única caja que no se le asignó orden fue a la N° 06.

.

mi aporte, es una evolucion del que hice sin flexbox

Costo pero algo salio jejeje a seguir practicando y mejorando el code! 😄 me inspire en el cafe 😛

Recomiendo este sitio, me ayudo a comprender mejor el tema de flexbox.
flexbox css
css justify-content

Utilizando Flex 😄



cuando usemos el align-items: stretch, hay que checar bien que no estemos usando el width en el contenedor porque si no no se van a estirar las cajas.

Compañeros, aquí una muestra de la maquetación para responsive design.

Respuesta para celular

Respuesta para PC:

Código en 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>cyberfruit</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header class="encabezado">
        <figure class="icono">
            <img src="./pics/cyberfruit_icon.png" alt="imagen de un pedazo de carne"/>
        </figure>
        <nav>
            <ul class="menuPrincipal">
                <li><a href="">Productos</a></li>
                <li><a href="">Servicios</a></li>
                <li><a href="">Sobre nosotros</a></li>
                <li><a href="">Contácto</a></li>
            </ul>
        </nav>

    </header>
    <main class="principal">    
      <section class="panelL">
        <article class=arti1>Soy la caja 1
        </article>
        <article class=arti1>Soy la caja 2
        </article>
        <article class=arti1>Soy la caja 3
        </article>
        <article class=arti1>Soy la caja 4
        </article>
        <article class=arti1>Soy la caja 5
        </article>
      </section>
      <section class="panelD">
      </section>
    </main>

    <footer class="pie">
      <div class="footerdiv1">Datos aleatoros</div>
      <div class="footerdiv2">Redes sociales</div>
    </footer>
</body>
</html>> 

Código en CSS:

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

html{
    font-size:62.5%;
}

body {
    background-color: rgb(0, 16, 87);
    width:100vw;
    height:100vh;
}

li, ul, nav{
    list-style: none;
    text-decoration: none;
}

.encabezado{
    position:relative;
    background-color: black;
    padding:0.5rem;
    min-width:60rem;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-around;
    box-shadow: 0px 5px 5px 5px #27AD0F;
}

.encabezado nav{
    display:flex;
    align-items:center;
}

.menuPrincipal{
    display: flex;
    align-items:baseline;
    justify-content:space-around;
    margin:0.5rem;
    width:60rem;
}

.menuPrincipal a{
    text-decoration: none;
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    font-size:2rem;
    font-weight:800;
}

.principal{
    width:100vw;
    height:60vh;
    background-color: rgb(1, 38, 160);
    display:flex;
    justify-content:space-between;
}

.panelL{
    min-height: 120px;
    display:flex;
    flex-direction:column;
    background-color: rgb(0, 83, 94);
    justify-content: space-between;
    border-radius: 0px 10px 10px 0px;
    box-shadow: 0px -8px 5px 5px #27AD0F;
}

.panelL .arti1{
height: 15vh;
color:rgb(211, 253, 235);
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size:1.5rem;
font-weight:800;
margin: 0 0.8rem;
display: flex;
justify-content: space-around;
align-items:center;
}


.pie{
    width:100vw;
    height:15vh;
    background-color: rgb(7, 26, 88);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0.4rem;
    box-shadow: 0px -5px 5px 5px #27AD0F;
}

.footerdiv1{
color:rgb(211, 253, 235);
font-family:Arial, Helvetica, sans-serif;
font-size:1.5rem;
font-weight:800;
padding: 0.5rem;
margin: 10px;
border:2px solid black;
box-shadow: 0px 0px 5px 5px #27AD0F;
border-radius:1rem;
}

.footerdiv2{
color:rgb(211, 253, 235);
font-family:Arial, Helvetica, sans-serif;
font-size:1.5rem;
font-weight:800;
padding: 0.5rem;
margin: 10px;
border:2px solid black;
box-shadow: 0px 0px 5px 5px #27AD0F;
border-radius:1rem;
}
> 

La principal diferencia está en que flex-basis solo se le aplica a los hijos de un contenedor que sea de display flex. Mientras que width se le aplica a todos los elementos de nuestro HTML.
.
Y otra que podría ser importante recalcar es que flex-basis puede servir de width y de height dependiendo de como este establecido el flex-direction. Si es row, flex-basis servirá de width, si es column, flex-basis servirá de height.
.
Gran Aporte de @johncardenasp

Flexbox permite alterar el ancho, alto y posicionamiento de elementos en el espacio disponible.

El orden también depende de con que propiedad tengas el flex-direction del padre

  • flex-direction: row-reverse;

  • flex-direction:column-reverse;

Les comparto un recurso que me gusta mucho usar cuando necesito Flexbox.
👉🏾https://css-tricks.com/snippets/css/a-guide-to-flexbox/👈🏾

Demasiada buena está clase.

Diego: Muy posible sufriste con el proyecto anterior.
YO: AAAAAAAAAH !!! esta Mi#&!%… porque no cuadra

Les comparto el resultado del desafío con flexbox:

Reordenar Bloques

!Claro que es mejor, flexbox es tu mejor aliado!

Si algún hijo no tiene la propiedad order definida, por defecto es enviado a la izquierda si esta en flex-direction: row, o a la parte de arriba si es flex.direction: column;

😄 La documentación de los temas vistos:

Les comparto la modificiación de mi layout usando Flex

A veces es duro, y me pierdo… pero cuando se termina, y se entiende es demasiado gratificante.
![](obviamente hay mucho por mejorar, pero es gratificante lo que uno ve que ha podido avanzar.

siguiendo con la tradición

  • antes
  • depues

No quise mejorar el mismo layout que había diseñado anteriormente, decidí empezar un proyecto nuevo, evidentemente usando flex xD. Aquí mi resultado:

Así termina la actualización del reto con Display Flex… Excelente curso y bien explicado

![](

Propiedades
Flex-direction: Determina cual será el eje principal. Sus valores son
- Row (default): main axis horizontal
- Column: cross axis vertical
Justify-content: Esta propiedad alinea los elementos respecto al eje principal. Sus valores son:
- flex-start (default)
- flex-end: Los elementos se vayan al final del eje.
- Space-between: Hace que el espacio entre los elementos se distribuya uniformemente para ocupar todo el espacio en el eje principal.
- Space-around: Hace que el espacio alrededor de los elementos se distribuya.
- Center: Manda al centro a los elementos.
Align-items: Esta propiedad alinea los elementos respecto al eje secundario. Sus valores son:
- Stretch: (default) rellana todo el espacio en el eje secundario, en este caso el vertical.
- flex-start
- flex-end: Los elementos se vayan al final del eje.
- Center: Manda al centro del eje a los elementos.
- Baseline: Alinea los elementos sobre la línea base de texto.
Align-self: Esta propiedad sobrescribe los valores de align-item a un elemento único.

Hola 😄
He aquí mi resultado con flex aplicado al anterior reto. Aunque me queda aún algo dificil hacer un wrap de ambos contenedores en main el que contiene el video y el que tiene las columnas 😕

Aún falta mucho por recorrer, este es solo el comienzo :v

Layout

Header

Main

Footer

Display Flex nos hace la vida más simple a la hora de posicionar los contenedores 😀💚

Entender FlexBox es como tener superpoderes 💚
Reto cumplido 👌

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0">
        <title>Desafio posicionamiento</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <figure>
                <img src="img/logo.svg" alt="logo">
            </figure>
            <nav>
                <ul>
                    <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>
            <aside>
                <div class="aside_items"></div>
                <div class="aside_items"></div>
                <div class="aside_items"></div>
                <div class="aside_items"></div>
            </aside>
            <section>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta quasi excepturi nisi enim in ratione, repellendus cum provident magnam itaque temporibus modi vero fugiat? Vero vitae fugit debitis facilis quisquam.
                    Incidunt corporis culpa a repellendus at quae qui sit aut, explicabo facilis distinctio, odit quis! Harum rerum, molestias placeat a commodi dolore eligendi deserunt officiis, velit quia facere corporis blanditiis.
                    Cumque accusamus voluptas autem optio aperiam! Voluptatem optio impedit repudiandae quia exercitationem atque debitis minus, nam numquam explicabo, voluptas nihil vitae magni in deleniti delectus. Eligendi quaerat deserunt culpa temporibus.
                    Magni reprehenderit cupiditate velit necessitatibus dolores voluptate? Doloribus nostrum totam quo ratione culpa, saepe error, vero officia laboriosam nobis facere fugit modi atque incidunt quasi sint! Cupiditate, fugit? Voluptas, molestias.
                    Temporibus ad deserunt ex dolor optio adipisci, doloribus minima laudantium, voluptate voluptatem fuga nostrum iusto culpa perferendis nulla autem expedita maiores iure suscipit labore corrupti voluptatibus quos debitis! Dignissimos, est!
                    Sapiente ex porro alias ea enim velit, repellendus minus quaerat quos animi, adipisci facilis quod quia, a ducimus! Quidem nostrum est voluptatem cum minus repellendus in? Incidunt doloremque beatae sunt.
                    Ducimus ea nostrum iure aperiam. Officia quisquam distinctio quaerat laborum dolorem cumque? Maxime eos, corporis perferendis sunt iure eius ipsum facere ducimus, deserunt delectus et illum illo debitis eligendi placeat!
                    Laborum et consectetur rerum aut quibusdam debitis, dolor doloremque magni delectus numquam optio molestias exercitationem at. Voluptate aspernatur, mollitia cum at repellat expedita? Ratione eligendi non fugit exercitationem illo ex.
                    Earum pariatur voluptate quod qui voluptates consequuntur inventore blanditiis aliquid nam assumenda odit accusantium aut voluptas minus expedita neque odio distinctio, doloribus saepe nesciunt fugit. Veritatis fuga error inventore ex?
                    Nisi repellat ratione eligendi commodi quibusdam aperiam accusantium ullam ea placeat exercitationem, assumenda odio ducimus mollitia adipisci voluptate dignissimos obcaecati quod perferendis, possimus eius minima aliquam dolor. Libero, optio aliquam!
                </p>
            </section>
        </main>
        <footer>
            <a href="#">About us</a>
        </footer>
    </body>
</html>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    font-family:Tahoma, Geneva, Verdana, sans-serif;
    font-size:1.2rem;
}
body{
    width:100vw;
    height:100vh;
}
header{
    width:100%;
    height:10%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background: red;
}/* Como centrar una imagene en el padre */
figure{
    width:50%;
    height:100%;
    overflow:hidden;
}
figure img{
    max-height:96%;
    padding:2% 2.5%;
}/* Como centrar una imagene en el padre */
nav{
    margin:0 2.5%;
    width:50%;
}
ul{
    display:flex;
    flex-flow:row wrap;
    justify-content:space-evenly;
}
li{
    list-style:none;
}
li > a{
    text-decoration:none;
}
main{
    width:100%;
    height:80%;
    display:flex;
    background: green;
}
aside{
    width:25%;
    height:100%;
    display:flex;
    flex-flow:column wrap;
    justify-content:space-evenly;
    align-content:center;
    background: yellow;;
}
.aside_items{
    width:95%;
    height:23.8%;
    background: pink;
}
section{
    width:75%;
    max-height:100%;
    text-align:justify;
    background: gray;
}
section p{
    padding:2.5%;
    height:95%;
    overflow:hidden; /* evita se desborde el texto*/
}
footer{
    width:100%;
    height:10%;
    display:flex;
    justify-content:center;
    align-items:center;
    background: blue;   
}
footer a{
    color:white;
    text-decoration:none;
}
footer a:hover{
    color:black;
    text-decoration:underline;
}

asi me quedo con lo que e aprendido de flex:
la anterior no lo pude hacer, ahora lo hice un poco menos frustrado pero se logro

Al ver la parte final…

desafio completado

sin flex

con flex

Me costó mucho menos esfuerzo, aunque descubrí algo durante este desafío, si utilizas flex direction column para el sidebar, las reglas del contenedor se invierten por lo que ahora justify-content será el que alinee en el eje vertical y align items en el eje horizontal.

He desarrollado el siguiente ejercicio PASO a PASO de: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. Espero les ayude:

Se complementa el aprendizaje leyendo unos comentarios que de verdad son buenos, para que se entienda mejor el tema e incluso se profundice.

Mucho mejor!!

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" href="/css/desafio-flexbox.css">
    <title>Document</title>
</head>
<body>
    <header>
        <figure class="logo"><img src="https://cdn-icons-png.flaticon.com/512/5344/5344530.png"></figure>
        <nav>
            <ul>
                <li>Casa</li>
                <li>Cursos</li>
                <li>trabajo</li>
                <li>Adios</li>
            </ul>
        </nav>
    </header>
    <main>
        <aside class="contenedor">
            <section class="contenedor-izquierdo">
                <article><figure><img src="https://images.pexels.com/photos/7205925/pexels-photo-7205925.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"></figure></article>
                <article><figure><img src="https://images.pexels.com/photos/7205925/pexels-photo-7205925.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"></figure></article>
                <article><figure><img src="https://images.pexels.com/photos/7205925/pexels-photo-7205925.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"></figure></article>
                <article><figure><img src="https://images.pexels.com/photos/7205925/pexels-photo-7205925.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"></figure></article>
            </section>
            <section class="contenedor-derecho">
                <h1>Videos de vladi</h1>
                <span>Los mejores videos</span>
                <video class="videos" src="/videos/mw2.mp4" controls></video>
                
            </section>
        </aside>
        <footer>
            <section><span>Estado Chiapas</span></section>
            <section>
                <ul>
                    <li><img src="https://cdn-icons-png.flaticon.com/512/1384/1384014.png"></li>
                    <li><img src="https://cdn-icons-png.flaticon.com/512/3669/3669691.png"></li>
                    <li><img src="https://cdn-icons-png.flaticon.com/512/2175/2175193.png"></li>
                </ul>
            </section>
        </footer>

    </main>
</body>
</html>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    width: 100vw;
}
header{
    background-color: aqua;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.logo img{
    width: 5vh;
}
.logo, nav, nav ul li{
display: inline-block;
}
nav ul li{
    margin-left: 2rem;
}
.contenedor{
    display: flex;
    flex-wrap: wrap;
}
.contenedor-izquierdo{
 background-color: blueviolet;
 width: 30vw;
 height: 90vh;
 display: flex;
 justify-content: space-around;
 flex-direction: column;
 flex-wrap: wrap;
}
.contenedor-derecho{
    width: 70vw;
    background-color: beige;
    display: grid;
    place-items: center;
}
.videos{
width: 10rem;
}
article{
    margin-left: 6vw;
}
article figure img{
    width: 10 rem;
    height: 5rem;
    border-radius: 10%;
}
footer{
    background-color: brown;
    display: flex;
    justify-content: space-between;
}
section ul li img{
    width: 5vh;
}
section ul li{
    display: inline-block;
}

Tarea completada

Misión completada

Comparto los apuntes de la clase 😃

ANTES


DESPUES Ya es responsivo

<!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="reto.css">
</head>

<body>
    <nav class="nav">
        <div class="logo">logo</div>

        <ul class="nabvar">
            <li><a href="#"> Home</a></li>
            <li><a href="#"> curso</a></li>
            <li><a href="#"> introduccion</a></li>
            <li><a href="#"> Blog</a></li>
        </ul>

    </nav>
    <main>
        <aside class="aside">
            <div class="article"></div>
            <div class="article"></div>
            <div class="article"></div>
            <div class="article"></div>
        </aside>
        <section class="section">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem culpa aspernatur blanditiis id quas, voluptas accusantium? Sint, voluptate dignissimos repellat eaque tenetur architecto eos accusamus id quae molestias quisquam. Natus.
                Ad adipisci assumenda vel voluptates! Quas totam, dolorum nisi alias corrupti, quasi architecto vel deleniti ducimus optio et minus cumque eius, officia eum praesentium aliquid. Corrupti dolorem delectus enim ad! Numquam quod placeat sunt
                corporis cumque laboriosam ea possimus ipsa rem doloribus quo eligendi, nulla quidem tenetur dolores blanditiis excepturi voluptatibus fuga, officiis aliquid distinctio, soluta tempora provident veniam! Numquam.</p>
        </section>

    </main>
    <footer>
        <p>derechos reservados</p>
    </footer>
</body>

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

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
}

.logo {
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 4rem;
}

.nabvar {
    display: flex;
}

.nabvar li {
    padding: 2rem;
    list-style: none;
    text-align: center;
}

.nabvar li a {
    text-decoration: none;
}

main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.aside {
    background: peru;
    padding: 1rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.article {
    background: greenyellow;
    padding: 1rem;
    margin: 1rem;
    border-radius: .8rem;
    width: 30vw;
    justify-content: space-evenly;
    flex-grow: 1;
}

.section {
    background: darkmagenta;
    padding: 1rem;
    height: 100vh;
    text-align: justify;
    flex-basis: 22rem;
    flex-grow: 1;
}

footer {
    width: 100%;
    height: auto;
    text-align: center;
    padding: 5px;
    background-color: navajowhite;
}

Mi desafío con uso de flex:

<!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 1 Flex</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header class="cabecera">
      <div>Logo</div>
      <nav>
        <ul>
          <li>Home</li>
          <li>Cursos</li>
          <li>Instructores</li>
          <li>Blog</li>
        </ul>
      </nav>
    </header>
    <main class="principal">
      <aside>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </aside>
      <section>
        <article>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque ad
          officia quia quibusdam saepe voluptas dolor, inventore corrupti optio
          perferendis, unde maiores nemo, officiis aliquid dolorem! Repellat
          delectus a praesentium? Lorem ipsum dolor sit, amet consectetur
          adipisicing elit. Itaque ad officia quia quibusdam saepe voluptas
          dolor, inventore corrupti optio perferendis, unde maiores nemo,
          officiis aliquid dolorem! Repellat delectus a praesentium? Lorem ipsum
          dolor sit, amet consectetur adipisicing elit. Itaque ad officia quia
          quibusdam saepe voluptas dolor, inventore corrupti optio perferendis,
          unde maiores nemo, officiis aliquid dolorem! Repellat delectus a
          praesentium? Lorem ipsum dolor sit, amet consectetur adipisicing elit.
          Itaque ad officia quia quibusdam saepe voluptas dolor, inventore
          corrupti optio perferendis, unde maiores nemo, officiis aliquid
          dolorem! Repellat delectus a praesentium?
        </article>
      </section>
    </main>
    <footer class="pie">Cont&aacute;ctanos</footer>
  </body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
}
.cabecera {
    display: flex;
    background-color: #457B9D;
    justify-content: space-between;
    align-items: center;
}
.cabecera div {
    color: white;
    font-size: 5rem;
    padding: 0 2rem 1rem;
}
.cabecera ul li {
    list-style: none;
    color: white;
    display: inline-block;
    padding: 0 2rem;
}
.principal {
    display: flex;
}
.principal aside {
    flex-basis: calc(20%);
    background-color: #A8DADC;
}
.principal aside div {
    border-radius: 1rem;
    margin: 2rem;
    width: auto;
    height: 15rem;
    background-color: #F1FAEE;
}
.principal section {
    flex-basis: calc(80%);
    background-color: #F1FAEE;
    padding: 2rem
}
.pie {
    background-color: #457B9D;
    text-align: center;
    color: white;
    padding: 2rem;
}

asi quedo mi ejercicio anterior sin flex y el de ahora con flex:
anterior:

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html{
	font-size: 62.5%;
}
body{
	font-size: 1.6em;
}
.menu{
	height: 10vh;
	width: 100%;
	background: #2099B6;
}
.menu__elemento{
	display: inline-block;
	margin-right: 1em;
	color: white;
}
.menu__elemento--logo{
	display: inline-block;
	margin-right: 65em;
	color: grey;
}

.imagenes-izquierda{
	display: inline-block;
	background: #FFAA00;
	width: 20vw;
	height: 90vh;
	position: absolute;
}
.contenido{	
	display: inline-block;
	background: #012E45;
	height: 90vh;
}
.contenido__parrafo{
	display: inline-block;
}
.imagenes-izquierda{

	height: 90vh;
}
.imagenes-izquierda__lista{
	display: flex;
	flex-direction: c;
	justify-content: flex-start;
	height:  90vh;
}
.imagenes-izquierda__elemento{
	display: block;

	width: 18vw;
	height: 21vh;
	background: red;
	border-radius: 10%;
} 

actual:

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html{
	font-size: 62.5%;
}
body{
	font-size: 1.6em;
}
.menu{
	width: 100vw;
	height: 10vh;
	background: rgb(32, 153, 182);
}
.menu__lista{
	display: flex;
	list-style: none;
	flex-wrap: nowrap;
	justify-content: flex-end;
}
.menu__elemento{
	margin-right: 1.2rem;
}
.menu__elemento--logo{
	flex-grow: 1;
}
.imagenes-izquierda{
	position: absolute;
	background-color: red;
	width: 20vw;
	height: 90vh;
}
.imagenes-izquierda__lista{
	height: 90vh;
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
.imagenes-izquierda__elemento{
	height: 20vh;
	width: 18vw;
	border: .2rem  black; solid;
	border-radius: 10%;

	background-color: blue;
}

3. Uso de flex-grow

5. Uso de Flex-basis combinado con flex-grow :D

Les comparto una barra de navegación con display:flex.


.
HTML

<<body>
    <header>
        <nav>
            <div>
                <figure class="logo-header"><img src="./imgs/logo-small.jpg" alt=""></figure>
            </div>
            <ul>
                <li><a href="">Arriba</a></li>
                <li><a href="">Abajo</a></li>
                <li><a href="">Accesorios</a></li>
                <li><a href="">Contactanos</a></li>
            </ul>
            <figure class="carrito"><img src="./imgs/carrito-logo.jpg" alt=""></figure>
        </nav>
    </header>
</body>
</html>> 

CSS

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

body {
    font-size: 2rem;
    background-color: #154B52;
}

/* header */ /* header */ /* header */
/* header *//* header *//* header */
/* header *//* header *//* header */

nav {
    background-color: rgb(10, 10, 10);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 17vh;
}

div figure.logo-header {
    padding: 0 5vw;
    cursor: pointer;
    transition: 0.6s;
}

div figure.logo-header:hover {
    transform: scale(1.2);
}

div figure.logo-header img {
    height: 70px;
    width: auto;
    border: 2px solid black;
    border-radius: 100px;
}

nav ul{
    list-style: none;
}

nav ul li {
    display: inline-block;
    padding: 0 20px;
}

figure.carrito {
    padding: 0 5vw;
    cursor: pointer;
    transition: 0.6s;
}

 figure.carrito:hover {
    transform: scale(1.5);
}

figure.carrito img {
    height: 60px;
    width: auto;
}> 

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" href="./style.css">
    <title>Flex</title>
</head>
<body>

    <header>
        <a href="#" class="logo">
            <img src="../tareaLayout/img/logo.png" alt="logo de la tarea">
        </a>
        <nav>
            <!-- <a href="#" class="nav-link">Inicio</a>
            <a href="#" class="nav-link">Acerca de nosotros</a>
            <a href="#" class="nav-link">Contactos</a>
            <a href="#" class="nav-link">Login</a> -->

            <ul>
                <li><a href="#" class="nav-link">Inicio</a></li>
                <li>            <a href="#" class="nav-link">Acerca de nosotros</a></li>
                <li>            <a href="#" class="nav-link">Contactos</a></li>
                <li>            <a href="#" class="nav-link">Login</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <article>
                <img class="gonta" src="../../../CURSODEFINITIVOHTMLYCSS/HTMLdesde0barbon/gonta.jpg" alt="">
                <h2>todo sobre el sitioasdacAS</h2>
                <p>AASDASDASDASDD</p>

                <img class="hulk" src="./star.png" alt="">
                <p class="neon">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus odio, dicta repudiandae ratione aliquam voluptate expedita, asperiores inventore, reiciendis ea consectetur tempore totam repellat fugiat! Vel amet similique numquam labore.</p>
                <a href="">leer mas...</a>
            </article>
        </section>
        <aside>
            <h3>subtitulo</h3>
            <ul>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
            </ul>
            <br>
            <h3>subtitulo</h3>
            <ul>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
            </ul>
            <br>
            <h3>subtitulo</h3>
            <ul>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
            </ul>
        </aside>   
    </main>
    <footer>
        <p>&copy; footer</p>
    </footer>
</body>
</html>

CSS

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

main{
    font-size: 1.6rem;
    background: url(./fondo.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    height: calc(90vh - 8rem);
}

 a{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    color: blanchedalmond;
    padding: 1rem;
    font-size: 3rem;
}
 
 header{
    display: flex;
    min-height: 70px;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(118, 31, 153, 0.863);
    clear: both;
    text-align: center;
    color: rgb(14, 0, 12);
}

nav li{

    display: inline-block;
}

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

.logo img{
    height: 8rem;
}

nav a{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    color: blanchedalmond;
    padding: 1rem;
    font-size: 3rem;
    font-weight: 600;
}

/* nav a:hover{
    color: rgba(69, 0, 87, 0.842);
    background-color: blueviolet;

} */

li:hover{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    animation-duration: 0.25s;
    text-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

@media (max-width:700px) {
    header{
        flex-direction: column;
    }
}
.gonta{

}
section{
    /* background-color: #efefef; */
    margin: 10px;
    width: 70%;
    float: left;
}

article{

}

article .gonta{
    width: 50px;
    height: 50px;
    margin: 2px;
    float: left;
    border-radius: 100px;
}
.hulk{
    align-items: center;
}
article .hulk{
    margin: auto;
    display: block;
    width: 70%;
    height: 50%;
}

article p, a{
    padding: 5px;

}

.neon, article h2, p, header nav a {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: justify;
	color: #fff;
  	text-shadow:
		0 0 5px rgb(247, 0, 255,1),
		0 0 10px rgba(247, 0, 255,1),
		0 0 20px rgba(247, 0, 255,1),
		0 0 40px rgba(38,104,127,1),
		0 0 80px rgba(38,104,127,1),
		0 0 90px rgba(38,104,127,1),
		0 0 100px rgba(38,104,127,1),
		0 0 140px rgba(38,104,127,1),
		0 0 180px rgba(38,104,127,1);
}

aside{
    float: right;
    margin: 10px;
    width: 25%;
}

aside h3{
    text-align: center;
    background-color: #afafaf38;
    color: #fff;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

aside ul li, aside ul li a{
    text-indent: 10px;
    display: block;
}

aside ul li a:link, aside ul li a:visited{
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 2rem;
    padding: 10px;
    transition: all 0.5s;

}

aside ul li a:hover, aside ul li a:active{
    text-indent: 20px;
    background-color: #70027a88
}

footer{
background-color: rgba(118, 31, 153, 0.863);  
    clear: both;
    text-align: center;
    color: #fff;
    padding: 10px;
}

footer p{
    font-size: 6rem;
    text-align: center;
}

Rellenar_Espacio con flex-grow

Consegui hacerlo aunque al inicio fue un poco frustante gracias a diego he mejorado y entiendo mucho mas como debo hacer las cosas
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="./style.css">
    <title>Document</title>
</head>
<body>
    <header class="container">
        <figure>
            <img src="https://logos-marcas.com/wp-content/uploads/2021/09/One-Piece-Logo.png" alt="Logo One Piece">
        </figure>
        <nav>
            <ul>
                <li>Escritor</li>
                <li>Personajes</li>
                <li>Leer Manga</li>
            </ul>
        </nav>
    </header>
    <main>
        <aside>
            <div class="div-lay">
                <p>Younkous</p>
                <figure>
                    <img class="img-lay" src="https://static.wikia.nocookie.net/onepiece/images/d/d6/Los_Cuatro_Emperadores.png/revision/latest?cb=20170519132944&path-prefix=es" alt="Younkous">
                </figure>
            </div>
            <div class="div-lay">
                <p>SuperNovas</p>
                <figure>
                    <img class="img-lay" src="https://static.wikia.nocookie.net/onepiece/images/b/ba/La_peor_generaci%C3%B3n.png/revision/latest?cb=20130331151918&path-prefix=es" alt="SuperNova">
                </figure>
            </div>
            <div class="div-lay">
                <p>Marine</p>
                <figure>
                    <img class="img-lay" src="https://static.wikia.nocookie.net/onepiece/images/b/be/Cuartel_general_de_la_Marine.png/revision/latest?cb=20210119210120&path-prefix=es" alt="">
                </figure>
            </div>
        </aside>
        <section>
            <h1>Mugiwaras</h1>
            <figure class="figu-mugi">
                <img class="img-mugi" src="https://i.ytimg.com/vi/Gan81b7kkrA/maxresdefault.jpg" alt="Los mugi">
            </figure>
            <p class="text-mugi">Los Piratas de Sombrero de Paja (麦わらの海賊団 Mugiwara no Kaizoku-dan), principalmente conocidos como la Banda de Sombrero de Paja (麦わらの一味 Mugiwara no Ichimi), es una banda de piratas originaria del East Blue, pero tiene miembros de diferentes partes del mundo. Ellos son el foco y los principales protagonistas de la trama del manga y el anime de One Piece, siendo capitaneados por el protagonista principal de la serie, Monkey D. Luffy.</p>
        </section>
    </main>
    <footer>
        <figure>
            <img class="img-footer" src="https://logos-marcas.com/wp-content/uploads/2021/09/One-Piece-Logo.png" alt="Logo One Piece">
        </figure>
        <div class="about">
            <p class="p-footer">Realizador Por</p>
            <p class="p-footer">Felipe Calderón</p>
        </div>
    </footer>
</body>
</html>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
    color: white;
}
body{
    font-size: 1.6rem;
}
/* Header */
.container{   
    display: flex; 
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: cadetblue;    
    border: 0.5rem solid black;
}
figure img{
    height: 10rem;
    width: 15rem;
}
nav{
    display: flex;
}
nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
li{
    list-style: none;
    margin: 1rem;
    font-size: 2rem;
}

/* Contenido */
main{
    display: flex;
    background-color: purple;
    
    
}
aside{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    border-left: 0.5rem solid black ;
    border-bottom: 0.5rem solid black ;
}
div p{
    margin: 0.2rem;
    color: black;
}
.div-lay{
    display: flex;
    margin: 1rem;
    flex-wrap: nowrap;
    flex-direction: column;
    background-color: peachpuff;
    align-items: center;
}
.img-lay{
    width: 15rem;
    height: 10rem;
}
section{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border-right: 0.5rem solid black ;
    border-left: 0.5rem solid black;
    border-bottom: 0.5rem solid black;    
}
h1{
    text-align: center;
    font-size: 4rem;
    margin: 2rem;
}
.figu-mugi{
    margin: 2rem;
    display: flex;
    justify-content: center;
}
.img-mugi{
    width: 40rem;
    height: 20rem;
}
.text-mugi{
    font-size: 3.2rem;
    text-align: justify;
    margin: 1rem;
}

/* Footer */
footer{
    display: flex; 
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: cadetblue;    
    border-bottom: 0.5rem solid black;
    border-left: 0.5rem solid black;
    border-right: 0.5rem solid black;
    align-items: center;
}
.img-footer{
    margin: 0.1rem;
    height: 7.3rem;
    width: 12rem;
}
.p-footer{
    margin-right: 1rem;
    font-size: 3.2rem;
    color: white;
}

Desafío cumplido :¨v no era lo que esperaba pero estoy satisfecho.

<!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>Desafio 2</title>
</head>
<body>
    <header class="header__title">
        <figure>
            LOGO
        </figure>
       
       
        <nav class="nav__container">
            <a href=""></a>
            <ul>
               <li ><a href="">Home</a></li>
               <li> <a href="">Cursos</a></li>
               <li> <a href="">Instrucciones</a></li>
               <li> <a href="">Blog</a></li>                 
            </ul>               
        </nav>     
   </header>

       <main class="container">
        <article class="box1 box">
            <p>Modelo 1</p>
        </article>
        <article class="box2  box">
            <p>Modelo 2</p>
        </article>
        <article class="box3 box">
            <p>Modelo 3</p>
        </article>
        <article class="box4 box">
            <p>Modelo 4</p>
        </article>
        
</main>
<aside  class="container__aside">
    <div class="box_aside item_aside">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt inventore commodi id fuga sint magnam a laborum. Exercitationem ut sint magni eos minima? Vitae, error esse. Ad sit tempore expedita?</div><!-- box_aside contendor de caja -->
</aside>
</body>

<footer class="footer"> <!-- contenedor padre -->
    <p class="box__footer box"> Datos</p> <!-- hijos class -->
 
</footer>
</body>
</html>
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
body{
    font-size: 1.8rem;


}
.header__title{
   
    background-color: rgb(92, 109, 185);

    
    
}
.nav__container ul{
    display: flex;   
    justify-content: flex-end;
    
    list-style-type: none;
    
}
.nav__container a{
    color: black;
    text-decoration: none;
    display: flex;   
    justify-content: flex-end;
    padding: 2rem;
    list-style-type: none;
    
}
.container{ /*contnenedor padre  */
    height:81vh;
    
    border: 0.3rem black solid;
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
    background-color: rgb(114, 250, 186)
}
    
body{
    background-color: yellowgreen;
    font-size: 2.5rem;
}
    


.box{ /*contnenedor hijo que hereda  */

    
    width: 23rem;
    height: 15rem;
   
    border-radius: 1rem;

}
.box1{/*contnenedor hijo que hereda  */
    background-color: rgb(189, 190, 219);

}
.box2{/*contnenedor hijo que hereda  */
    background-color: rgb(174, 106, 236);
    
}

.box3{/*contnenedor hijo que hereda  */
    background-color: cadetblue;
}

.box4{/*contnenedor hijo que hereda  */
    background-color: rgb(173, 58, 81);
    
}



.box6{/*contnenedor hijo que hereda  */
    background-color: beige;
    
}

.container__aside{
    position: absolute;
  left: 20vh;
  width: 15vh;
  bottom: 81vh;
  

 
}
  
.box_aside{ /* Adentro de la caja */
    width: 22rem;
    height: 10rem;

   
    
 
   
}
.item_aside{
    width: 50rem;
    

    
}


.footer {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: rgb(92, 109, 185);
    padding: 0.1rem;
    
}

Desafío logrado!!!

ANTES

DESPUÉS

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>
        <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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}
body {
  width: 100vw;
  height: 100vh;
  font-size: 2rem;
}
header {
  height: 9rem;
  display: flex;
  justify-content: space-between;
  background-color: pink;
}
nav {
  width: 30vw;
}
nav ul {
  display: flex;
  justify-content: space-around;
}
figure {
  padding-left: 20px;
  margin-top: 25px;
}
nav ul li {
  list-style: none;
  margin-top: 25px;
}
main {
  height: 45rem;
  display: flex;
  background-color: grey;
}
aside {
  width: 30%;
  display: flex;
  background-color: salmon;
}
main aside ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
main section {
  text-align: justify;
}
aside ul li {
  width: 200px;
  height: 80px;
  padding-left: 10px;
  list-style: none;
  background-color: brown;
}
footer {
  height: 8.5rem;
  display: flex;
  align-items: center;
  background-color: darkorange;
}

Volví a hacer la maqueta del Layout ahora con flexbox, fue infinitamente menos estresante y más fácil

Desafio logrado. Antes habia hecho el layout con los conocimientos que tenia de display: inline-block y position, pero ahora lo modifique todo e incorporé display: flex.

Comparto mi codigo
HTML

CSS


Aqui comparto otro intento XD

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">
<link rel=“stylesheet” href="./style2css">
</head>
<body>
<header>
<nav>este es el menu</nav>
</header>
<main>
<aside>
<ul>
<li>Categoria 1</li>
<li>Categoria 2</li>
<li>Categoria 3</li>
<li>Categoria 4</li>
</ul>
</aside>
<article>
<section class=“Incidencia”>
<figure>
<img src="./img/Edificio Pardo.png" alt=“Edificio Pardo” width=“100%”>
</figure>
<P>Edificio Pardo</P>

        </section>
    </article>
</main>
<footer>pie de página</footer>

</body>
</html>

css

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

header{
background-color: blue;
height: 5vh;
}

main{
margin: 0%;
display: flex;
height: 85vh;
align-items: stretch;
}

aside{
width: 30%;
display: flex;
background-color: rgb(48, 108, 112);
}

main aside ul {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
aside ul li {
width: 250px;
height: 150px;
padding-left: 10px;
list-style: none;
background-color: brown;
}
figure{
width: 100%;;
}

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

En esta clase aprendí que el stretch es super útil para “estirar” o “rellenar” todo.
Y el “baseline” para que la caja se adapte al contenido (texto).
flex-wrap y flex-grow también tienen mucha aplicación, le veo mucho potencial para el responsive. 😄

Me costó mucho antes de flexbox, y este en menos de 10 minutos quedó 😄

mucho mas sencillo

Versión realizada con flex.
(

Mucho mas fácil todo con Flex, esto fue lo que logre.

Tanto que nos hizo sufrir con el desafio anterior, a mi por poco me toco ir casi contando los pixeles para que coincidan colocando 108.3px jaja pero con esto se facilita bastante

Que genial! Antes no me habia quedado bien pero ahora lo pude arreglar con flexbox. 😀

Por si quieren el código les dejo aquí