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 59

Preguntas 28

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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


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 😃

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.

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.

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 “dejamos 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.

código 👈

Móvil

Tableta

Escritorio

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

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

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

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

La más fácil de implementar pero según veo en proyectos reales es la menos usada 😕

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

saludos!

y no se tratara css grid en el curso?

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

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

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

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.

Practica antes de video:

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

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.

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.

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

Column drop reposiciona los bloques de contenido “aventandoslos” 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

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

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

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.

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

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%;
      
        
      }
  }
Que frustración 😢😢 no si se estoy haciendo algo mal 😫😓

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!

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