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

Column drop

48/55
Recursos

Aportes 70

Preguntas 33

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

隆Hey! 馃槃,
.
Recuerda repasar toda la gran informaci贸n que hemos recibido en este curso. Te dejo un resumen del curso completo en este enlace que te ayudar谩 a estudiar para el examen y a no olvidar los conceptos.

S煤per 煤til el uso de Flex, justo ahora que estoy actualizando mi portafolio me funcionar谩 perfecto

A mi en lo personal me gusta m谩s Mostly Fluid, me gusta que todo fluya, pero a veces me gusta aventarme a cosas m谩s locas como Layout Shifter, y cuando ando con muchas ganas de front end hasta meto animaciones jaja Esto es genial porque ya con todo esto eres capaz de crear una p谩gina web decente, incluso puedes empezar a crear landing pages y venderlas!

Un breve resumen de los patrones de dise帽o para complementar (Texto tomado desde developers.google.com):

Mostly Fluid


El patr贸n Mostly fluid consiste, principalmente, en una cuadr铆cula fluida. Por lo general, en las pantallas grandes o medianas se mantiene el mismo tama帽o y simplemente se ajustan los m谩rgenes en las m谩s anchas.

Column Drop


En el caso de los dise帽os con varias columnas de ancho completo, durante el proceso de colocaci贸n de columnas 茅stas 煤nicamente se colocan de forma vertical debido a que el ancho de la ventana es demasiado reducido para el contenido.

Layout shifter


El patr贸n Layout shifter es el m谩s adaptable, ya que posee varios puntos de interrupci贸n en diferentes anchos de pantalla.

La clave para este dise帽o es el desplazamiento del contenido, en lugar de su reprocesamiento y colocaci贸n debajo de otras columnas. Debido a las diferencias significativas entre cada punto de interrupci贸n principal, es m谩s complejo de mantener, y es posible que se deban realizar cambios dentro de los elementos, no solo en el dise帽o de contenido general.

vine siendo un ni帽o, pero me ir茅 siendo un programador鈥



HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)">
    <link rel="stylesheet" href="./laptop.css" media="screen and (min-width: 800px)">
    <title>Document</title>
</head>
<body>
    <main class="container">
        <div class="c c1"></div>
        <div class="c c2"></div>
        <div class="c c3"></div>
        <div class="c c4"></div>
    </main>
</body>
</html>

style.css

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

html
{
    font-size: 62.5%;
}

.container
{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1300px;
    height: 100vh;
    padding: 3rem;
    margin: 0 auto;
}

.c
{
    width: 100%;
    /* min-width: 1500px; */
    height: calc(24vh - 3rem);
    margin-bottom: 3rem;
    border-radius: 10px;
}

.c1
{
    background-color: #c72929;
}

.c2
{
    background-color: #df6060;
}

.c3
{
    background-color: #e4b342;
}

.c4
{
    background-color: #a0db32;
    margin: 0;
}

tablet.css

.c
{
    height: calc(30vh - 1rem);
}

.c1, .c2
{
    height: calc(20vh - 1rem);
}

.c1
{
    width: 24%;
}

.c2
{
    width: 74%;
}

.c3
{
    height: calc(25vh - 1rem);
}

.c4
{
    height: calc(44vh - 1rem);
}

latop.css

.c
{
    height: calc(20vh - 1rem);
    margin-bottom: 1rem;
}

.c1
{
    width: 19%;
}

.c2
{
    width: 29%;
}

.c3
{
    width: 49%;
}

.c4
{
    height: calc(74vh - 1rem);
    margin-bottom: 0;
}

Comparto una herramienta que me ayud贸 mucho con el desaf铆o de la clase anterior. Mientras preparaba todo el responsive lo fui probando en Chrome y, una vez que termin茅 y todo qued贸 como yo quer铆a se me ocurri贸 probarlo en Firefox. Para mi sorpresa no andaba para nada igual, todos los estilos se ve铆an mal y el responsive estaba bastante roto.


Soluci贸n:
Encontr茅 este sitio web, en el cual puedes pegar tu CSS y te lo devuelve con todos los prefijos de los atributos necesarios para que los estilos de tu web se adapten bien a las caracter铆sticas particulares de cada navegador. Pas茅 por ah铆 mis tres hojas de estilo y al volverlo a probar en Firefox andaba perfecto, igual que en Chrome.


Espero que les sirva 馃槂

Encontr茅 este post en Google Developers que muestra otras funciones. Espero que les sirva.
https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=es

Sigo sin entender la diferencia de las 3:( 驴Alguien me puede explicar con manzanas y palitos?

aqui les pongo mi aporte, creo voy mejorando.


Asi quedo mi desafio pero tengo algunos problemas alineando los links del header y centrando el contenedor de las cards, he intentado de todo pero no he podido

Mobile

Tablet

Desktop

En este caso NO ES NECESARIO definir la propiedad order鈥
Hola muchachos, ahora me explico:
La propiedad order la usaremos cuando queramos reposicionar los elementos alterando el orden establecido en el que fueron escritos en el html.
El valor por defecto de order es 0, es por eso que cuendo definimos order: 1 este elemento pasa al final de todos los demas, el resto se muestra segun fueron escritos en el html.
Esta propiedad tambien puede tomar valores negativos.
Un tip seria usar valores de 10 en 10 para poder repocisionar elementos que no hayamos tenido en cuenta entre los ya posicionados.
Entiendiendo esto, espero se puedan ahorrar unas cuantas lineas de css.

Bueno aqui puedes ver Online mi implementaci贸n de Column Drop Tambien aqui te dejo el Repositorio para no llenar esta clase con codigo.
Saludos 馃槂

c贸digo 馃憟

M贸vil

Tableta

Escritorio

Column Drop es un patr贸n que nos acompa帽a desde la 茅poca donde RD se hac铆a Desktop First all谩 por la d茅cada pasada.
Como su nombre lo indica, cuando un layout en desktop tiene m煤ltiples columnas, a medida que el viewport se reduce 鈥渄ejamos caer鈥 cada columna debajo de la anterior, es decir, las apilamos.

Link a la web de Google Developers con m谩s info sobre este y otros patrones de Responsive Web Design.

Column Drop es a mi parecer uno de los patrones o estrategias de dise帽o que mejor se adapta mas ordenado.

Bastante sencilla la aplicaci贸n, pero todo se complica cuando lo practicamos. Pero de eso se trata, de ir avanzando y nunca parar de aprender.

La m谩s f谩cil de implementar pero seg煤n veo en proyectos reales es la menos usada 馃槙



<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="robots">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>League of Legends</title>
    <link rel="stylesheet" href="./css/estilos.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Aboreto&family=Bebas+Neue&family=Permanent+Marker&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <img class="logo" src="./img/logo.jpg" alt="Logo League of legends">
        <nav class="menu">
            <a href="" class="menu-lista">Inicio</a>
            <a href="" class="menu-lista">Personajes</a>
            <a href="" class="menu-lista">Rutas de la JG</a>
            <a href="" class="menu-lista">Smites</a>
        </nav>

        <img class="inicio" src="./img/Inicio-principal.jpg" href="#" alt="League of legends"></img>

    </header>

    <main class="container">

        <div class="presentacion">
        <h1>Que es League of legends?</h1>
        <p>League of Legends (tambi茅n conocido por sus siglas LoL o tambi茅n como Lolsito), es un videojuego multijugador de arena de batalla en l铆nea desarrollado y publicado por Riot Games. Inspir谩ndose en Defense of the Ancients, un mapa personalizado para Warcraft III, los fundadores de Riot buscaron desarrollar un juego independiente del mismo g茅nero. Desde su lanzamiento en octubre de 2009, LoL ha sido un juego gratuito y se monetiza a trav茅s de la compra de elementos para la personalizaci贸n de personajes. El juego est谩 disponible para Microsoft Windows y macOS.</p>
        <br>
        <p>En el juego, dos equipos de cinco jugadores luchan en un combate jugador contra jugador, cada equipo ocupando y defendiendo su mitad del mapa. Cada uno de los diez jugadores controla un personaje, conocido como "campe贸n", con habilidades 煤nicas y diferentes estilos de juego. Durante una partida, los campeones se vuelven m谩s poderosos acumulando puntos de experiencia y ganando oro que se emplea para la compra de art铆culos para derrotar al equipo contrario. En el modo principal de juego de LoL, League, "La Grieta del Invocador", un equipo gana al abrirse paso hasta la base enemiga y destruir su "nexo", una gran estructura ubicada dentro de la cual se emanan tres l铆neas de s煤bditos o "minions", personajes no jugadores que al ser eliminados por el equipo enemigo otorgan oro y experiencia.</p> 
        </div>
        <div class="personajes">
           <h1>Personajes</h1>
           <h2>Graves</h2>
           <img src="./img/personajes/graves.jpg" alt="personaje de league of legends" class="campeones">
           <h2>Kindred</h2>
           <img src="./img/personajes/kindred.jpg" alt="personaje de league of legends" class="campeones">
           <h2>Volibear</h2>
           <img src="./img/personajes/volibear.jpg" alt="personaje de league of legends" class="campeones">
           <h2>Zac</h2>
           <img src="./img/personajes/zac.jpg" alt="personaje de league of legends" class="campeones">
           <h2>Zed</h2>
           <img src="./img/personajes/zed.jpg" alt="personaje de league of legends" class="campeones">
           <h2>Hecarim</h2>
           <img src="./img/personajes/hecarim.jpg" alt="personaje de league of legends" class="campeones">
        </div>
        <div class="consejos">
            <h2>Consejos para ser un buen Jungla en LoL</h2>
            <p>El Jungla debe comprender c贸mo piensa su rival.</p><br>
            <p>Un buen Jungla debe saber cu谩ndo gankear y cuando no hacerlo.</p><br>
            <p>Saber tus prioridades como Jungla en LoL es fundamental.</p>
        </div>
        <div class="ruta">
            <h1>Rutas de la JG</h1>
            <img src="./img/rutas.jpg" alt="Imagen de league of legends">
        </div>
        <div class="objetivos">
            <h2>驴Cu谩les son los objetivos del jungla?</h2>
            <p>Jungla o Jungler se considera una posici贸n similar a ir a un carril pero que involucra matar a los "Monstruos" neutrales localizados en las zonas entre las l铆neas. Los Junglers se dedican a "farmear" los campamentos disponibles en la Jungla.</p>
        </div>
        <div class="smite">
            <h2>驴Cu谩l es la diferencia entre Smite rojo y azul?</h2>
            <img src="./img/smites.jpg" alt="Smites de League of legends">
            <p>El Golem azul te da mayor reducci贸n de enfriamiento y regeneraci贸n de mana, y el Esp铆ritu rojo te dar谩 la posibilidad de dar quemadura al atacar,da da帽o verdadero y da una peque帽a ralentizaci贸n.</p>
        </div>
        <div class="pathing">
            <h2>驴Qu茅 es Pathing en League of Legends?</h2>
            <p>La decisi贸n m谩s importante a la hora de empezar una partida como jungler es la ruta. Conocida en ingl茅s como pathing, es clave en todos los momentos de la partida, pero especialmente durante nuestro primer paso por cada campamento. El planteamiento inicial determinar谩 buena parte de nuestro 茅xito en la partida.</p>
        </div>

    </main>



    <footer>
        <a href="#">Volver al Inicio</a>
        <a href="#">Descarga League of Legends</a>
    </footer>

</body>
</html>
:root {
    --primary-color: rgb(248, 248, 7);
    --border-image: 3px solid rgb(248, 248, 7);
}

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


html {
    font-family: 'Aboreto', cursive;
    font-family: 'Bebas Neue', cursive;
    font-family: 'Permanent Marker', cursive;
    background-color: rgb(59, 110, 139);
    color: rgb(227, 232, 237);
}

header {

    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    width: 100px;
    border: 1px solid rgb(248, 248, 7);
}

.menu {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 20px;
    
    
}

.menu-lista{
    text-decoration: none;
    color: rgb(255, 255, 255);
    text-decoration:underline var(--primary-color);
}

.menu-lista:hover {
    color: rgb(248, 248, 7);
}


.inicio {
    width: 400px;
    border: 5px solid rgb(189, 200, 39);
    border-radius: 5px;
    margin: 15px 5px 15px 5px;

}

.container , .presentacion, .personajes , .consejos , .ruta , .objetivos, .smite , .pathing{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.presentacion p{
    font-size: 18px;
    width: 80%;
    margin: 20px 5px 10px 5px;

}

.personajes h1 {
    font-size: 35px;
    margin: 20px 0px 30px 0px;
}

.personajes h2 {
    margin-top: 20px;

}

.campeones {
    width: 400px;
    border: var(--border-image);
    border-radius: 10px;
    margin-top: 10px;
}

.consejos h2 {
    text-align: center;
    margin-top: 30px;
}

.consejos p {
    width: 80%;
    margin:20px 0px 30px 0px;

}

.ruta img{
    width: 400px;
    border: var(--border-image);
    margin-bottom: 30px;
}

.ruta h1 {
    margin-bottom: 20px;
}

.objetivos{
    text-align: center;
    width: 80%;
    margin: 20px 0px 20px 0px;
}

.objetivos p {
    text-align: left;
    margin-top: 20px;
}


.smite h2 {
    text-align: center;
}

.smite img {
    width: 400px;
    border: var(--border-image);
    border-radius: 10px;
    margin: 20px 0px 20px 0px;
}

.smite p {
    width: 80%;
    margin: 15px 0px 20px 0px;
}

.pathing {
    text-align: center;
}

.pathing p {
    text-align: left;
    width: 80%;
    margin: 15px 0px 20px 0px;
}
footer {
    display: flex;
    justify-content: space-between;
}

footer a{
    text-decoration: underline var(--primary-color);
    color: aliceblue;
    margin: 20px;
}

footer a:hover {
    color: var(--primary-color);
}

@media (min-width:800px) {
    .logo {
        width: 200px;
        border: 2px solid rgb(248, 248, 7);
    }
    .menu-lista {
        font-size: 30px;
    }

    .inicio {
        width: 80%;
    }

    .campeones {
        width: 700px;
    }

    .container h1 {
        font-size: 50px;
    }

    .container h2 {
        font-size: 35px;
    }

    .container p {
        font-size: 25px;
    }

    .ruta img {
        width: 700px;
    }

    .smite img {
        width: 700px;
    }

    footer a{
        font-size: 30px;
    }
}

@media (min-width:1000px) {
    header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: rgb(71, 127, 210);
    }
    .logo {
        width: 100px;
        align-self: flex-start;
    }
    .menu {
        justify-content: space-around;
        align-self:flex-end;
    }
    .menu a {
        font-size: 20px;
    }
    .inicio {
        width: 300px;
    }
}

@media (min-width:1200px) {
    header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: rgb(71, 127, 210);
    }
    .logo {
        width: 150px;
        align-self: center;
    }
    .menu {
        justify-content: space-around;
        align-self:center;
    }
    .menu a {
        font-size: 35px;
    }

    .inicio {
        width: 400px;
    }

    .campeones {
        width: 1000px;
    }

    .container h1 {
        font-size: 50px;
    }

    .container h2 {
        font-size: 35px;
    }

    .container p {
        font-size: 25px;
    }

    .ruta img {
        width: 1000px;
    }

    .smite img {
        width: 1000px;
    }

    footer a{
        font-size: 35px;
        margin-top: 100px;
    }
}

Column Drop: En este patr贸n se tiene todo de forma vertical pero a la hora de que va creciendo el contenido empieza a arrojar los contenedores y los reposiciona a la l铆nea principal, secundaria, etc鈥 En este no se limita el crecimiento del container porque queremos que se estire por completo, que ocupe todo el ancho de la pantalla.

a las personas quue aun no entienden como hacer este tipo de layout o cualguier otro les recomiendo familiarizarse viendo videos en youtube de personas haciendo layaouts de todo tipo espero y les ayude

y no se tratara css grid en el curso?

Les dejo un enlace a un post hecho en Google donde explican lo de los patrones de dise帽os responsive.
Patrones de dise帽o web adaptables

tengo problemas con @media; tal parece no me respeta el mobile y me cambia las dimensiones incluso es -600 px
@media (min-width: 600px){
.c1{
width: 25%;
order: 1;
}
.c2{
width: 75%;
order: 2;
}
.c3{
width: 100%;
order: 3;
}
.c4{
width: 100%;
order: 4;
}
.c5{
width: 100%;
order: 5;
}
}

Clase 48 - Column Drop


驴C贸mo funciona Column Drop?

  • Este patr贸n usa la metodolog铆a Mobile first, por lo cual empezaremos organizando nuestro elementos como si fueran columnas descendentes que ocupen todo el ancho disponible. En este patr贸n lo que ocurrir谩 a medida en que vamos aumentando el tama帽o de la pantalla nuestros elementos se posicionar谩n una fila arriba de su lugar de origen.
    Ejemplo:

驴Debemos de declarar la propiedad order nuevamente en un Media Query diferente en el que ya la declaramos?

  • No, el orden se seguir谩 respetando.
Que frustraci贸n 馃槩馃槩 no si se estoy haciendo algo mal 馃槴馃槗

RESUMEN CLASE 48:
COLUMN DROP

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

<body>
    <main class="container">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
        <div class="c4"></div>
        <div class="c5"></div>
    </main>
</body>

</html>

CSS

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

html {
    font-size: 62.5%;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.c1,
.c2,
.c3,
.c4,
.c5 {
    width: 100%;
    min-width: 150px;
    height: 150px;
}

.c4 {
    height: auto;
}

.c1 {
    background-color: #003476;
}

.c2 {
    background-color: #0062d2;
}

.c3 {
    background-color: #b4d2f7;
}

.c4 {
    background-color: #d5dfef;
}

.c5 {
    background-color: #dfe1e5;
}

@media (min-width: 600px) {
    .c1 {
        width: 25%;
        order: 1;
    }

    .c2 {
        width: 75%;
        order: 2;
    }

    .c3 {
        width: 100%;
        order: 3;
    }

    .c4 {
        width: 100%;
        order: 4;
    }

    .c5 {
        width: 100%;
        order: 5;
    }
}

@media (min-width: 800px) {
    .c1 {
        width: 30%;
    }

    .c2 {
        width: 40%;
    }

    .c3 {
        width: 30%;
    }

    .c4 {
        width: 50%;
    }

    .c5 {
        width: 50%;
    }
}

Column Drop
Este patr贸n consiste en que cada bloque de contenido, que en un smartphone vemos en filas, vaya formando columnas seg煤n vaya siendo m谩s grande la pantalla del dispositivo.

Es de los primeros cursos de HTML y CSS donde veo que hablan de patrones de dise帽o. Creo que es algo important铆simo a la hora de aprender a maquetar y que nunca se explica.
Gran aporte y gran ense帽anza, a veces Platzi te sorprende de esta grata forma.

Patrones de dise帽o web adaptables: Lo m谩s utilizados:
*Mostly fluid.
*Layout shifter.
*Column drop.
*Tiny tweaks.
*Off canvas.

EXCELENTES TEMAS, BATALLE UN POCO PERO AUN DEBO DE ESTUDIARLOS MAS 馃槃

Aqu铆 dejo el link de una p谩gina donde pueden encontrar m谩s informaci贸n sobre algunos patrones Responsive Los 5 patrones del Responsive Design con Flexbox.

https://www.youtube.com/watch?v=C1J__Iz1CH4
miren este dato de: 5 errrores comunes que cometemos con Css layout.

saludos!

Nunca hab铆a escuchado de patrones de dise帽o en CSS鈥e me hizo un poco dif铆cil entender los dos primeros patrones pero este si estuvo m谩s f谩cil鈥 tendr茅 que volver a ver la clase para entenderlos.

脕nimos siempre que se puede!!!

Colocaci贸n de columnas (Column Drop)

En el caso de los dise帽os con varias columnas de ancho completo, durante el proceso de colocaci贸n de columnas 茅stas 煤nicamente se colocan de forma vertical debido a que el ancho de la ventana es demasiado reducido para el contenido.

En un momento dado, todas las columnas se apilan verticalmente. La selecci贸n de puntos de interrupci贸n para este patr贸n de dise帽o depende del contenido y cambia para cada dise帽o.

Como sucede con los ejemplos que son principalmente fluidos, el contenido se coloca verticalmente en la vista m谩s peque帽a, pero a medida que se expande la pantalla a m谩s de 600 p铆xeles, los div de contenido principal y secundario ocupan todo el ancho de la pantalla. El orden de los div se configura con la propiedad CSS de orden. Con 800 p铆xeles, se muestran los tres div de contenido en todo el ancho de la pantalla.
Ejemplo:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 60%;
    -webkit-order: 2;
    order: 2;
  }

  .c2 {
    width: 40%;
    -webkit-order: 1;
    order: 1;
  }

  .c3 {
    width: 100%;
    -webkit-order: 3;
    order: 3;
  }
}


@media (min-width: 800px) {
  .c2 {
    width: 20%;
  }

  .c3 {
    width: 20%;
  }
}

@media (min-width: 600px) {
    .c1 {
        width: 25%;
        order: 1;
    }
    .c2 {
        width: 75%;
        order: 2;
    }
    .c3 {
        width: 100%;
        order: 3;
    }
    .c4 {
        width: 100%;
        order: 4;
    }
    .c5 {
        width: 100%;
        order: 5;
    }
}
@media (min-width: 800px) {
    .c1 {
        width: 30%;
    }
    .c2 {
        width: 40%;
    }
    .c3 {
        width: 30%;
    }
    .c4 {
        width: 50%;
    }
    .c5 {
        width: 50%;
    }
}

Aqui un peque帽o ejemplo de column drop usando la herramienta https://responsively.app/ la cual recomiendo mucho.

Practica antes de video:

UFFFFF, me acabo de pasar una hora viendo porque mi proyecto me estaba dando un overflow (scroll hacia los lados). Hice de todo, investigu茅 en google, lo compar茅 con proyectos anteriores, e incluso lo compar茅 con el codigo del profe; nada funcion贸, luego reinici茅 el navegador, y 驴adivinen que? problema solucionado.

Resumen del capitulo en Notion
https://acortar.link/xGB6Y

Column drop reposiciona los bloques de contenido 鈥渁ventandoslos鈥 hacia arriba.

48.-Column drop

Tenemos todo de forma vertical pero al momento de empezar a crecer el viewport empieza a arrojar a los contenedores.

Excelente explicaci贸n Diego

Muchas gracias, excelente curso, me sirve mucho!!

muy buen video Diego eres uno de los mejores

Estoy flipando con este curso, espero que asi este super detallada toda la escuela de JavaScript鈥

.

Column Drop: consiste en que partimos del contenido de un smartphone; una vez visitamos la pagina desde un dispositivo mas grande, las filas se van transformando en columna. Segun se vaya haciendo mas grande el dispositivo.
Ejemplo grafico no tan grafico
Smartphone: 1.
2.
3.
4.
5.
6.

tablet 7": 1. 2.
3.
4.
5.
6.

tablet 10": 1. 2. 3. 4.
5.
6.

monitor: 1. 2. 3. 4. 5. 6.

Practicando Column Drop 馃槉:

Mobile

Tablet

Desktop

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>Column Drop</title>
    <link rel="stylesheet" href="./mobile.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width:600px)">
    <link rel="stylesheet" href="./desktop.css" media="screen and (min-width:800px)">
</head>
<body>
    <header class="header">
        <p class="header--titulo">Artistas y canciones</p>
    </header>
    <main>
        <section class="section">
            <article class="card">
                <div class="card__header">
                    <p class="card--header_cantante">SHAKIRA</p>
                </div>
                <ul class="card__body">
                    <li class="card--body_cancion">Te Felicito</li>
                    <li class="card--body_cancion">Monoton铆a</li>
                    <li class="card--body_cancion">Hips Don't Lie</li>
                    <li class="card--body_cancion">DON'T YOU WORRY</li>
                    <li class="card--body_cancion">Perro fiel</li>
                </ul>
            </article>
            <article class="card">
                <div class="card__header">
                    <p class="card--header_cantante">Camilo</p>
                </div>
                <ul class="card__body">
                    <li class="card--body_cancion">Manos de tijera</li>
                    <li class="card--body_cancion">Tutu</li>
                    <li class="card--body_cancion">脥ndigo</li>
                    <li class="card--body_cancion">Si me dices que s铆</li>
                    <li class="card--body_cancion">Vida de rico</li>
                </ul>
            </article>
            <article class="card">
                <div class="card__header">
                    <p class="card--header_cantante">Vilma Palma e Vampiros</p>
                </div>
                <ul class="card__body">
                    <li class="card--body_cancion">Bye Bye</li>
                    <li class="card--body_cancion">Todo Lo Que Fue</li>
                    <li class="card--body_cancion">Auto Rojo</li>
                    <li class="card--body_cancion">La Pachanga</li>
                    <li class="card--body_cancion">Mojada</li>
                </ul>
            </article>
            <article class="card">
                <div class="card__header">
                    <p class="card--header_cantante">Daddy Yankee</p>
                </div>
                <ul class="card__body">
                    <li class="card--body_cancion">Gasolina</li>
                    <li class="card--body_cancion">Limbo</li>
                    <li class="card--body_cancion">Dura</li>
                    <li class="card--body_cancion">Rompe</li>
                    <li class="card--body_cancion">La Nueva y La Ex</li>
                </ul>
            </article>
        </section>
    </main>
</body>
</html> 

CSS(Mobile):

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
header{
    width: 100%;
    background-color: darkviolet;
}
.header--titulo{
    padding: 15px 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    text-align: center;
}
.section{
    display: flex;
    flex-wrap: wrap;
    padding: 25px 0;
}
.card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: flex-start;
    width: 85%;
    margin: 5px auto;
    padding: 25px 15px;
    background-color: rgb(232, 158, 245);
    border-radius: 25px;
    border: 5px solid darkviolet;
}
.card__header{
    width: 100%;
}
.card--header_cantante{
    padding: 7px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: underline;
    text-transform: uppercase;
    text-align: center;
}
.card__body{
    list-style-type: revert;
    margin-left: 25px;
}
.card--body_cancion{
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
}

CSS(tablet):

@media (min-width:600px){
    .card{
        width: 45%;
    }
}

CSS(Desktop):

@media (min-width: 800px){
    .card{
        width: 20%;
        margin: 5px;
    }
}

mostly fluid inicia con columnas verticales y se van ajustando en la medida que se va aumentando el tama帽o de pantalla.
<div class=鈥渃ontainer鈥>
<div class=鈥渃1鈥></div>
<div class=鈥渃2鈥></div>
<div class=鈥渃3鈥></div>
<div class=鈥渃4鈥></div>
<div class=鈥渃5鈥></div>
</div>
Layout shifter inicia tambi茅n vertical, y en la medida que cambia la pantalla se comienzan a distribuir unos bloques dentro de otros contenedores padre que se pueden posicionar para brindar un layout diferente
div class=鈥渃ontainer鈥>
<div class=鈥渃1鈥></div>
<div class="c4鈥>
<div class=鈥渃3鈥></div>
<div class=鈥渃4鈥></div>
</div>
<div class=鈥渃5鈥></div>
</div>

Column drop tambi茅n Inicia verticalmente y una vez que crece la pantalla, comienza a posicionar los contenedores hacia arriba seg煤n el orden de importancia que se haya definido
div class=鈥渃ontainer鈥>
<div class=鈥渃1鈥></div>
<div class=鈥渃2鈥></div>
<div class=鈥渃3鈥></div>
<div class=鈥渃4鈥></div>
<div class=鈥渃5鈥></div>
</div>

Column Drop: inciando con mobile first, reacomoda los contenedores uno al lado del otro, de izquierda a derecha en el mismo orden de acuerdo al crecimiento de la pantalla, tratando de mantener uniformidad en el tama帽o de los mismos.

La clave de este modelo, es el tipo de contenido, ya que no todos se puede manipular de la misma forma (texto, imagenes u otros contendores)

El Column drop hace que varios de los elementos como el header o el navbar mantengan su posici贸n fija en la parte superior, mientras los dem谩s vayan siempre orden谩ndose hacia abajo, como es el caso del body y el footer.

Informaci贸n resumida de esta clase
#EstudiantesDePlatzi

  • Al momento de acomodar los contendores y definir el % de espacio que usaran, ellos se van acomodando de arriba hacia abajo

  • Debemos tener claro estos 3 patrones responsive para nuestros dise帽os y crear una buena experiencia de usuario

Genial, muchas gracias

Hola. Les comparto este repositorio que sirve de gu铆a para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificaci贸n y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 馃槃.
Platzi-Test

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

html{

    font-size: 62.5%;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.c1,.c2,.c3,.c4,.c5{

    width: 100%;
   
    height: 150px;
}

.c1 {
    background-color: #003476;
  }
  .c2 {
    background-color: #0062d2;
  }
  .c3 {
    background-color: #b4d2f7;
  }
  .c4 {
    background-color: #d5dfef;
  }
  .c5 {
    background-color: #dfe1e5;
  }


  @media (min-width:600px)
  {
      .c1{

        width: 25%;
        order:1;

      }
      .c2{

        width: 75%;
        order:2;
        
      }

      .c3{

        width: 100%;
        order:3;
        
      }

      .c4{

        width: 100%;
        order:4;
        
      }
      .c5{

        width: 100%;
        order:5;
        
      }
  }

  @media (min-width:800px)
  {
      .c1{

        width: 30%;
        

      }
      .c2{

        width: 40%;
     
        
      }

      .c3{

        width: 30%;
      
        
      }

      .c4{

        width: 50%;
       
        
      }
      .c5{

        width: 50%;
      
        
      }
  }

Mi resumen de las estrategias para responsive design:
Pueden verse los archivos del c贸digo y en vivo. No los dejo aqui, son algo largos. (recordar entrar al inspector y ajustar los anchos de pantalla馃槈)

隆Hey! si alguno aun no entiende muy bien los patrones de dise帽o aqui les dejo un link a la documentacion oficial de developers de google:
https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=es

En este enlace dan un buen resumen de los 5 patrones del responsive incluyendo los 3 que diego menciona https://carlosazaustre.es/los-5-patrones-del-responsive-design
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <main class="container">
      <div class="c1">Juan</div>
      <div class="c2">Carlos</div>
      <div class="c3">Ortiz</div>
      <div class="c4">Romero</div>
      <div class="c5"></div>
    </main>
  </body>
</html>

猸愶笍猸愶笍猸愶笍猸愶笍猸愶笍

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.c1,
.c2,
.c3,
.c4,
.c5 {
  width: 100%;
  min-width: 150px;
  height: 150px;
}
.c1 {
  background-color: #003476;
  font-size: 300%;
    color:aqua;
}
.c2 {
  background-color: #0062d2;
  font-size: 300%;
    color:aqua;
}
.c3 {
  background-color: #b4d2f7;
  font-size: 300%;
    color:rgb(0, 0, 0);
}
.c4 {
  background-color: #d5dfef;
  font-size: 300%;
    color:rgb(0, 0, 0);
}
.c5 {
  background-color: #dfe1e5;
}
@media (min-width: 600px) {
  .c1 {
    width: 25%;
    order: 1;
    
  }
  .c2 {
    width: 75%;
    order: 2;
    
  }
  .c3 {
    width: 100%;
    order: 3;

  }
  .c4 {
    width: 100%;
    order: 4;
    
  }
  .c5 {
    width: 100%;
    order: 5;
  }
}
@media (min-width: 800px) {
  .c1 {
    width: 30%;
  }
  .c2 {
    width: 40%;
  }
  .c3 {
    width: 30%;
  }
  .c4 {
    width: 50%;
  }
  .c5 {
    width: 50%;
  }
}

No es necesario darle width: 100% a .c3, c4, .c5 ya que por defautl ya tiene la orden del 100% (inherit)

Buen curso!