Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es FullStack?

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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Imágenes responsive

50/55
Recursos

Aportes 100

Preguntas 61

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

También podemos usar esta buena práctica para usar de forma diferente nuestros logos:

Usando el curso de Debugging con Chrome Devtools de De Granda y volviendo a esta clase y aplicando la etiqueta picture, pude mejorar mi score en performance de 89% a 99% !

Me encanta este curso, porqué ademas de enseñarte cosas muy buenas, te brinda también como implementar buenas practicas.

Es completamente válido usar <picture> dentro de <figure> y así poder usar el <figcaption> :
.

<figure>
	<picture>
		<source …>
		<source …>
		<source …>
		<img…>
	</picture>
<figcaption></figcaption>
</figure>

.
Fuente: https://stackoverflow.com/questions/12899691/use-of-picture-inside-figure-element-in-html5

Hola! me parece importante acotar algo que observe sobre el uso de las Media Queries en HTML y en CSS:

El orden en como escribimos media queries en CSS es de menor a mayor, siendo la mayor la ultima escrita, esto es porque en CSS las ultimas lineas de un mismo selector sobrescribirán a las primeras, esto es debido a la especificad en CSS. Esto es util sabiendo que trabajamos con minimos de pantalla min-width:. En css las media queries estan orientadas mayormente al diseno
Por ejemplo, una media query de un min-witdh de 800px arriba (escrita primero), no sobreescribira a la del min-width de 1200px

El orden de media queries en HTML es de mayor a menor, porque en HTML el browser renderizara lo primero que encuentre y funcione. Esto es util sabiendo que trabajamos con minimos de pantalla min-width:. En html las media querias estan orientadas mayormente al tamano de imagenes o figuras.
Por ejemplo, una media query con min-witdh de 800px arriba, sobreescribira a la del min-width de 1200px

Nuevas etiquetas de imágenes

<picture> <!-- Agrupa una serie de imágenes. Etiqueta contenedora. -->
<source> <!-- Mostrará la imagen que cumpla una serie de criterios opcionales. -->

Imágenes responsive

Otra ventaja interesante es que con <picture> podemos crear imágenes responsive que cambien dependiendo de características de las media queries (CSS). Por ejemplo, utilicemos min-width (tamaño mínimo de ancho de la pantalla) en el siguiente ejemplo:

<picture>
  <source media="(min-width: 600px)"
          srcset="html5-logo-xl.png" />
  <source media="(min-width: 300px) and (max-width: 600px)"
          srcset="html5-logo-large.png" />
  <source media="(max-width: 50px)"
          srcset="html5-logo-small.png" />
  <img src="html5-logo-medium.png" alt="HTML5 logo" />
</picture>

De esta forma, estamos indicando que se muestren diferentes imágenes dependiendo de la resolución de pantalla (ancho) del dispositivo:

  • Dispositivos muy grandes (más de 600px): Muestra la imagen html5-logo-xl.png
  • Dispositivos grandes (entre 300-600px): Muestra la imagen html5-logo-large.png
  • Dispositivos pequeños (menos de 50px): Muestra la imagen html5-logo-small.png
  • Si no cumple las anteriores (o no soporta HTML5.1): Muestra la imagen html5-logo-medium.png

Recordatorio importantísimo: En imágenes responsivas la propiedad width con valor de 100% es nuestro mejor amigo 😉
.
Pero, recuerda no encajonarla mucho y utilizar la etiqueta <picture> y/o <figure> dependiendo de la necesidad de tu proyecto.
.
Ahora, si necesitas optimizar para cada dispositivo es recomendable utilizar la etiqueta <picture>. Esta etiqueta le da a los desarrolladores mayor flexibilidad a la hora de especificar la fuente de la imagen.
.
Por acá comparto unos recursos:

  1. HTML <picture> Tag
  2. <picture>: The Picture element

Increíble, esto que si no lo conocía, lo empezaré a implementar, aunque también hubiese estado genial hablar del lazy loading para las imágenes porque también ayudan a mejorar el performance de las páginas ^^

width: 100% funciona si la imagen es lo suficientemente grande para abarcar el 100% de su contenedor, pero si no, la imagen se pixelara en su intento de cubrir el 100%. max-width: 100% nos ayuda a que la imagen no supere su ancho original, es como decirle a la imagen: Oye tu, estirate para cubrir el 100% de tu contenedor, pero si ves que no llegas y te pixelas, relaja, no te estires mas.
Pdta: el height siempre sera auto, ayudando a que el aspect ratio de la imagen no se dañe

Hola, no se si ya lo comentaron pero les recomiendo esta pagina para crear imágenes a medida, para maquetar. Así no tienen que estar buscando imágenes temáticas en un principio.
Imágenes para maquetar


En esta clase vimos la manera correcta de trabajar con Imágenes Responsivas en nuestros proyectos.
Recuerden usar la etiqueta <picture></picture>
Y también utilizar la etiqueta <source/> dentro de esta, a la vez que se ordenan de mayor tamaño a menor con el argumento media, al final dejar la imagen con la etiqueta <img> que esta imagen debe ser la pensada para dispositivos móviles.

Dejo el Repositorio por si quieren las imágenes

Codigo HTML

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>iJCode - Responsive Images</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width= device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="./images/logo-css3.svg"
    />
  </head>
  <body>
    <main>
      <!-- 
            Para trabajar con imagenes responsivas se recomienda usar la etiqueta picture.
            y dentro de esta indicar los diferentes tamaños dentro de las etiquetas source y el atributo media.
            Ademas de que el orden es de mayor a menor tamaño y al final la imagen con la etiqueta img que esta pensada para mobile.
         -->
      <picture>
        <source media="(min-width: 1000px)" srcset="./images/large.jpg" />
        <source media="(min-width: 800px)" srcset="./images/medium.jpg" />
        <img src="./images/small.jpg" alt="image" />
        <figcaption>@Karsten116</figcaption>
      </picture>
    </main>
  </body>
</html>

Codigo CSS

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

html {
  font-size: 62.5%;
}

main > picture > img {
  width: 100%;
}

Para aquellos a quienes les guste trabajar con snippets

"Responsive Picture": {
  "prefix": "pictResp",
  "body": [
    "<picture>",
    "  <source media=\"(min-width: $1)\" srcset=\"$2\"><!--large -->",
    "  <source media=\"(min-width: $3)\" srcset=\"$4\"><!--medium -->",
    "  <img src=\"$5\" alt=\"$6\"><!--small -->",
    "</picture>"
  ],
  "description": "Responsive Picture"
}```
  • figure es usado semánticamente, y le dice al navegador que es un contenedor de, ya sea, diagramas, fotos, etc.
    -Mientras picture ofrece a los desarrolladores más flexibilidad para especificar recursos de imágenes.

disculpen alguien sabe cual era la pagina ? JAJA

Siento envidia de que Diego tenga un monitor con muchos píxeles jajaja

Se puede usar el picture dentro del figure

<figure>
   <picture>
      <source ...>
      <source ...>
      <source ...>
      <img..>
   </picture>

   <figcaption>...</figcaption>
</figure>```
Sigo confesando que este curso esta muy bien elaborado, este pequeño secreto me ha volado la cabeza, creo que una vez llegue a ver este truco y no le di la importancia necesaria. Grande @platzi.

Wow, no tenía ni idea del uso de la etiqueta picture, está genial!
Entonces, picture es contenedor de nuestra img principal (para mobil) y pude tener diferentes sources con su media query como atributo, muy similar a la etiqueta video ♥

Me encanta que además de explicar de una manera muy apropiada, enseñan buenas prácticas. y eso, verdaderamente marca la diferencia. ¡Gracias!

el orden de los source siempre es la misma o depende si estamos haciendo mobile first o no?

¿De qué página se descargó las imágenes? Dice me he descargado las imágenes de la página que les comenté, pero no la encuentro en ningún lado.

Excelente curso , ahora a seguir practicando e interiorizar todos los conceptos para poder continuar !

Cargar una imagen de distinto tamaño según el dispositivo que se utilice.

width: 100%; /*Es tu mejor amigo*/

estuve investigando de acuerdo a dudas que se me han presentado y evidencié que para las imagenes responsivas es bueno combinar estas etiquetas sipre, para una buena semantica y un buen responsive.

<figure>
  <source media="min-widht:1300px" srcset="aqui va tu imagen">
  <source media="min-widht:1000px" srcset="aqui va tu imagen">
  <img src="aqui va tu iamgen" alt="esto es una imagen de buena practica">
  <figcaption>Aqui le agrego un subtitulo</figcaption>
</figure>

Recordemos tratar de usar medidas relativas, como el width 100%, para que el responsive sea más fácil de realizar.

¿Y por ejemplo que pasa con las fuentes? ¿También pasa lo mismo, debemos cambiar el tamaño?

Este pequeño modulo me gusto muchísimo. Super interesante aprender como es el buen uso de las imágenes y ver que pasa tras cámara. Para los principiantes como yo es super increíble ver el tras cámara.

la etiqueta <source> recibe como parámetros media y el srcset. media recibe los valores en los cuales se van a mostrar diferente imágenes dependiendo del tamaño de la pantalla. Y srcset recibe la ruta de la imagen y el navegador decide cuál cargar dependiendo del peso. srcset se comunica con el navegador y le da opciones para escoger la mejor imagen para ese dispositivo. Recibe una imagen como parámetro.

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

Excelente curso!

excelente video realmente muy interesante no sabia eso que me enseñaron aqui

Si fuera desktop first, ¿el orden de las etiquetas sería el siguiente?:
<img />: para la imagen más grande.
<source>: para la imagen de tablet.
<source>: para la imagen de dispositivos móviles.

¿Es necesario hacer esto con todas las imágenes de un sitio responsive?

eso quiere decir que no solo se pueden hacer con imagenes si no que tambien con video omg

width: 100%; /Es tu mejor amigo!/
Asi nunca se me va a olvidar, GRACIAS

Sin dudas este es el gran problema del renderizado de paginas en internet, soy usuario de WordPress y me limitaba solamente a instalar un plugin para adaptar imágenes, pero saber que hay de fondo marca la diferencia!

43. Mis apuntes sobre: “Imágenes Responsive”

Lo que haremos será hacer uso de la etiqueta <picture>, dentro de ella usaremos la etiqueta <img> y por cada imagen responsive que necesitemos usaremos una etiqueta <source>, de la siguiente manera:

<body>
    <main>
        <picture>
            <source media="(min-width:1300px)" srcset="./img/large.jpg">
            <source media="(min-width:1000px)" srcset="./img/medium.jpg">
            <img src="img/small.jpg" alt="Example Image">
        </picture>
    </main>
</body>

Es importante notar, que el condicional media="" que usemos de mayor px deberá ir primero para que el navegador lo use (en orden descendente).

Les comparto el código de la clase:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <main>
        <picture>
            <source media="(min-width:1300px)" srcset="./img/large.jpg">
            <source media="(min-width:1000px)" srcset="./img/medium.jpg">
            <img src="img/small.jpg" alt="Example Image">
        </picture>
    </main>
</body>
</html>

CSS:

img {
    width: 100%;
}

💚 <picture> permite que las imágenes y resolución se adapten a todo tipo de pantallas.

Hola, como van? Alguien sabe como editar el código HTML que se genera por defecto al escribir html:5? quiero agregar algunas líneas para la estructura y dejar la estructura guardada, para que no tenga que estarla escribiendo a cada rato.

La etiqueta **picture ** hace un intercambio super rapido entre la etiqueta **img ** y la etiqueta **source ** que sea adecuada para el tamaño actual del viewport

y si son imágenes dinámicas, que se podría hacer?

Documentación sobre lo visto 😄 :

Recomendación:

  • Trabajar con la etiqueta picture

  • Descargar las imágenes en diferentes formatos y anexar las a la etiqueta source

  • En el CSS darle el width 100% es tu mejor amigo.

  • Implementar los Media Queries

En flickr también pueden encontrar imágenes en diferentes tamaños.

Llevaba todo el curso peleando con las imágenes, no entendía como hacer para que no ocupar espacio de más, pero bueno ahora por fin lo logre.

La etiqueta <picture> ofrece a los desarrolladores web más flexibilidad para especificar recursos de imágenes. Esta contiene dos etiquetas: una o más etiquetas <source> y una etiqueta **<img> **.

img {
width: 100%;
}
html {
color:blueviolet;
}

yo puse en ves de min-width puse max-width y tuve que hacerlo todo al reves… No entendia que estaba haciendo mal.

    <main>
        <!-- Este elemento sirve para cargar las imagenes por dispositivo, o sea se carga la imagen de base(mobile first) que sería la small y luego dependiendo del dispositivo y a traves de media querys definimos que imagen se debe mostrar en el viewport, las sources se deben acomodar en orden ascendente desde el mobile first hasta el viewport mas ancho-->
        <picture>
            <source media="(min-width:1300px)" srcset="images/large.jpg">
            <source media="(min-width:1000px)" srcset="images/medium.jpg">
            <img src="images/small.jpg" alt="">
        </picture>
    </main>

excelente código. Indicarle al navegador qué imagen descargar según el tamaño de pantalla

Excelente información 😀💚

Excelente imagen.

Width: 100%; es mi mejor amigo

En Network que es ws?

Excelente

Genial, no conocía la etiqueta picture!

Por mucho, esta fue la mejor clase del curso…

recomendacion ==> width = 100%

Imágines

Gracias!

Esto es muy buena practica para la renderización ❤️

¡wow! un señor trucazo ese.

Thanks teacher now I need to use <picture> more than <figure>

Interesante, simplemente le delegas esa decisión al browser y optimizas tiempo de carga

Se utilizan la etiquetas picture y source, el orden del código importa, se organiza el código de **manera descendente **con respecto al viewport. En la etiqueta img se asigna un width al 100%.

Excelente clase esto no lo sabia…

Woow, para ser honestos, yo jamás me abría preocupado por las imágenes en mi pagina, es como algo que obviamos. Sin embargo, ahora me doy cuenta que es algo muy importante

Nunca pensé que el navegador haría este tipo de cosas, sinceramente este curso me ha dejado sin palabras y con ganas de seguir aprendiendo.

Les dejo la pagina web que elaboré sobre los lugares turisticos para la provincia de Huánuco, Perú. Debido al tiempo solo es apto para dispositivos desktops.
hEliminar este textottp://blowziest-chins.000webhostapp.com/

Solucionar problema de carga de imagen: orden grande, mediana y pequeña

Fantástico tip para optimizar landings que tienen muchas imágenes!

Entonces para cada imagen que deseamos colocar en un sitio web tenemos que poner la imagen en los tres tamaños?

Que maravilla la etiqueta picture!

  • Una forma más facil de indicarle al navegador que cargue la imagen con diferentes resoluciones es usando dentro de la etiqueta img el atributo srcset
  • Lo interesante de está funcionalidad es que si tu pantalla es grande y reescalas a una resolucioón pequeña el navegador no va volver a descargar la imagen,
  • Si estás en una ventana pequeña y reescalas la pantalla hará la petición para descargar una de mayor calidad, pero si la vuelves a reescalar ya no hace la petición simplemente muestra la de mayor resolución
<img 
	srcset="img/logo.png 200w, img/logo-2x.png 600w, img/logo-3x.png 1000w"
	src="img/logo-default"
	alt="Logo empresa"
>

Información resumida de esta clase
#EstudiantesDePlatzi

  • Picture es la etiqueta que se va a convertir en el contenedor de nuestra imagen

  • Es importante aclarar de que fuente se van a tomar las imágenes dependiendo del tamaño del viewport

  • Si queremos usar la imagen en todos los tamaños, tendremos que descargarla en estos tamaños

  • Es importante el orden de las media queries en html, es de mayor a menor tamaño de imágenes

excelente clase y muy buena practica con la nueva etiqueta:

picture

deberias escrbir el tope para que se baje la imagen que no se usa y asi correr mejor

width : 100%; es tu mejor amigo en imágenes
Anotado ✅ !

El navegador carga las imagenes muy sutil. 🤯

Algunas Paginas:

Me llama la atención que google es tan simple que no encuentro ningún cambio de Responsive Design en el Inspector. 🤔

Yo lo hice con imágenes diferentes para ver el cambio mejor

Yo viendo como Diego no usa el figure para la imagen

hola

Hola! Si llegaron aqui se la estan rifando 😎. No desesperen el responsive es lo mero mero ya con flexbox, lit pueden hacer la mayoria de páginas. Un recurso que me ayudo a mejorar mi flexbox fue Conquering-Resposive-Layout. El detalle es que está en ingles pero pueden profundizar con flexbox y tienen varios ejercicios.

Codigo de la clase:
**
Codigo HTML:**

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
<link rel=“stylesheet” href=“estilo.css”>
<title></title>
</head>
<body>
<main>
<picture>
<source media="(min-width:1300px)" srcset=“large.jpg”>
<source media="(min-width:1000px)" srcset=“medium.jpg”>
<img src=“small.jpg” alt=“Imagen de ejemplo”>
</picture>
</main>

</body>
</html>

**
CODIGO CSS:**

img{
width: 100%;
}

Este curso es una chulada, llevo tiempo haciendo front pero he parendido bastante
Creo que tanto, para alguien que inicia en la web como para alguien con experiencia es un curso con valor y en todo momento aprendes algo más.

Así se hace con buenas prácticas

Lo que no hay que hacer

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Imagen redimensión</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <h3>Redimensiona imagenes</h3>
    <main>
      <picture>
        <source media="(min-width:1300px)" srcset="./imgs/large.jpg" />
        <source media="(min-width:1000px)" srcset="./imgs/medium.jpg" />
        <img src="./imgs/small.jpg" alt="Esuna imágen de ejemplo" />
      </picture>
    </main>
  </body>
</html>

orden de los viewport

seleccionar imagenes dependiendo del dispositivo

Gracias me sirvio de mucho esta clase en los anteriores retos de layout fue una pesadilla trabajar con imagenes

Interesante clase! Es bueno recordar lo basico siempre se aprende algo nuevo! Tratare de implementarlo frecuentemente!