¿Quieres aprender CSS? Aquí puedes ver una hoja de ruta para desarrolladores donde podrás aprender de cero a cien todo lo relacionado con este lenguaje de estilos. En el video puedes ver un resumen de todo lo que vas a poder ver en este artículo:

 

Paso a paso vas a poder ir viendo más de 60 recursos gratis agrupados según el nivel de CSS. Ahí lo tienes:

1.- Fundamentos CSS 1.0

1.1.- Cómo el navegador analiza HTML/CSS3

Cómo funcionan los navegadores -> en inglés

1.2.- Cómo añadir CSS a una página web

Formas de añadir CSS en una página web -> en inglés

1.3.- Sintaxis: selector, bloque de declaración, propiedad, valor declarado

Declaraciones de CSS -> en español

1.4.- Selectores básicos: universal, type, class, id, attribute

Todos estos artículos están escritos en español.

Selectores universales

Selectores de clase

Selectores de tipo, clase e ID

Selectores de atributo

Selectores de ID

1.5.- Cascada y especificidad: cómo resolver una declaración CSS en conflicto

1.6.- Herencia entre elementos

Video para entender como funciona la herencia en CSS -> en inglés

Herencia en CSS -> en castellano

 

 

2.- Fundamentos CSS 2.0

2.1.- Cómo funciona el modelo de caja

The CSS Box Model -> en inglés

2.2.- Conozce los diferentes tipos de cajas

Sizing items in CSS

CSS Borders

CSS Padding

CSS margin Property

2.3.- ¿Cómo dimensionar los elementos CSS?

CSS Text

2.4.- Aprende las propiedades de relleno, margen, ancho, alto y borde


CSS Units Explained

CSS Units

2.5.- ¿Cómo aplicar estilo al texto?

Using CSS custom properties (variables)

 

 

3.- Fundamentos CSS 3.0: Capas

3.1.- Conozce la diferencia entre las propiedades de posición: absoluta, relativa, fija, estática y fija

CSS Layout – The position Property

3.2.- Aprende flexbox, grid, floats


A Complete Guide to Flexbox

A Complete Guide to Grid

Introduction to CSS layout

3.3- Práctica: comienza a crear diseños más pequeños, como barras de navegación, y desarrolla tus habilidades a partir de ahí

Fundamental CSS comprehension

 

 

4.- Fundamentos css 4.0: selectores avanzados

4.1.- Selector de agrupación: lista de selectores

Selector list

4.2.- Selectores de combinador: descendiente, hijo, hermano general, hermano adyacente, columna

Combinators

4.3.- Pseudo selectores: pseudo clases, pseudo elementos


Pseudo-classes and pseudo-elements

 

 

5.- CSS intermedio: media queries

5.1.- Conozce los media types

Responsive web design basics

5.2.- Comprende cuando se usa el ancho mínimo y el ancho máximo

Media Queries Demystified: CSS Min-Width and Max-Width

5.3.- Aprende el primer enfoque móvil

What is Mobile First?

5.4.- Cómo encontrar y establecer los screen breakpoints

How to choose breakpoints

5.5.- Práctica: crea una navegación responsive

How TO – Responsive Top Navigation

 

 

6.- CSS intermedio: transiciones y animaciones

6.1.- Aprende las propiedades de la transición

CSS Transition Tutorial – CSS Full Tutorial

CSS Transitions

6.2.- Cómo aplicar transiciones en pseudoclases

An Interactive Guide to CSS Transitions

6.3.- Aprende de algunos ejemplos

CSS 2D Transforms

6.4.- Crea animaciones básicas

 

 

7.- CSS intermedio: metodologías – BEM

7.1.- Descubre por qué deberías de considerar BEM

BEM 101

BEM

7.2.- Aprende qué es un bloque, elemento y modificador

CSS with BEM

 

 

8.- CSS avanzado: preprocesadores SAAS

8.1.- Variables

Variables

8.2.- Anidamiento

Sass Nested Rules and Properties

8.3.- Parciales

Partials

8.4.- Mixins

@mixin and @include

8.5.- Importaciones

@import

8.6.- Operadores

Operators

8.7.- Funciones

@function

 

 

9.- CSS avanzado: arquitectura

9.1.- Aprende arquitectura: Resúmenes, Vendedores, Base, Diseños, Componentes, Páginas, Temas

Sass Architecture

 

 

10.- CSS frameworks

10.1.- Tailwind CSS

10.2.- Bootstrap

 

 

Fuente original