</> CodeBooks
    ← Volver a CSS (página 6)
    Portada de The Advanced CSS Collection

    The Advanced CSS Collection

    Craig Buckler

    Editorial
    Sitepoint
    Año
    2018
    Páginas
    ~350
    Nivel
    Avanzado

    De qué trata

    Antología publicada por SitePoint en octubre de 2018 que reúne en un solo volumen tres de sus libros cortos sobre CSS avanzado. Los capítulos están escritos por varios autores, entre ellos Craig Buckler, Ilya Bodrov-Krukowski, Claudio Ribeiro, Ahmed Bouchefra y Tiffany B. Brown. La idea central es mostrar todo lo que CSS ya puede hacer por sí solo, cuando antes hacía falta JavaScript complejo o directamente no era posible. Está pensada para desarrolladores front-end con experiencia previa en CSS que quieren ponerse al día con el CSS de 2018.

    El primer libro, Modern CSS, trata transformaciones CSS, fuentes variables, Scroll Snap, SVG, temas con propiedades personalizadas controladas desde JavaScript, CSS en aplicaciones web progresivas (PWA) y rendimiento de CSS. El segundo, CSS Grid Layout: 5 Practical Projects, se dedica por completo a Grid Layout y lo combina con Flexbox, floats y mejora progresiva. El tercero, CSS Tools & Skills, se centra en el flujo de trabajo: automatización de tareas con Gulp.js, herramientas de optimización de CSS para PWA, linters y herramientas de calidad de código, depuración con las DevTools del navegador, minificación con CSSO y hojas de estilo para imprimir.

    La parte más práctica es la de Grid, con cinco proyectos guiados. El resto combina explicación con ejemplos de código. Al ser una recopilación de artículos, el nivel y el estilo varían entre capítulos y no hay un hilo conductor único, aunque la variedad de temas es una ventaja. Algunas herramientas, como Gulp, han perdido protagonismo frente a Vite o PostCSS, y no trata Sass ni container queries. Conviene leerlo sabiendo ya las bases de selectores, cascada y Flexbox.

    • CSS Grid
    • Flexbox
    • Mejora progresiva
    • Transformaciones
    • Fuentes variables
    • Custom properties
    • Scroll Snap
    • SVG
    • Rendimiento CSS
    • Gulp.js
    • Depuración con DevTools
    • Minificación con CSSO

    ¿Cómo enseña?

    TeóricoPráctico

    Teoría + práctica

    • ✗ Sin ejercicios
    • ✓ Incluye proyectos

    Proyectos

    Rediseño de un sitio con CSS Grid

    Se toma un sitio existente y se rehace su maquetación con CSS Grid Layout en lugar de técnicas antiguas.

    Layout de tarjetas al estilo Tumblr

    Rediseño con CSS Grid de una página basada en tarjetas, al estilo de Tumblr, para colocar y redimensionar los bloques de contenido.

    Layout responsive con Grid

    Parte de una demo maquetada con floats y la migra a CSS Grid: centrado de elementos, elementos que ocupan varias celdas y cambio de diseño en pantallas pequeñas.

    Layout con mejora progresiva

    Construye un diseño que pasa de floats a Flexbox y de Flexbox a Grid según el soporte del navegador, aplicando mejora progresiva.

    Formularios con CSS Grid

    Usa CSS Grid para maquetar formularios limpios y adaptables, alineando etiquetas y campos sin marcado extra.

    Más de CSS con nivel Avanzado