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 鈥渙rder鈥 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=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Layout</title>
<link rel=鈥渟tylesheet鈥 href="./style.css">
<link rel=鈥渟tylesheet鈥 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=鈥淚ncidencia鈥>
<figure>
<img src="./img/Edificio Pardo.png" alt=鈥淓dificio 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 鈥渆stirar鈥 o 鈥渞ellenar鈥 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铆