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 4 opiniones)

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

CSS ya no solo 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 ed.team 🖱 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

  • Bienvenida al curso

  • Flujo y espacio reservado

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

  • Position relative

  • Position absolute

  • Ejercicio tooltip

  • Ejercicio menú desplegable

Position ll

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

  • Repasando temas de posicionamiento

  • Position fixed

  • Position sticky

  • Stacking context

  • z-index

  • pointer-events

  • Ejercicio modal

Variables CSS

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

  • ¿Qué son las variables CSS?

  • Scope

  • Herencia y cascada

  • Diferencia entre variables CSS y variables SASS

  • Variables CSS en RWD

  • Variables CSS en creación de temas

  • Creando un sistema de botones

Pseudo elementos

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

  • ¿Qué son los pseudoelementos?

  • ::after y ::before

  • attr()

  • unicode y quotes

  • Imágenes

  • Vacío

  • Pseudoelementos con variables CSS

  • ::first-line

  • ::first-letter

  • ::selection

Listas y contadores

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

  • Estructura y tipos de lista

  • list-style-type

  • List style image

  • List style position

  • Marker

  • Contadores

  • Contadores anidados

  • Ejercicio con contadores

  • Ejercicio calculadora con contadores

Texto

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

  • Fuentes para la web

  • @font-face

  • font-display

  • Creando un sistema de fuentes

  • Espacios en blanco

  • Flujo y desbordamiento

  • Resolver desbordamiento

  • 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

  • Estructura de tablas

  • Bordes en tablas

  • caption-side y empty-cell

  • table-layout

  • Maquetación y estilos de tablas

  • Apariencia de inputs

  • Resize

  • Focus

  • Placeholder shown

  • Required, optional

  • Enabled, disabled, readyonly

  • Valid

  • Estructura y layout de formularios

  • Ejercicio formulario

Filtros

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

  • Introducción a los filtros

  • Grayscale

  • Sepia

  • Invert

  • Hue-rotate

  • Brightness

  • Contrast

  • Saturate

  • Blur

  • Opacity

  • Drop-shadow

  • Ejercicio múltiples filtros en un elemento

  • Ejercicio sombra con filtros

Blending modes

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

  • Introducción a los blending modes

  • Multiply

  • Screen

  • Overlay

  • Hard light y Soft light

  • Color dodge

  • Darken y Lighten

  • Difference

  • Exclusión

  • Hue

  • Color

  • Saturation

  • luminosity

  • isolation

Figuras, recortes y máscaras

Aprende distintas formas de recortar elementos usando solamente código

  • Recorte rectangular/interior

  • Recorte circular

  • Recorte elíptico

  • Recorte poligonal

  • Recorte con SVG

  • Animaciones con recortes

  • Máscaras de recortes

  • Composición de máscaras

  • Banner parallax con máscaras

Scroll

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

  • Desbordamiento de contenido

  • Smooth scroll con CSS

  • Controlando posición final del scroll

  • Desplazamiento dentro de contenedores

  • Scroll fullpages

  • Personalización del scroll parte 1

  • Personalización del scroll parte 2

  • Ejercicio tema dark y white para scroll

Layout

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

  • Holy grail layout responsive

  • Manejo de columnas

  • Manejo de columnas II

  • Creando estructura de landing pages parte 1

  • Creando estructura de landing pages parte 2

  • ¿Cuál es el siguiente paso?

Avatar

Prof. Alexis Mora Angulo

@jopzikVer perfil

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

Sigue aprendiendo con

Variables CSS

Variables CSS

Avatar

Alvaro Felipe

5

4.9

Responsive Web Design

Responsive Web Design

Avatar

Alvaro Felipe

5

4.8

Animaciones con CSS

Animaciones con CSS

Avatar

Alvaro Felipe

5

4.9

Sass Desde Cero

Sass Desde Cero

Avatar

Alvaro Felipe

5

4.9

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 Martínez

5

4.9

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

Premium

$3020USD

En un solo pago anual de $360 240 USD

Gráfico de tabla

Alcanza tus metas con todos los cursos y funciones premium.

unicorn-head-smile¿Tienes un EDycupón?
  • Paga 8 meses y obtén 12

  • Todos los beneficios del plan gratis

  • Acceso completo a todo EDteam (+150 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

  • Paga 8 meses y obtén 12

  • Todos los beneficios del plan gratis

  • Acceso completo a todo EDteam (+150 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

$48USD

$360 240 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?

4 calificaciones de los estudiantes (5.0)

Cargando Calificaciones...

Sigue aprendiendo con

Variables CSS

Variables CSS

Avatar

Alvaro Felipe

5

4.9

Responsive Web Design

Responsive Web Design

Avatar

Alvaro Felipe

5

4.8

Animaciones con CSS

Animaciones con CSS

Avatar

Alvaro Felipe

5

4.9

Sass Desde Cero

Sass Desde Cero

Avatar

Alvaro Felipe

5

4.9

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 Martínez

5

4.9

Figma desde cero

Figma desde cero

Avatar

Alvaro Felipe

5

4.8