CSS Avanzado

Curso: CSS Avanzado

avanzado
13 horas

También puedes acceder a todos los cursos con un solo pago

Sube a premium

CSS Avanzado

Toma este curso
CSS Avanzado

Curso: CSS Avanzado

avanzado
+13 horas
Sube a premium

Y accede a todos los cursos con un solo pago

CSS Avanzado

CSS Avanzado

Aprende a profundidad los diversos módulos que tiene CSS3.

Nivel: avanzado
Fecha de lanzamiento: 20 de jul.
Duración: +13 horas
(Ver temario)
Calificación: 5.0
(Ver 40 opiniones)

* Accede a este y a todos los cursos, talleres y especialidades

CSS ya no sólo se encarga de ayudarnos a hacer páginas bonitas. Con este curso lograrás entender de forma detallada cómo funcionan algunos de los módulos más importantes de CSS. Verás casos prácticos en cada clase y notarás la fuerza y capacidad que tiene a pesar de ser un lenguaje de estilos.

¿Qué aprenderás en este curso?

  • Comprender el posicionamiento de los elementos.
  • Manejo de variables y pseudoelementos.
  • Usar fuentes para la web.
  • Filtros y blending modes.
  • Realizar recortes sin programas de edición.
  • Manejo de layout/columnas.

¿Qué conocimientos previos necesitas?

Avatar

Prof. Alexis Mora Angulo

@jopzikVer perfil

🌮 Orgulloso nayarita y mexicano 💻 UI/UX y docente en EDteam 🖱 Hago cosas en Codepen 🏃🏾‍♂️ Runner de fin de semana 🌊 #NoTeDetengas

Temario del curso

Position

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

  • 1.1 - Bienvenida al curso

  • 1.2 - Flujo y espacio reservado

  • 1.3 - Propiedades offset (top, left, right, bottom)

  • 1.4 - Position relative

  • 1.5 - Position absolute

  • 1.6 - Ejercicio tooltip

  • 1.7 - Ejercicio menú desplegable

Position ll

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

  • 2.1 - Repasando temas de posicionamiento

  • 2.2 - Position fixed

  • 2.3 - Position sticky

  • 2.4 - Stacking context

  • 2.5 - z-index

  • 2.6 - pointer-events

  • 2.7 - Ejercicio modal

Variables CSS

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?

  • 3.2 - Scope

  • 3.3 - Herencia y cascada

  • 3.4 - Diferencia entre variables CSS y variables SASS

  • 3.5 - Variables CSS en RWD

  • 3.6 - Variables CSS en creación de temas

  • 3.7 - Creando un sistema de botones

Pseudo elementos

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

  • 4.1 - ¿Qué son los pseudoelementos?

  • 4.2 - ::after y ::before

  • 4.3 - attr()

  • 4.4 - unicode y quotes

  • 4.5 - Imágenes

  • 4.6 - Vacío

  • 4.7 - Pseudoelementos con variables CSS

  • 4.8 - ::first-line

  • 4.9 - ::first-letter

  • 4.10 - ::selection

Listas y contadores

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

  • 5.1 - Estructura y tipos de lista

  • 5.2 - list-style-type

  • 5.3 - List style image

  • 5.4 - List style position

  • 5.5 - Marker

  • 5.6 - Contadores

  • 5.7 - Contadores anidados

  • 5.8 - Ejercicio con contadores

  • 5.9 - Ejercicio calculadora con contadores

Texto

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

  • 6.1 - Fuentes para la web

  • 6.2 - @font-face

  • 6.3 - font-display

  • 6.4 - Creando un sistema de fuentes

  • 6.5 - Espacios en blanco

  • 6.6 - Flujo y desbordamiento

  • 6.7 - Resolver desbordamiento

  • 6.8 - Ejercicio controlar texto en vertical

Tablas y formularios

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

  • 7.2 - Bordes en tablas

  • 7.3 - caption-side y empty-cell

  • 7.4 - table-layout

  • 7.5 - Maquetación y estilos de tablas

  • 7.6 - Apariencia de inputs

  • 7.7 - Resize

  • 7.8 - Focus

  • 7.9 - Placeholder shown

  • 7.10 - Required, optional

  • 7.11 - Enabled, disabled, readyonly

  • 7.12 - Valid

  • 7.13 - Estructura y layout de formularios

  • 7.14 - Ejercicio formulario

Filtros

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

  • 8.1 - Introducción a los filtros

  • 8.2 - Grayscale

  • 8.3 - Sepia

  • 8.4 - Invert

  • 8.5 - Hue-rotate

  • 8.6 - Brightness

  • 8.7 - Contrast

  • 8.8 - Saturate

  • 8.9 - Blur

  • 8.10 - Opacity

  • 8.11 - Drop-shadow

  • 8.12 - Ejercicio múltiples filtros en un elemento

  • 8.13 - Ejercicio sombra con filtros

Blending modes

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

  • 9.2 - Multiply

  • 9.3 - Screen

  • 9.4 - Overlay

  • 9.5 - Hard light y Soft light

  • 9.6 - Color dodge

  • 9.7 - Darken y Lighten

  • 9.8 - Difference

  • 9.9 - Exclusión

  • 9.10 - Hue

  • 9.11 - Color

  • 9.12 - Saturation

  • 9.13 - luminosity

  • 9.14 - isolation

Figuras, recortes y máscaras

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

  • 10.1 - Recorte rectangular/interior

  • 10.2 - Recorte circular

  • 10.3 - Recorte elíptico

  • 10.4 - Recorte poligonal

  • 10.5 - Recorte con SVG

  • 10.6 - Animaciones con recortes

  • 10.7 - Máscaras de recortes

  • 10.8 - Composición de máscaras

  • 10.9 - Banner parallax con máscaras

Scroll

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

  • 11.1 - Desbordamiento de contenido

  • 11.2 - Smooth scroll con CSS

  • 11.3 - Controlando posición final del scroll

  • 11.4 - Desplazamiento dentro de contenedores

  • 11.5 - Scroll fullpages

  • 11.6 - Personalización del scroll. (Parte 1)

  • 11.7 - Personalización del scroll. (Parte 2)

  • 11.8 - Ejercicio tema dark y white para scroll

Layout

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

  • 12.1 - Holy grail layout responsive

  • 12.2 - Manejo de columnas. (Parte 1)

  • 12.3 - Manejo de columnas. (Parte 2)

  • 12.4 - Creando estructura de landing pages. (Parte 1)

  • 12.5 - Creando estructura de landing pages. (Parte 2)

  • 12.6 - ¿Cuál es el siguiente paso?

Avatar

Prof. Alexis Mora Angulo

@jopzikVer perfil

🌮 Orgulloso nayarita y mexicano 💻 UI/UX y docente en EDteam 🖱 Hago cosas en Codepen 🏃🏾‍♂️ Runner de fin de semana 🌊 #NoTeDetengas

Sigue aprendiendo con

CSS desde cero (2020)

CSS desde cero (2020)

Avatar

Alvaro Felipe

5

4.9

Inglés desde cero

Inglés desde cero

Avatar

David Salomón

5

4.8

Figma desde cero

Figma desde cero

Avatar

Alvaro Felipe

5

4.8

Empieza a aprender CSS Avanzado

¿Aún no te decides? Mira una clase gratis

Mostrar precios en

Por  $ USD  más obtén
una suscripción anual

Premium

Ahorra $180 USD
$360180USD

El mes te sale a $30 15 USD

Ahorra 50 %

Ahorra 50 %

Ahorra 50 %

Gráfico de tabla

Impulsa tu carrera con acceso a todos los cursos y especialidades

unicorn-head-smile¿Tienes un EDycupón?
  • ¡Estudia 12 meses por el precio de 6!

  • Todos los beneficios del plan gratis

  • Acceso completo a todo EDteam (+170 cursos)

  • Sin límite de reproducciones diarias

  • Certificado de culminación

  • 2 cursos nuevos por semana

  • Reproducción automática de clases

  • Descarga recursos adicionales de cursos

  • Clases y talleres bonus en cursos

  • ¡Estudia 12 meses por el precio de 6!

  • Todos los beneficios del plan gratis

  • Acceso completo a todo EDteam (+170 cursos)

  • Sin límite de reproducciones diarias

  • Certificado de culminación

  • 2 cursos nuevos por semana

  • Reproducción automática de clases

  • Descarga recursos adicionales de cursos

  • Clases y talleres bonus en cursos

  • Ver todas las características

* Los planes premium no tienen permanencia obligatoria. Cancela cuando quieras

Sólo este curso

$4829USD

$30 15 USD

Gráfico de tabla

Conserva este curso de por vida y obtén un certificado con un único pago.

  • Acceso de por vida a este curso

  • Certificado de culminación

  • Red social educativa

  • Sin límite de reproducciones diarias

  • Sin anuncios

  • Guarda tus apuntes de clases

  • Reproducción automática de clases

  • Guarda el avance de tus estudios

  • Descarga los recursos de las clases

  • Acceso de por vida a este curso

  • Certificado de culminación

  • Red social educativa

  • Ver todas las características

¿Quieres regalar este curso?

40 calificaciones de los estudiantes (5.0)

Cargando Calificaciones...

Sigue aprendiendo con

CSS desde cero (2020)

CSS desde cero (2020)

Avatar

Alvaro Felipe

5

4.9

Inglés desde cero

Inglés desde cero

Avatar

David Salomón

5

4.8

Figma desde cero

Figma desde cero

Avatar

Alvaro Felipe

5

4.8