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

Responsive design: media queries

44/55
Recursos

Aportes 138

Preguntas 22

Ordenar por:

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

Estamos listos para entrarle de lleno a RD

Se debe optimizar para todos los dispositivos. Hay tiene que tener en claro un par de conceptos:

  • Break points: cuando la pantalla sea de cierto tamaño, se generará un cambio para reposicionar o redimensionar los contenedores.
  • Media Queries: son condicionales. No es la mejor práctica pero aplicándolo al CSS: @media (min-width: #;) {"código que se aplicará"} y se aplican para cada tamaño de dispositivo. El pixelaje dado será el break point.

Lo más importante es diseñar para movil. Por lo que se debe diseñar con mobile first. Es decir, primero diseñar para celular, luego un break point para tablet y finalmente un break point para PC.

Para aplicar media queries con buenas prácticas, hay que hacerlo en el header. Porque así solo se descarga el código necesario según el dispositivo, mientras que en CSS se descarga todo sin importar nada.

En la tag link se colocan los atributos href, rel y, a partir del segundo archivo, el break point media="screen and (min-width: #px". El style.css debe estar hecho para mobile. Luego se pueden crear otros archivos como tablet.css o desktop.css.

¿Qué es Responsive Design?
Son todas esas técnicas que usamos para adaptar nuestras aplicaciones web a la mayor cantidad de pantallas
250px-Diseno-web-responsive-design.jpg
Patrones en Reponsive Design:

Mostly Fluid
Colocación de columnas
Layout shifter
Tiny tweaks
Off canvas
Para mas información: https://mediaqueri.es

Conceptos nuevos:

Viewport: área visible del navegador
Portrait: vertical
Landscape: horizontal
Mobile first: empezar un websit desde la menor resolución soportada
Deskto first: empezar un websit desde la mayor resolución soportada
¿Cúal es mejor?: Técnicamente Mobile First

Hola comunidad, este es mi portafolio actual, tiene media queries para distintias medidas y para detectar el modo oscuro/claro de tu navegador y lo implementa segun el tema activo. Me gustaría su feedback para ver si en sus pantallas se ve bien Portafolio


¿Qué son los breakpoint en responsive design?
Es el “punto” en el que el contenido y el diseño de un sitio web se adaptarán de cierta manera para brindar la mejor experiencia de usuario posible. Básicamente, los breakpoints son valores de píxeles que un desarrollador / diseñador puede definir en CSS. Cuando un sitio responsive alcanza esos valores de píxeles, se produce una transformación para que el sitio web ofrezca una experiencia de usuario óptima.


¿Qué es responsive design?
El responsive design permite que los sitios web “se adapten” a diferentes tamaños de pantalla sin comprometer la usabilidad y la experiencia del usuario. El texto, los elementos de la interfaz de usuario y las imágenes se redimensionan y cambian de tamaño según la ventana gráfica. El responsive design permite a los desarrolladores escribir un solo conjunto de código HTML, CSS y JavaScript para múltiples dispositivos, plataformas y navegadores.
What is Responsive Design?


Les comparto tres páginas para responsive (gracias al instagram de Leonidas Esteban),


No se a ustedes pero a mi me provoco una gran emosion el aprender RD ❤️

La forma en que yo practico es hacer mis apuntes de forma gráfica en CSS por cada bloque que vemos.

En el curso de Desarrollo Web Online se explica muy bien el tema de RD. Muy buen curso.

Responsive disign: meida queries


¿Cómo haces que nuestra aplicación o pagina web se vea bien en distintos dispositivo o plataformas de tamaños diferentes?
Responsive disign es la respuesta, pero ¿Qué es?¿Cómo funciona?
Para entender responsive disign hay que entender dos conceptos:

  • Break points: hay que entenderlos como las distintas medidas(en el width) que podamos encontrar en los dispositivos donde se vera nuestra aplicación para poder reposicionar de mejor manera los elementos de nuestra aplicación.
  • Media quieries: son líneas de códigos que se escriben en el archivo css que sirven para condicionar ciertas características de nuestra aplicación web dependiendo del tamaño del dispositivo de donde se este renderizando.
    Ejempl:
@media (min-width: #;) {"código que se aplicará"}

Ojo: la medida que va después de min-width es un break point, o sea la medida del width un dispositivo

Buenas Practicas
Desarrollar nuestras aplicaciones web con las metodología de Mobile first. Empezando a diseñar primero para los dispositos mas pequeños y luego ir aumentando el tamaña del dispositivo

Soy diseñador de WordPress y solía hacerlo de desktop a mobile. Hora de cambiar los hábitos 😃

Este es un pequeño resumen que hice, si consideran que la información está errada agradecería bastante una crítica constructiva

Media queries
Primero hay que comprender lo que es un breakpoint. Un breakpoint es una dimensión especifica en el viewport justo en el cual se va a generar un cambio.

Hay varias estrategias para implementar media queries, una de ellas y la más utilizada en nuestra era, es Mobile First.

El tema de la Cascada en CSS es importante en las media queries. Siempre empezamos desde el tamaño más pequeño hasta el más grande.

  • Esto aplicándolo desde el CSS.

También se pueden aplicar desde el head en el** html**, y de hecho es una mejor practica, debido a temas de optimización. Por ejem, Un usuario que visite tu app web desde el teléfono, no debería descargar todo tu CSS para desktop.

Responsive design la característica que tiene los proyectos web para ajustarse de forma optima a diferentes dispositivos móviles.

La forma correcta de diseñar un producto web, es iniciando con el web mobile first/only.

Web mobile-first /only

Consiste en diseñar los productos en primera instancia para dispositivos mobiles y luego para tables para terminar con diseño para escritorio.

Break-point

O conocidos como puntos de quiebre en responsive design significa que la resolución de nuestro dispositivo llego a un tamaño en donde la interface tiene que cambiara para adaptarse y ser más optima.

Incorporar los Break-points

Dentro de la hoja de estilos del proyecto se pueden definir de la siguiente forma.

Iniciando con la resolución más pequeña(mobile first) y terminando con la resolución más grande.

Esto por aplica el algoritmo en cascada y si está el más grande al principio va a ignorar los demás estilos.

@media(min-width: 480px){
	...
}
@media(min-width: 762px){
	...
}
@media(min-width: 1024px){
	...
}

Como mejor praxis es mejor tener una hoja de estilos por cada resolución y cargarlas desde el HTML, en el mismo orden del más pequeño al más grande.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="**width=device-width, initial-scale=1.0**"/>
		<link rel="stylessheet" href="/css/style.css"/><!--Estilos enfocados para mobile-->
		<link rel="stylessheet" href="/css/style.css" media="screen and (min-with:408px)"/>
		<link rel="stylessheet" href="/css/style.css" media="screen and (min-with:768px)"/>
	</head>
	<body>
	</body>
</html>

Los media queries son la base de Bootstrap, Bootstrap está construido con media queries y pensando en Mobile First, aquí pueden ver algunas de las queries que usa Bootstrap

https://getbootstrap.com/docs/5.0/layout/containers/

Yo solía hacer de Desktop a Mobile; grave error.

🐱‍💻 El Responsive Design es la técnica que permite la adaptabilidad de una Web a diferentes plataformas que tenemos actualmente.

41. Mis apuntes sobre: “Responsive Design: Media queries”

Es importante saber qué son los media queries, y los “breakpoints”, que te dirán a partir de qué punto se va a dimensionar.

Lo ideal es trabajar con “mobile first / only”.

La idea es que primero desarrollemos hacia mobile, y luego vayamos creciendo.

Se puede aplicar en el archivo CSS:

Se puede aplicar directamente en el HTML, lo cual es mejor práctica:

Mis apuntes pdf

Media queries
Permiten crear un bloque de código que sólo se procesará en los dispositivos que cumplan los criterios especificados como condición.
Con media queries podemos aplicar diferentes estilos de acuerdo a alguna característica de la pantalla (p.e. la resolución, el ancho o alto de la ventana del navegador, el tamaño del dispositivo, etc).
Generalmente se utiliza el ancho del navegador en pixeles (px) y existen algunos valores que nos pueden ayudar a determinar el tipo de dispositivo:
Si el ancho de la ventana es menor a 768px corresponde a teléfonos inteligentes.
Si es entre 768px y 992px corresponde a tabletas.
Si es entre 992px y 1200px corresponde a computadores de escritorio.
Si es mayor a 1200px corresponde a pantallas grandes.
A los puntos en los que cambia el contenido se les conoce como puntos de quiebre (breakpoints).
Para definir un media query utilizamos @media seguido de una expresión que define para qué dispositivos van a aplicar los estilos que estén dentro de ese media query.
Mobile first
En mobile first las reglas CSS que están por fuera de media queries están dirigidas a teléfonos inteligentes y se utilizan media queries para ajustar el contenido a pantallas más anchas.

Usar mediaqueries con la Etiqueta link hace que tengas mayor rendimiento, ya que no descargará codigo de tablet o desktop en el caso de que lo vea en smartphone

Super interesante esta parte. Siento una revelación providencialj jajaja muchas gracias por esta info. Me va a servir muuucho! yo siendo un novato aplicaba toda la media queries en un mismo archivo CSS. Realmente me emociona el Mobile firt!

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

RESPONSIVE DESIGN

MEDIA QUERIES: son elementos llamados puntos de quiebre, ya que cuando se aplique uno, lo que se busca es que cuando se cumpla la condición del media query se ejecute dicha acción.

@media (min-height: 480){ //Aqui se define la condición del break point
	... //Aqui se ejecuta la acción 
}
@media (min-height: 768){
	...
}
@media (min-height: 1024){
	...
}

¿Qué es Mobile First/Only?

En una metodología donde empezamos a desarrollar nuestros proyectos desde un tamaño de un móvil, e ir escalando hasta llegar a un tamaño de escritorio, asegurándonos de que el contenido pueda verse de manera adecuada.

¿CÓMO FUNCIONA LAS HOJAS CSS EN EL RESPONSVE DESGIN?

Es importante saber que depende del tamaño que tiene un dispositivo, lo correcto seria que el navegador cargara el documento que tiene los estilos del sitio, según el tamaño, ya sea móvil, tablet, o pc, y eso lo logramos de la siguiente forma.

<link rel="stylesheet" href="css/style.css" media="screen and(min-width: 768px)">

De esta forma le decimos al navegador que documento css.


CSS media queries
Las media queries (en español “consultas de medios”) son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).

Se utilizan para:
Aplicar estilos condicionales con las reglas-at @media e @import de CSS.
Indicar medios específicos en los elementos <link>, <source> y otros elementos HTML.
Testear y monitorizar los estados de los medios usando los métodos de javascript Window.matchMedia() y MediaQueryList.addListener().
Fuente: https://developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_queries

Pequeño artículo que quizás quieran leer (en inglés) https://anglestudios.co.uk/blog/why-mobile-first-web-design-is-becoming-more-important/

Yo aprendí Responsive en el curso de Leonidas.
Pero ahí no vimos lo de trabajar desde Mobile.
Así que espero aprender un montón 😄

Para los que usan chrome, pueden isntalar esta extensión, lo que hace básicamente es mostrar multiples pantallas de dieferente pixelaje al mismo tiempo para observar cómo se vería nuestra app en cada una de ellas. Espero les sirva.

<h3>Mobile First/Only</h3>

La mejor forma de hacer uso de las media-queries es desde los links
en el head, esto se debe a que los links solo van a cargar los archivos
correspondientes cuando el Navegador tenga la resolución indicada en el atributo media.

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style_table.css" media="screen and (min-width: 768px)">

Nota: recordar siempre colocar los media-queries en ascendente, es decir:

@media (min-width: 768px) {...}
@media (min-width: 992px) {...}
@media (min-width: 1200px) {...}

Yo no sabía lo que dijo sobre los links, pero se nota que Diego se esmera en dar lo mejor en cada clase

les dejo mis notas de la clase

Esto se está poniendo bueno

Aplicacion directa en HEAD (mejor practica)

También es buena practica usar el Mobile First, porque se ahorra mucho código, puede ser mas ordenado, y de realiza de una manera mas rápida y sencilla. Así cuando tengamos que entregar un proyecto a un cliente, haciendo Mobile First podemos entregar mas rápido una muestra de la pagina.

Mi resumen:

HTML

<header>
	<h1>Responsive Desing</h1>
</header>
<section>
	<article>
		<h2>¿Que es responisive design?</h2>
		<p>
			Es una serie de estategias que llevan a que el contenido de un poyecto web esté optimizado para ver en cualquier
			dispositivo.
		</p>
	</article>
	<article>
		<h2>Media querys y break points</h2>
		<p></p>
		<h3>Break Points</h3>
		<p>Son dimensaiones en los que se determina el punto de partida para que un contenido se reorganice</p>
		<h3>Media querys</h3>
		<p>Es un selector de CSS que permite colocar un break point. Son similares a lo siguiente:</p>
		<p><code>@media (min-width: 480px{ ... })</code>.</p>
		<p>
			Esto quiere decir: cuando la pantalla (media) sea mas pequeña (min-width) que 480px, se tomarán los estilos que están
			dentro de los corchetes
		</p>
		<p>La mejor práctica para colocarlos es desde el head de HTML del siguiente modo:</p>
		<p><code>&lt;link rel="stylesheet" href="style.css"&gt;</code>*</p>
		<p><code>&lt;link rel="stylesheet" href="tablet.css" media="screen and (min-width:768)"&gt;</code></p>
		<p><code>&lt;link rel="stylesheet" href="desktop.css" media="screen and (min-width:1024)"&gt;</code></p>
		<p>
			*El primer enlace a la hoja de estilos (el CSS principal) debe ser para mobiles, de este modo se aplica el método Mobile
			First
		</p>
	</article>
</section>

Wow! quede asombrado con el uso de los media queries en diferentes archivos de css y lo eficiente que debe ser al cargar. Definitivamente el desarrollo web es un mundo en donde la creatividad y el entontrar soluciones diferentes es muy importante 😄

Veo que en el sitio de Platzi no se usa CSS diferenciado por el viewport como lo indican en el video. ¿Será porque se está usando React?

44.-Responsive design: media queries

Media Queries:

Cuando la pantalla sea más chica que esto, el código que este dentro va a suceder y así sucesivamente.

Breakpoints: Son la dimensión en el viewport (o el width de la pantalla) en el que se genera un cambio. Es el cambio donde se reposicionan o redimensionan ciertos elementos o contenedores para que se vea bien sin importar el dispositivo donde estés.

Hay diferentes estrategias para responsive design, la recomendada es Mobile First o Mobile Only que se hace teniendo el código base (código hecho y optimizado para mobiles), luego breakpoints para los demás dispositivos. De chicas a grandes.

La captura de arriba es aplicada en CSS y no es una muy buena práctica, la mejor práctica sería de la siguiente manera:

en el head del html lo que hacemos es, en lugar de mandar llamar un solo archivo de CSS, mandamos llamar varios archivos de CSS dependiendo para que dispositivo estén hechos.

/ Mobile First / Only

Iniciar a trabajar el diseño desde los dispositivos mobiles.

Media queries

Lo implementamos desde las pantallas más chicas a las más grandes según los breakpoints.

La mejor practica es aplicarlo en el head del html:

<link rel="stylesheet" href="tablet.css" media="screen and  (min-width: 768px)">

También los podemos aplicar en el archivo CSS.

@media (main-width: 480px) {

} 

@media (main-width: 760px) {

} 

PATRONES DE RD — EN/ES
.
-Mostly Fluid – Mayormente Fluido
-Column Drop – Colocación de Columnas
-Layout Shifter – Cambio de Diseño
-Tiny Tweaks – Pequeños Retoques
-Off Canvas – Fuera del lienzo

Usen Responsively + Live Server y así podrán ver en real-time cómo les funcionan sus media queries en varias pantallas y dimensiones al tiempo 😉

* Responsive Design

* Media Queries

Metodologia

Primero empezar a disenar desde la pantalla de un celular, luego desde tablet y por ultimo pc.

Mobile First / Only

Break points: cuando la pantalla sea de cierto tamaño, se generará un cambio para reposicionar o redimensionar los contenedores.

Media Queries: son condicionales. No es la mejor práctica pero aplicándolo al CSS: @media (min-width: #;) {"código que se aplicará"} y se aplican para cada tamaño de dispositivo.

se puede aplicar desde css

pero lo recomendable es manejar un archivo para cada brakpoint y llamarlos dede head por medio de link, esto es dependiendo desde que dispositivo se genere el codigo, esto hace que el usuario solo descargue el coodigo necesario de acuerdo a su dispositivo.

mas infor ver diapositivas
¿Se puede aplicar esta estrategia en react? No me imagino la manera ya que no conozco el import con alguna estrategia condicional como lo plantea Diego aqi en este video.

Notas de la clase

Hago un pequeño aporte… en el minuto 1:44 Diego comete un pequeño error ( se confundió, porque es claro que el la tiene clara)… el breakpoint indica que el tamaño mínimo es 480px, en esos media query no esta contemplado por debajo de los 480px, osea que indica que cuando el tamaño sea mínimo 480px toma el primer breakpoint, pero si tiene mas 768px y sobre escribe algún estilo, le da prioridad sobre el anterior breakpoint y solo aplica para pantallas por encima de 768px y así pasaría en el de 1024px dandole prioridad sobre los otros breakpoint.
Para que funcione como el dice es usar el max-width.

Saludos y feliz código!! 😃

Muy buena explicación lo entendí mejor que nunca ty diego

Información resumida de esta clase
#EstudiantesDePlatzi

  • Importante que nuestros proyectos creados con buenas prácticas sean multiplataforma, hacerlo bien es importante

  • Recordemos que el código es leído en cascada

  • Iniciamos diseñando desde un dispositivo pequeño a uno más grande

  • Los media queries son el bloque de código que evalúa el tamaño de la pantalla y corre el código según el resultado

  • Existen diferentes estrategías para él response design, se recomienda usar la “mobile first” en donde iniciamos creando el diseño para dispositivos mobile.

  • Este llamado del CSS lo hacemos desde HTML teniendo en cuenta la lectura de cascada

Este curso debería estar antes del curso de Frontend Developer

Excelente introduccióm

Para aquellos que nos confundimos con max y min width.
✔ (min-width: 320px) → Desde los 320px hasta nuevo breakpoint se aplican los cambios
✔ (max-width: 320px) → Hasta los 320px se aplican los cambios

No conocía esto de separar los media queries en archivos. Que excelente práctica.

uso de media query en etiqueta link. Buena Práctica 🙂

Usar mediaqueries con la Etiqueta link hace que tengas mayor rendimiento, ya que no descargará codigo para el dispositivo en el que veas la pagina web.

Súper emocionado con la clase y con ganas de aprender más.

Yo no sabia nada sobre el RD, y me da mucha emoción aprenderlo y aplicarlo 😄

Mobile first y responsive design con documentos css

Mind blowing 🤯

No había tenido en cuenta cuán importante es el responsive design

Justo lo que buscaba. Listo para aprender

No sabía que existía el atributo media en la etiqueta link. Pedazo de dato. Este curso está buenísimo.

Lo mejor del curso

Lo más importante es diseñar para movil. Por lo que se debe diseñar con mobile first. Es decir, primero diseñar para celular, luego un break point para tablet y finalmente un break point para PC.
Para aplicar media queries con buenas prácticas, hay que hacerlo en el header.

Break points: cuando la pantalla sea de cierto tamaño, se generará un cambio para reposicionar o redimensionar los contenedores.
Media Queries: son condicionales.

Hasta el momento no he trabajado con mobile first, y ahora entiendo la importancia que tiene, dado que la mayoría de las personas ingresan hoy en día desde ese tipo de dispositivos.

Conocía los media querys y había escuchado sobre los break points, pero no me imaginé que fuese así como se utilizan.

Increíble.

Buenas prácticas para escribir código CSS con enfoque MOBILE FIRST

Hoy aprendí que Responsive Design no es lo mismo que mobile First

Recuerdo tener mi grupo de programadores que me enseñaron a poner el import en css. Sé que lo hicieron con la mejor de las intenciones.

Responsive Desing son las metodologías utilizadas para adaptar tu proyecto a las diferentes pantallas de los dispositivos (Smartphone, Tablet o PC) y de esta forma generar una buena experiencia en los usuarios.

GRACIAS

Otro reto más a tener en cuenta

Se recomienda ordenar las media queries del dispositivo mas chico hasta el más grande.
Pueden implementarse tanto en el CSS como en el HTML

Pero que excelente clase!!

Los media query van desde la pantalla más pequeña hasta la pantalla más grande, debido al algoritmo de cascada.

Hice algo de responsive en los retos, pero no separé los media queries en archivos separados.
Los puse dentro del mismo CSS, pero eso sí, Mobile First!

Muy buena clase 😀💚

xD

Responsive Design

El responsive design es una serie de metodologías de diseño css para volver adaptable nuestro sitio web a cualquier tamaño pantalla. Existen distintos tipos de estrategias para abordar los cambios que vamos a hacer, en la actualidad la mejor estrategia es la llamada Mobile First / Only que consiste en comenzar a diseñar desde el tamaño de un teléfono e ir escalando desde ahí ir escalando nuestro diseño a pantallas más grandes.

<h3>👉️ Media Queries</h3>

Los media queries son una regla o un conjunto de reglas que solo se verán aplicadas cuando se cumpla una determinada condición (break points), haciendo una comparación con los lenguajes de programación un media query seria como una sentencia if pero en css.

Estas condiciones o breakpoints son establecidos en base a los tamaños de anchura de la pantalla en los que queremos que se aplique un cambio de diseño responsive.

Hay dos formas de crear estos media queries, la primera desde un archivo css y la segunda desde un archivo externo cargado de manera condicional.

Media queries dentro de css:

/* Cuando la pantalla sea más chica que 480px aplica estos estilos */
@media (min-width: 480px) {
    .....
}
/* Pero si mi pantalla es mayor a 480 px aplica estos estilos siempre y cuando el tamaño sea menor a 768 px */
@media (min-width: 768px) {
    .....
}

Media queries a forma de archivos cargados de forma condicional (Buena práctica)

<!-- Estilos base enfocados a mobile --> 
<link href="style.css" rel="stylesheet"> 
<!-- Estilos base enfocados a tablet --> 
<link href="style.css" rel="stylesheet" media="screen and (min-width: 768px)"> 

Los media queries nos permiten hacer que nuestros proyectos sean multiplataforma mediante breakpoints. Los breakpoints son puntos donde hacemos cambios, como renderizar elementos o contenedores. Los media querie se agregan así:

@media (min-width: 600px) {
.c2,
.c3,
.c4 {
width: 50%;
}
.letra {
font-size: 12px;
}
}

Wao, esa imágen, es una representación, cien por ciento Responsive Design.

muy buena clase

increible no sabia que se podia poner los breakpoint linkeados 😃 😃

Vaya que mundo nuevo lo del Responsive design…

Responsive design es la manera en la que hacemos que el contenido que hagamos se adapte a todo tipo de pantalla, esto lo vamos a hacer a partir de los breakpoints que son los puntos en los que a partir de cierto tamaño nuestro contenido cambiará, esto se hace con los media queries indicando cual es el pixelaje que debe tener un dispositivo para usar cierto css, esto se logra con @media en CSS o en el head del html con el atributo html, como es debido para que no se cargue código que no se usa