Pasar al contenido principal

🔥 ¡Nuevo curso! JavaScript en el navegador. Aprende a manipular lo que ves en pantalla y responder a la interacción del usuario.

Alexys Lozada
Jose Luján
Luis Avilés
Álvaro Felipe, Jon MirCha
Álvaro Felipe
Jose Luján
Alberto Quiroga
Alexys Lozada, Álvaro Felipe, Daniel Romero, Jon MirCha
Daniel Romero
Alexys Lozada, Daniel Romero
Álvaro Felipe
Francisco Romero
Alexys Lozada
Jose Luján
Daniel Romero
Jon MirCha
Álvaro Felipe
Daniel Romero
Jose Luján
Álvaro Felipe
Freddy Cahuas
Álvaro Felipe
Alexys Lozada
Jose Luján
Luis Avilés
Álvaro Felipe, Jon MirCha
Álvaro Felipe
Jose Luján
Alberto Quiroga
Alexys Lozada, Álvaro Felipe, Daniel Romero, Jon MirCha
Daniel Romero
Alexys Lozada, Daniel Romero
Álvaro Felipe
Francisco Romero
Alexys Lozada
Jose Luján
Daniel Romero
Jon MirCha
Álvaro Felipe
Daniel Romero
Jose Luján
Álvaro Felipe
Freddy Cahuas
Álvaro Felipe
Luis Avilés
Álvaro Felipe
Jon MirCha
https://app.ed.team/cursos/variables-css?46
Minicurso Premium Variables CSS

Variables CSS

¡CSS al fin tiene variables de forma nativa! ¡Y con soporte total de los navegadores!

En este minicurso te enseñaré los trucos y tips que necesitas saber para usar las variables CSS como un pro. Porque no basta declararlas y luego invocarlas. Podemos redefinirlas, aprovechar su herencia o su cascada, manipularlas con JavaScript, crear templates, aprovecharlas en Responsive Web Design, utilizarlas en conjunto con Sass y un largo etcétera.

A través de teoría y ejemplos este minicurso hará que empieces a usar las variables CSS sin miedo y en todos tus proyectos hoy mismo.

1. ¿Qué son las variables CSS?

  • Definición
  • Invocación
  • Cuando usarlas y cuando no

2. Scope

  • Scope de bloque vs Scope de DOM
  • Redefinir variables con cascada
  • Variables CSS desde varios archivos
  • Debug desde el navegador
  • Variables CSS inline

3. Variables CSS vs variables Sass

  • Interpolación
  • Scope
  • Operaciones y cálculos
  • En que casos usar CSS y en qué casos usar Sass

4. Variables CSS en Responsive Web Design

  • Aprovechar la cascada en media queries
  • Ejercicio: tipografías rwd
  • Ejercicio: columnas rwd

5. Obtener y manipular variables CSS con JavaScript

  • CSSOM
  • Estilos computados en root y en elementos
  • Setear variables CSS

6. Ejercicio: Indicador de scroll Ver gratis

  • Leer scroll con JavaScript
  • Modificar variables según la posición del scroll

7. Ejercicio: selector de color RGB

  • Manipular colores con variables CSS
  • Setear variables css con inputs de HTML

8. Variables CSS en variaciones de componentes

  • Buenas prácticas para variaciones
  • Crear variaciones de botones
  • Crear variaciones de tarjetas de productos

9. Crear temas con variables CSS

  • Buenas prácticas: Separar estilos de layout de estilos de temas
  • Crear temas con variables CSS
  • Crear objetos javascript para almacenar temas CSS
  • Crear selector de tema para que el usuario escoja

¿Por qué estudiar en EDteam?

Profesores reales

Somos la única plataforma con profesores reales con años de experiencia en aulas.

Aprende desde cero

Si quieres aprender algo nuevo, sin conocimientos previos, no hay mejor opción en español que EDteam.

Proyecto de fin de curso

Creamos el concepto de proyecto de fin de curso que se ha puesto de moda en todas las plataformas online.

Sin mensualidades

Líbrate de las ataduras. Paga solo lo que necesites aprender y estudiálo a tu ritmo y con acceso de por vida.

Secuencia de aprendizaje

Cursos desde cero que continuan con cursos avanzados para que aprendas en orden y sin perderte.

Clases bonus gratuitas

Accede a los EDtaller Premium, clases extra de todos los cursos (incluso de los que no hayas comprado) 100% gratis.

asd123
0
15
Variables CSS
Profesor
Comprar $

Acceso de por vida a este curso

Suscribirse $ 30 USD / mes Acceso a todos los cursos de EDteam

Medios de pago

logo Paypal

Acceso en segundos

Peru Colombia México Bolivia Western Union

Acceso en 24h

Horarios

Clases grabadas