Tiny CSS Projects
Martine Dowden, Michael Gearon
- Editorial
- Manning
- Año
- 2023
- Páginas
- ~392
- Nivel
- Intermedio
De qué trata
Libro práctico de Manning en el que Martine Dowden y Michael Gearon enseñan CSS moderno a través de doce miniproyectos, cada uno centrado en un conjunto de técnicas. Está pensado para quienes ya manejan HTML y nociones básicas de desarrollo frontend, pero no tienen experiencia previa en CSS o la tienen poco ordenada. Trabaja con el CSS actual, el de 2023 (Grid, Flexbox, propiedades personalizadas, media queries de preferencias del usuario), en lugar de centrarse en una versión concreta de la especificación.
El primer capítulo explica los fundamentos: separación de responsabilidades, formas de añadir CSS (en línea, embebido y externo) y la cascada, con hojas de estilo del agente de usuario, del autor y del usuario, además de resets y normalizadores. Después cada capítulo parte de un esqueleto HTML descargable que se va completando con estilos: maquetación con CSS Grid, gráficos SVG animados con keyframes y respeto a prefers-reduced-motion, estilizado de la barra de progreso nativa, layouts de varias columnas, transiciones en estados hover, propiedades personalizadas y centrado con Flexbox, un repaso a fondo de float, estilizado de formularios y de botones de radio, fuentes embebidas, pseudoelementos y, para cerrar, el uso de preprocesadores.
El formato de proyectos pequeños e independientes permite leer los capítulos en el orden que convenga y ver cada técnica aplicada a una interfaz reconocible: tarjetas, carritos, formularios o enlaces para compartir. A lo largo del libro se presta atención a la accesibilidad y al diseño responsive. No es una referencia exhaustiva de la especificación ni trata arquitectura de CSS a gran escala (metodologías, design systems o frameworks como Tailwind), así que conviene complementarlo con una referencia más completa. Para alguien que empieza con CSS o lo usa de forma intuitiva, es una forma amena y bien estructurada de ganar soltura.
- CSS Grid
- Flexbox
- Cascada
- Animaciones con keyframes
- Transiciones
- SVG
- Media queries
- Custom properties
- Float
- Estilizado de formularios
- Pseudoelementos
- Preprocesadores
¿Cómo enseña?
Con proyectos
- ✗ Sin ejercicios
- ✓ Incluye proyectos
Proyectos
Página de artículo
Maquetación de un artículo estático de una sola columna con encabezados, texto e imágenes, que sirve para practicar cómo se añade CSS y cómo funciona la cascada.
Layout con CSS Grid
Diseño de la estructura de una página con CSS Grid, definiendo filas, columnas y áreas.
Pantalla de carga animada y responsive
Pantalla de carga hecha con gráficos SVG animados mediante keyframes, que respeta prefers-reduced-motion e incluye una barra de progreso HTML con estilos propios.
Periódico web responsive
Maquetación de varias columnas al estilo de un periódico que se adapta a distintos tamaños de pantalla con media queries.
Tarjetas resumen con interacciones hover
Tarjetas de contenido que revelan información o cambian de aspecto al pasar el cursor, usando transiciones.
Tarjeta de perfil
Tarjeta de usuario construida con propiedades personalizadas de CSS y centrada y organizada con Flexbox, con botones de acción estilizados.
Maquetación con float
Proyecto que aprovecha float para envolver texto alrededor de elementos y muestra cuándo esta propiedad sigue siendo útil.
Carrito de compra (checkout cart)
Interfaz de un carrito con su resumen de pedido, que combina tablas o listas, Grid/Flexbox y diseño responsive.
Tarjeta de crédito virtual
Representación visual de una tarjeta de crédito realizada solo con CSS, con fondos, tipografía y efectos visuales.
Formularios estilizados
Formulario con campos, botones de radio y otros controles con estilos personalizados, cuidando la accesibilidad.
Enlaces animados para compartir en redes sociales
Botones para compartir en redes sociales animados con pseudoelementos y transiciones.
Proyecto con preprocesadores
Capítulo final que reescribe estilos usando un preprocesador de CSS para aprovechar variables, anidamiento y reutilización de código.
