¿Quieres aprender las variables CSS? ¡Aquí está mi curso gratuito de 8 partes!

Foto de Mikael Kristenson en Unsplash

CSS Variables es una nueva tecnología emocionante para los navegadores modernos. Aporta el poder de las variables a CSS, lo que resulta en menos repetición, mejor legibilidad y más flexibilidad.

Para ayudarlo a comenzar, he creado un curso gratuito sobre Variables CSS en Scrimba.

Esta es una continuación de nuestra serie de cursos gratuitos de CSS. Anteriormente, lanzamos cursos sobre CSS Grid y Flexbox. En conjunto, obtuvieron más de 20 mil inscripciones.

La estructura del curso

El curso contiene 8 screencasts interactivos. Todos duran entre 3 y 6 minutos, ya que mi objetivo es enseñarte las variables CSS lo más rápido posible. Al final de algunos de ellos, te daré un desafío y te animaré a jugar con el código de forma interactiva. Esto se puede hacer directamente en el navegador, ya que los screencasts de Scrimba lo hacen posible.

A lo largo del curso, trabajaremos con un sitio web de cartera muy simple, ya que nos brinda la capacidad de resaltar los casos de uso más importantes para las variables CSS.

Ahora echemos un vistazo a cada una de las lecciones.

Lección # 1: ¿Por qué aprender las variables CSS?

En el primer screencast, hablaré sobre por qué deberías aprender las variables CSS. Analizaré los beneficios generales, así como sus ventajas sobre las variables SASS y LESS.

Lección # 2: tu primera variable CSS

Luego saltaremos directamente al código. Primero te mostraré cómo creas una variable CSS y luego te pediré que hagas lo mismo. Es importante que realmente codifique, y no solo mire los screencasts, ya que mejora el conocimiento.

: root {
  --red: # ff6f69;
}
cuerpo {
  color: var (- rojo);
}

Lección # 3: anulación de variables

Continuaremos con la anulación, un concepto genial que es posible ya que las Variables CSS tienen acceso al DOM y se heredan en la jerarquía. Esto los separa claramente de las variables SASS y LESS, que funcionan más como constantes que variables cuando llegan al navegador, y no tienen conocimiento del DOM.

Lección # 4: variables locales

Las variables locales son variables que solo están disponibles en un determinado alcance, por ejemplo dentro del encabezado o la sección de la barra lateral de su aplicación. Si intenta acceder desde otro ámbito, no se definirá.

Lección # 5: Temas con variables CSS

Los temas son uno de los mayores beneficios de las variables CSS. Por temas, no solo estoy hablando de temas completos del sitio web, sino también de temas específicos de los componentes, que son un caso de uso más normal (por ejemplo, cambiar visualmente un elemento a destacado para que se destaque entre la multitud).

Aquí estamos usando temas para que uno de nuestros elementos en la cuadrícula se destaque de los demás.

Lección # 6: Cambiar variables con JavaScript

También puede cambiar las variables CSS con JavaScript, lo cual es muy útil. Esto abre la posibilidad de permitir a sus usuarios cambiar sus variables. De nuevo, algo que no es posible con las variables LESS y SASS. Un ejemplo muy relevante de esto es permitir a los usuarios ajustar el tamaño general de la fuente en su sitio. Esto lo hará más accesible para personas con mala visión.

Lección # 7: Capacidad de respuesta con variables CSS

Dado que las variables CSS tienen acceso al DOM, también se pueden cambiar según el tamaño de la pantalla. En realidad, esto es solo un ejemplo de anulación, pero creo que merece un screencast completamente nuevo, ya que la capacidad de respuesta es bastante importante en estos días. Los desarrolladores front-end deberían usar todo lo que facilita la capacidad de respuesta.

Lección # 8: Variables CSS y herencia

Aunque hablo sobre herencia durante todo el curso, terminaremos el curso con algunas notas adicionales, ya que hay un par de casos de uso que podría imaginar que funcionan, pero que no.

Y eso es. Al pasar por estos rápidos screencasts, usted tendrá una sólida comprensión de las variables CSS. Mirarlos te llevará menos de 30 minutos, y también puedes ajustar la velocidad de reproducción para hacerlo aún más rápido.

En otras palabras: este curso es probablemente la forma más rápida de aprender las variables CSS correctamente.

Los desafíos pueden, por supuesto, hacer que tome un poco más de tiempo, pero son voluntarios. Tú eliges qué tan interactivo quieres que sea este curso.

El formato Scrimba

El curso se creó con Scrimba, una herramienta de codificación de pantalla interactiva de la cual soy cofundador, junto con Magnus y Sindre.

Como mencioné anteriormente, lo único con Scrimba es que los screencasts son completamente interactivos, lo que significa que puede editar el código dentro de los casts.

Aquí hay un gif que explica el concepto:

Pausa el screencast → Edita el código → ¡Ejecútalo! → Ver tus cambios

Esto es ideal para cuando sienta que necesita experimentar con el código para comprenderlo adecuadamente, o cuando simplemente desee copiar una parte del código.

Además, los screencasts de Scrimba pesan el 1% de los videos en tamaño de archivo, lo que significa que es mucho más fácil de ver incluso cuando su conexión a Internet es lenta.

Así que mira el curso hoy, y feliz codificación :)

¡Gracias por leer! Mi nombre es Per, soy cofundador de Scrimba y me encanta ayudar a las personas a aprender nuevas habilidades. Sígueme en Twitter si deseas recibir notificaciones sobre nuevos artículos y recursos.