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

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

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

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

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

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 76

Preguntas 33

Ordenar por:

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

隆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

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.

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

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

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

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

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!

Column Drop:

Las propiedades min-height, min-width, max-height y max-widt son muy importantes en situaciones como la siguiente: Imagina que tienes tu dise帽o todo chido verticalmente en tu dispositivo m贸vil, con cuatro elementos que ocupan cada uno el 25% de alto, hasta ah铆, todo chido. Peeero, si el usuario decide colocar horizontalmente su dispositivo m贸cil, ese 25% se convertir谩 en algo a煤n m谩s peque帽o verticalmente, y es posible que el texto o imagenes no queden como t煤 quieres. Entonces, al definir tanto una medida m铆nima y m谩xima, "habilitamos" el scroll y evitamos que se distorsione el contenido.

鈥淐olumn drop鈥 is a responsive web design technique that involves changing the layout of columns when the screen size is reduced. This is often achieved using CSS media queries to adapt the layout based on the available screen width.

Here鈥檚 a simple example of a column drop using CSS:

css
Copy code
/* Default styles for larger screens */
.column-container {
display: flex;
}

.column {
flex: 1;
/* Other styles鈥 */
}

/* Media query for smaller screens /
@media screen and (max-width: 600px) {
.column-container {
flex-direction: column; /
Change to a vertical layout */
}
}
In this example, there is a container with a flex display that arranges its children (columns) horizontally. When the screen width is 600 pixels or less, a media query is used to change the flex-direction property to column, making the columns stack vertically.

HTML structure might look like this:

html
Copy code
<div class=鈥渃olumn-container鈥>
<div class=鈥渃olumn鈥>Column 1 content</div>
<div class=鈥渃olumn鈥>Column 2 content</div>
<!-- Add more columns as needed -->
</div>
Adjust the styles and media query breakpoints based on your specific layout and design requirements. This approach provides a more user-friendly experience on smaller screens by allowing content to be displayed in a single column, making it easier to read and navigate.

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

No usaste el order para nada, hay que procurar no escribir c贸digo que se ejecuta y no aporta nada a la presentaci贸n de los elementos, realiza procesos innecesarios.

mobile

tablet

desktop

TV-FullHD

Introducci贸n al Column Drop:

  • El Column Drop es el 煤ltimo patr贸n que exploraremos para hacer que un proyecto crezca desde un enfoque mobile-first o mobile-only.
  • En este patr贸n, los contenedores se disponen de forma vertical, y al crecer la pantalla, se produce un 鈥渄rop鈥 de los contenedores, reposicion谩ndolos de manera eficiente.

Estructura de Archivos y Configuraci贸n Inicial:

  • Utilizamos un archivo HTML con un contenedor principal y cinco contenedores hijos.
  • En el archivo CSS, se establece el estilo base y se aplica el formato flex para el contenedor principal y dimensiones para los contenedores internos.
<!-- En el archivo index.html -->
<main class="container">
  <div class="c1"></div>
  <div class="c2"></div>
  <div class="c3"></div>
  <div class="c4"></div>
  <div class="c5"></div>
</main>
/* En el archivo style.css */
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

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

/* Clases de dimensiones y colores para diferenciar contenedores */
.c1, .c2, .c3, .c4, .c5 {
  height: 150px;
  border: 2px solid #333;
  margin: 10px;
}

.c1 { background-color: #FFC300; }
.c2 { background-color: #FF5733; }
.c3 { background-color: #C70039; }
.c4 { background-color: #900C3F; }
.c5 { background-color: #581845; }

Implementaci贸n de Media Queries:

  • Se agregan dos breakpoints mediante media queries: uno en 600 p铆xeles y otro en 800 p铆xeles.
  • Se ajustan los estilos de los contenedores para adaptarse a los cambios en el dise帽o responsive.
/* En el archivo style.css - Media Query para 600px */
@media (min-width: 600px) {
  .c1 { width: 30%; order: 1; }
  .c2 { width: 40%; order: 2; }
  .c3 { width: 30%; order: 3; }
}

/* En el archivo style.css - Media Query para 800px */
@media (min-width: 800px) {
  .c1 { width: 30%; order: 1; }
  .c2 { width: 40%; order: 2; }
  .c3 { width: 30%; order: 3; }
  .container { width: 800px; margin: 0 auto; }
}

Resultados y Observaciones:

  • Se observa el cambio en la disposici贸n de los contenedores al modificar el ancho y el orden a trav茅s de media queries.
  • El Column Drop permite que los contenedores se reposicionen eficientemente a medida que crece la pantalla.

Conclusi贸n y Pr贸ximos Pasos:

  • Con la implementaci贸n del Column Drop, se han explorado tres patrones principales en dise帽o responsive.
  • Se menciona la complejidad variable de cada patr贸n y su aplicabilidad en proyectos reales.
  • En la siguiente clase, se analizar谩n ejemplos de p谩ginas web que utilizan estos patrones, proporcionando una visi贸n pr谩ctica de su implementaci贸n.

隆En la siguiente clase, exploraremos ejemplos reales de p谩ginas web que emplean estos patrones responsive y tambi茅n abordaremos el trabajo con im谩genes de forma responsive!

.

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.

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!