CSS Avanzado

Aprende las bases del posicionamiento de elementos y los conceptos bases que conlleva.

• 1.1 - Bienvenida al curso
  1:34
• 1.2 - Flujo y espacio reservado
  7:38
• 1.3 - Propiedades offset (top, left, right, bottom)
  7:32
• 1.4 - Position relative
  4:34
• 1.5 - Position absolute
  9:24
• 1.6 - Ejercicio tooltip
  12:53
• 1.7 - Ejercicio menú desplegable
  11:37

Comprende cómo se comportan los elementos posicionados dentro del eje Z.

• 2.1 - Repasando temas de posicionamiento
  2:28
• 2.2 - Position fixed
  16:09
• 2.3 - Position sticky
  3:53
• 2.4 - Stacking context
  7:15
• 2.5 - z-index
  11:14
• 2.6 - pointer-events
  2:33
• 2.7 - Ejercicio modal
  17:31

Aprende la sintaxis, comportamientos y usos prácticos de las variables CSS sin involucrar algún otro lenguaje.

• 3.1 - ¿Qué son las variables CSS?
  15:02
• 3.2 - Scope
  11:23
• 3.3 - Herencia y cascada
  3:17
• 3.4 - Diferencia entre variables CSS y variables SASS
  16:05
• 3.5 - Variables CSS en RWD
  14:04
• 3.6 - Variables CSS en creación de temas
  12:40
• 3.7 - Creando un sistema de botones
  6:49

Conoce los diversos tipos de pseudoelementos que hay y cómo puedes sacarles provecho.

• 4.1 - ¿Qué son los pseudoelementos?
  1:28
• 4.2 - ::after y ::before
  9:41
• 4.3 - attr()
  10:41
• 4.4 - unicode y quotes
  5:41
• 4.5 - Imágenes
  6:29
• 4.6 - Vacío
  19:20
• 4.7 - Pseudoelementos con variables CSS
  7:48
• 4.8 - ::first-line
  6:16
• 4.9 - ::first-letter
  5:05
• 4.10 - ::selection
  3:39

Personaliza tus listas con símbolos y maneja pseudoelementos específicos para estos elementos.

• 5.1 - Estructura y tipos de lista
  6:38
• 5.2 - list-style-type
  10:36
• 5.3 - List style image
  3:26
• 5.4 - List style position
  4:47
• 5.5 - Marker
  3:05
• 5.6 - Contadores
  6:38
• 5.7 - Contadores anidados
  4:17
• 5.8 - Ejercicio con contadores
  5:46
• 5.9 - Ejercicio calculadora con contadores
  13:24

Conoce el uso correcto de fuentes en la web y cómo controlar el texto que contienen.

• 6.1 - Fuentes para la web
  9:31
• 6.2 - @font-face
  8:57
• 6.3 - font-display
  6:35
• 6.4 - Creando un sistema de fuentes
  11:43
• 6.5 - Espacios en blanco
  7:30
• 6.6 - Flujo y desbordamiento
  17:21
• 6.7 - Resolver desbordamiento
  8:56
• 6.8 - Ejercicio controlar texto en vertical
  6:16

Aprende el comportamiento de las tablas, conoce todas las acciones que podemos hacer con formularios y maqueta ambos componentes con buenas prácticas.

• 7.1 - Estructura de tablas
  9:48
• 7.2 - Bordes en tablas
  4:21
• 7.3 - caption-side y empty-cell
  4:34
• 7.4 - table-layout
  3:24
• 7.5 - Maquetación y estilos de tablas
  7:06
• 7.6 - Apariencia de inputs
  9:18
• 7.7 - Resize
  4:09
• 7.8 - Focus
  7:43
• 7.9 - Placeholder shown
  3:25
• 7.10 - Required, optional
  4:52
• 7.11 - Enabled, disabled, readyonly
  3:34
• 7.12 - Valid
  8:04
• 7.13 - Estructura y layout de formularios
  3:28
• 7.14 - Ejercicio formulario
  22:29

Comprende y crea filtros estilo Instagram sin utilizar programas de diseño.

• 8.1 - Introducción a los filtros
  5:14
• 8.2 - Grayscale
  5:17
• 8.3 - Sepia
  2:25
• 8.4 - Invert
  4:15
• 8.5 - Hue-rotate
  6:11
• 8.6 - Brightness
  4:56
• 8.7 - Contrast
  2:48
• 8.8 - Saturate
  3:10
• 8.9 - Blur
  3:22
• 8.10 - Opacity
  2:25
• 8.11 - Drop-shadow
  4:01
• 8.12 - Ejercicio múltiples filtros en un elemento
  3:22
• 8.13 - Ejercicio sombra con filtros
  5:06

Comprende cómo funcionan los modos de fusión, de nuevo sin utilizar programas de diseño.

• 9.1 - Introducción a los blending modes
  6:24
• 9.2 - Multiply
  9:44
• 9.3 - Screen
  3:59
• 9.4 - Overlay
  5:49
• 9.5 - Hard light y Soft light
  3:53
• 9.6 - Color dodge
  4:42
• 9.7 - Darken y Lighten
  5:39
• 9.8 - Difference
  8:22
• 9.9 - Exclusión
  2:37
• 9.10 - Hue
  7:07
• 9.11 - Color
  3:15
• 9.12 - Saturation
  2:52
• 9.13 - Luminosity
  2:05
• 9.14 - isolation
  4:29

Aprende distintas formas de recortar elementos usando solamente código.

• 10.1 - Recorte rectangular/interior
  14:47
• 10.2 - Recorte circular
  5:23
• 10.3 - Recorte elíptico
  2:01
• 10.4 - Recorte poligonal
  7:18
• 10.5 - Recorte con SVG
  4:51
• 10.6 - Animaciones con recortes
  7:08
• 10.7 - Máscaras de recortes
  7:29
• 10.8 - Composición de máscaras
  8:39
• 10.9 - Banner parallax con máscaras
  9:08

Aprende todo lo que CSS puede hacer con el scroll de la página sin usar Javascript.

• 11.1 - Desbordamiento de contenido
  14:53
• 11.2 - Smooth scroll con CSS
  7:21
• 11.3 - Controlando posición final del scroll
  4:54
• 11.4 - Desplazamiento dentro de contenedores
  9:04
• 11.5 - Scroll fullpages
  12:26
• 11.6 - Personalización del scroll. (Parte 1)
  10:59
• 11.7 - Personalización del scroll. (Parte 2)
  7:57
• 11.8 - Ejercicio tema dark y white para scroll
  11:14

Aprende distintas formas de crear layouts de columnas para distribuir tu contenido en tu página.

• 12.1 - Holy grail layout responsive
  21:45
• 12.2 - Manejo de columnas. (Parte 1)
  12:24
• 12.3 - Manejo de columnas. (Parte 2)
  8:42
• 12.4 - Creando estructura de landing pages. (Parte 1)
  12:25
• 12.5 - Creando estructura de landing pages. (Parte 2)
  19:36
• 12.6 - ¿Cuál es el siguiente paso?
  2:20