Todos los ejemplos de este curso traen esta línea, sin explicarla todavía:

<meta name="viewport" content="width=device-width, initial-scale=1">

Sin ella, los celulares hacen algo raro: simulan una pantalla ancha —como si fuera un computador— y después achican todo con zoom. El resultado es texto microscópico.

Esa etiqueta le dice al celular: "usa tu ancho real, sin simular nada". Es lo primero que necesita cualquier página para siquiera empezar a ser responsive.

Every example in this course carries this line, unexplained until now:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without it, phones do something odd: they simulate a wide screen — as if it were a desktop — and then shrink everything with zoom. The result is microscopic text.

That tag tells the phone: "use your real width, no simulation". It is the first thing any page needs before it can even start being responsive.

px es un tamaño fijo: 400 píxeles miden lo mismo en cualquier pantalla, así que en un celular angosto se salen del borde. Para que algo se adapte, usa porcentaje —relativo a su contenedor— o unidades de viewport como vw —relativas al ancho de la pantalla entera—.

px is a fixed size: 400 pixels measure the same on any screen, so on a narrow phone they spill past the edge. For something to adapt, use percentage — relative to its container — or viewport units like vw — relative to the whole screen width.

Una media query es una regla de CSS que solo aplica bajo cierta condición —normalmente, el ancho de la pantalla—. Se lee: "si la pantalla mide menos de esto, aplica este otro estilo".

A media query is a CSS rule that only applies under a certain condition — usually, the screen width. It reads: "if the screen measures less than this, apply this other style".

Este mismo sitio usa exactamente esa técnica: por eso el menú de arriba se convierte en un botón de hamburguesa cuando la pantalla se achica.

This very site uses exactly that technique: it is why the menu above turns into a hamburger button when the screen narrows.

Ya conoces display: flex. Agrégale flex-wrap: wrap y las cajas bajan a la siguiente fila solas cuando ya no caben —sin necesitar ninguna media query—.

You already know display: flex. Add flex-wrap: wrap and boxes drop to the next row on their own once they no longer fit — no media query needed.

La etiqueta viewport, unidades flexibles contra fijas, media queries, y flex-wrap. Con esto, cualquier página que hagas se va a ver bien tanto en un celular como en una pantalla de escritorio.

Ya sabes construir y hacer que se vea bien. Falta el último paso: que exista en internet.

The viewport tag, flexible versus fixed units, media queries, and flex-wrap. With this, any page you build will look right on both a phone and a desktop screen.

You already know how to build it and make it look good. One step remains: getting it onto the internet.