CSS avanzado - (CSS3)
4.5 (12 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
270 students enrolled
Wishlisted Wishlist

Please confirm that you want to add CSS avanzado - (CSS3) to your Wishlist.

Add to Wishlist

CSS avanzado - (CSS3)

Aprende a usar características avanzadas de CSS como selectores avanzados, gradients, multi-columnas y Flexbox.
4.5 (12 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
270 students enrolled
Created by Marlon Ceballos
Last updated 7/2015
Spanish
Current price: $10 Original price: $40 Discount: 75% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Optimizar la aplicación de reglas de CSS mediante selectores avanzados
  • Usar nuevos modelos de color como RGBA y HSLA
  • Crear gradients o esfumados CSS
  • Crear patrones de repetición con CSS
  • Usar fuentes web con la regla @font-face y con servicios online
  • Crear múltiples columnas de contenido
  • Crear estructuras avanzadas usando Flexbox
View Curriculum
Requirements
  • Conocimientos básicos de HTML y CSS
  • Cualquier editor de código (Dreamweaver, Brackets, Coda, Sublime text, etc)
Description

En éste curso grabado por un "Adobe Certified Instructor - Web Master" aprenderás a usar aspectos avanzados de CSS mediante ejemplos prácticos.

El contenido del curso inicia con la explicación sobre conceptos fundamentales como estándares web y prefijos propietarios. En el segundo capítulo hablaremos sobre los selectores avanzados. Posteriormente aprenderemos a trabajar con nuevos modelos de color y con gradients o esfumados. En el capítulo 6 aprenderemos a usar diferentes servicios de fuentes web para pasar posteriormente al capítulo de fondos y bordes avanzados. En el capitulo 8 trabajaremos con múltiples columnas de contenido y finalizaremos aprendiendo a usar el módulo Flexbox.

Durante el curso usaré el editor de código Brackets, sin embargo tu puedes seguir los ejercicios del curso con el editor de código que prefieras mediante los mismos archivos que uso en los diferentes ejemplos y que tu podrás descargar.

Si deseas contratar éste u otro curso para un grupo empresarial o universidad de forma presencial u online puedes contactarme desde el sitio web de Xpert o por mensaje privado desde mi perfil de Udemy.

Who is the target audience?
  • Diseñadores que quiera mejorar sus conocimientos previos de CSS
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 72 Lectures Collapse All 72 Lectures 05:11:43
+
Introducción
2 Lectures 02:13

Bienvenida y breve explicación del curso

Preview 01:26

En este video veremos el uso de los archivos de ejemplo que hacen parte del curso. Desde esta clase puedes descargar los archivos de ejemplo.

Uso de archivos de ejemplo
00:47
+
Conceptos fundamentales
5 Lectures 14:06

En este video explicaremos qué son los estándares web

Preview 02:26

En este video explicamos qué es CSS3 y cómo está dividido en módulos

Qué es CSS3
02:30

En este video explicamos el estado actual de CSS3 en el proceso de estandarización

Estado actual de CSS3
03:33

En este video hablaremos sobre la forma de definir si podemos usar módulos de CSS3, además explicamos el mito de CSS4

Puedo usar CSS3?
02:33

En este video explicamos la necesidad de usar prefijos propietarios para algunas propiedades de CSS3

Prefijos propietarios
03:04
+
Selectores
15 Lectures 01:17:54

En este video repasaremos el conceptos de selectores y hablaremos de la necesidad de usar selectores avanzados

Preview 03:06

En este video explicamos los diferentes selectores de atributo

Attribute selectors
03:30

En este video explicaremos el editor que usaremos en los ejemplos y la forma como cargamos las carpetas de trabajo

Brackets y archivos
01:28

En este video mostraremos ejemplos prácticos del uso de Attribute selectors

Attribute selectors - ejemplos 1
08:12

En este video mostraremos mas ejemplos prácticos del uso de Attribute selectors

Attribute selectors - ejemplos 2
09:01

En este video conoceremos los Pseudo classes selectors

Pseudo classes selectors
02:02

En este video conoceremos los Dynamic Pseudo classes selectors

Dynamic Pseudo classes selectors
07:52

En este video conoceremos y usaremos las Pseudo classes UI

Pseudo classes UI
05:33

En este video conoceremos los Structural pseudo class

Structural pseudo class
03:18

En este video veremos ejemplos prácticos del uso de Structural pseudo class

Structural pseudo class - ejemplos
06:28

En este video veremos mas ejemplos prácticos del uso de Structural pseudo class

Preview 07:26

En este video conoceremos y aprenderemos a usar Pseudo elements selectors

Pseudo elements selectors
03:52

En este video conoceremos y aprenderemos a usar Child combinators selectors

Child combinators selectors
04:37

En este video conoceremos y aprenderemos a usar Sibling combinators selectors

Sibling combinators selectors
09:58

En este video conoceremos el soporte actual de los selectores avanzados entre los diferentes navegadores

Soporte actual de los selectores avanzados
01:31
+
Color
5 Lectures 23:29

En este video conoceremos los formatos de color que hacen parte del módulo nivel 3 de color

Formatos de color CSS3
05:19

En este video aprenderemos a usar de forma práctica los formatos de color que hacen parte del módulo nivel 3 de color: RBG, RGBA, HSL y HSLA.

Formatos de color CSS3 - ejemplos
10:01

En este video conoceremos la diferencia entre trabajar con la propiedad Opacity y trabajar con los formatos de color RGBA y HSLA

Preview 02:32

En este video conoceremos el soporte actual del módulo de color nivel 3 entre los diferentes navegadores

Soporte actual del módulo de color nivel 3
00:58

En este video conoceremos y aprenderemos a usar el keyword currentColor con cual podemos reutilizar descripciones de color simulando el comportamiento de una variable

El keyword currentColor
04:39
+
Gradients
9 Lectures 35:15

En este video hablaremos sobre los gradients en general y conoceremos la sintaxis de los Linear gradients o Gradients lineares

Gradients lineares
01:58

En este video aprenderemos de forma práctica a crear Linear gradients o gradients lineares

Gradients lineares - ejemplos
05:22

En este video aprenderemos de forma práctica a crear Linear gradients o gradients lineares con mas de 2 colores y modificando el desplazamiento o posición de cada color

Gradients lineares - ejemplos 2
03:36

En este video aprenderemos a agregar un gradient como fondo de una página web

Agregar un gradient como fondo de una página web
01:25

En este video conoceremos la sintaxis para crear Radial gradients o Gradients radiales y aprenderemos a crearlos de forma práctica

Gradients radiales
06:45

En este video aprenderemos a generar el código CSS de los gradients de forma automática usando el sitio web www.colorzilla.com

Generar el código de los gradients de forma automática
05:36

En este video conoceremos la sintaxis de los Repeating gradients o Gradients de repetición y aprenderemos a crearlos de forma práctica

Gradients de repetición
05:06

En este video aprenderemos a crear de forma práctica un patrón de repetición usando gradients CSS

Preview 03:26

En este video conoceremos el soporte actual del gradients CSS entre los diferentes navegadores

Soporte actual de gradients CSS
02:01
+
Fuentes web
6 Lectures 30:43

En este video explicaremos qué son las fuentes web, la regla @font-face y su sintaxis y conoceremos los diferentes formatos de fuentes web

Fuentes web
06:09

En este video aprendemos a usar de forma práctica fuentes web mediante la regla @font-face

La regla @font-face
10:37

En este video explicaremos diferentes servicios online de fuentes web y sus características

Servicios de fuentes web
03:57

En este video aprenderemos a usar la librería de fuentes web del servicio Adobe Typekit

Adobe Typekit
06:06

En este video aprenderemos a usar la librería de fuentes web del servicio Google fonts

Preview 02:04

En este video aprenderemos a usar la librería de fuentes web del servicio Adobe Edge Web Fonts

Adobe Edge Web Fonts
01:50
+
Fondos y border
13 Lectures 01:00:33

En este video repasaremos al propiedades básicas para trabajar fondos o backgrounds

como background-color, background-image y background-repeat

Propiedades básicas
03:11

En este video video aprenderemos a controlar la repetición de fondos mediante la propiedad background-repeat

Propiedad background-repeat
04:15

En este video aprenderemos definir si el fondo de un elemento es afectado o no por el scroll mediante la propiedad background-attachment

Preview 03:28

En este video aprenderemos a controlar la posición de las imágenes de fondo mediante la propiedad background-position

Propiedad background-position
06:33

En este video aprenderemos a usar la propiedad background-clip y sus valores

Propiedad background-clip
04:00

En este video aprenderemos a definir el origen del fondo mediante la propiedad background-origin

Propiedad background-origin
03:25

En este video aprenderemos a definir el tamaño de las imágenes de fondo con la propiedad background-size

Propiedad background-size
04:43

En este video aprenderemos a usar la propiedad background

Propiedad background
03:14

En este video aprenderemos a definir múltiples fondos para un mismo elemento

Múltiples fondos
05:35

En este video repasaremos las propiedades básicas para definir bordes y aprenderemos a usar la propiedad border

Propiedad border
03:25

En este video aprenderemos a crear bordes basados en imágenes

Bordes de imágenes
08:24

En este video aprenderemos a crear esquinas redondeadas mediante la propiedad border-radius

Propiedad border-radius
05:54

En este video aprenderemos a crear sombras a las cajas usando la propiedad box-shadow

Propiedad box-shadow
04:26
+
Múltiples columnas
7 Lectures 23:15

En este video aprenderemos a definir múltiples columnas de contenido

Preview 07:49

Es este video aprenderás a instalar y usar una extensión en Brackets para generar automáticamente los prefijos propietarios

Extensión para prefijos
02:30

En este video aprenderemos a definir el tamaño del espacio entre columnas y a crear una línea intermedia

Propiedades column-gap y column-rule
03:49

En este video aprenderemos a definir particiones de contenido dentro de las columnas

Propiedades break
02:53

En este video aprenderemos a balancear el contenido de las columnas

Propiedad column-fill
02:16

En este video aprenderemos a definir elementos que se van a extender entre las columnas de un elemento

Propiedad column-span
02:40

En este video conoceremos el soporte actual para multi-columnas

Soporte actual
01:18
+
Flexbox
9 Lectures 43:53

En este video conoceremos el módulo Flexbox o Flex Layout Mudule de CSS y aprenderemos a usar el valor flex de la propiedad display

Modulo Flexbox
04:54

En este video aprenderemos a controlar la alineación de los Flex items mediante la propiedad flex-direction

Propiedad flex-direction
02:50

En este video aprenderemos a definir si los Flex items se organizan en una o varias filas mediante la propiedad flex-wrap

Propiedad flex-wrap
04:57

En este video aprenderemos a cambiar el orden de los flex items mediante la propiedad order

Propiedad order
03:38

En este video aprenderemos a controlar el tamaño de los Flex items mediante las propiedades flex-grow, flex-shrink, flex-basis y flex

Preview 08:59

En este video aprenderemos a alinear horizontalmente los Flex items respecto al Flex container mediante la propiedad justify-content

Propiedad justify-content
03:17

En este video aprenderemos a alinear verticalmente los Flex items mediante las propiedades align-items y align-self

Alineación vertical
08:20

En este video aprenderemos a alinear múltiples filas de Flex items mediante la propiedad align-content

Propiedad align-content
06:11

En este video conoceremos el soporte actual al módulo Flexbox

Soporte actual
00:47
+
Finalización
1 Lecture 00:22

Despedida del curso CSS Avanzado (CSS3)

Despedida
00:22
About the Instructor
Marlon Ceballos
4.5 Average rating
1,356 Reviews
20,557 Students
20 Courses
Adobe Community Professional y Adobe Certified Instructor

Consultor en tecnologías y aplicaciones Adobe para multimedia, web y publicaciones digitales con más de 20 años de experiencia asesorando empresas latinoamericanas que van desde diarios e imprentas hasta agencias interactivas.

Adobe Community Professional, Adobe Certified Expert y Adobe Certified Instructor en las últimas versiones de Photoshop, Lightroom Illustrator, InDesign, Acrobat, Flash, Dreamweaver y Muse. Posee las certificaciones especializadas ACE - Design Master y ACE - Web Master. Ha desarrollado y grabado cursos para Lynda y Udemy.

Actualmente es director de Xpert[dot]co, un centro de capacitación online sobre tecnologías gráficas y de Xpert[dot]video, una biblioteca de contenidos de aprendizaje.