CSS: hacer que se vea bien
Del HTML crudo a una página que da ganas de mirar.
13 aulas · 4 horas de práctica · en el navegador, sin instalar nada
Temario
- Tu primera regla — El HTML dice qué es cada cosa. El CSS dice cómo se ve. Vas a escribir la regla más chica que existe y verla aplicarse en vivo.
- Elegir a quién le hablás — Con `p` le hablás a todos los párrafos de la página. Casi nunca es lo que querés. Acá aprendés a apuntar exactamente a uno.
- El texto, que es casi todo — Una página web es texto en un 90%. Seis propiedades bien puestas separan un borrador de algo que da ganas de leer.
- Taller — El póster — Tres aulas de selectores, color y tipografía, y ya alcanza para armar un póster de verdad. Sin cajas, sin flexbox: todo el efecto sale de la letra y el color.
- Quién gana cuando hay empate — "Le puse el color y no cambia nada." Pasa siempre, y casi nunca es un error de tipeo: es que hay otra regla ganando. Acá aprendés a saber cuál.
- Todo es una caja — Cada elemento de una página es un rectángulo con tres capas alrededor. Entender las tres es entender por qué las cosas no quedan donde vos querés.
- Por qué algunas cosas se apilan — Un h1 ocupa todo el ancho y un enlace no. No es magia ni es el HTML: es una propiedad que podés cambiar.
- Flexbox: acomodar en una fila — Tres propiedades resuelven el 90% de los layouts de una fila. Es la clase que más se usa de todo el CSS.
- Taller — Las cartas — Selectores, cajas, display y flexbox: con eso alcanza para armar tres cartas de precios en fila, una de ellas destacada del resto.
- Flexbox: repartir el espacio — Cambiar el eje, dejar que las cosas bajen de renglón, y decidir quién se queda con el espacio que sobra.
- Sacar algo del flujo — Casi todo se acomoda solo. Para las pocas cosas que van pegadas en una esquina, flotando encima del resto, existe `position`.
- Que funcione en un teléfono — Más de la mitad de quienes entren a tu página lo van a hacer desde un teléfono. Esta es la clase que decide si se van o se quedan.
- Taller — La landing — Diez clases de propiedades sueltas, y acá se juntan todas: vas a estilar una página de venta entera, de la barra de arriba al pie.