hoja de ruta css rw

Hoja de ruta para desarrolladores CSS con más de 60 recursos GRATIS

¿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

CSS Flexbox: aprende paso a paso

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

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *