CSS avanzado - (CSS3)

Aprende a usar características avanzadas de CSS como selectores avanzados, gradients, multi-columnas y Flexbox.
4.5 (6 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.
238 students enrolled
Instructed by Marlon Ceballos Design / Web Design
$40
Take This Course
  • Lectures 72
  • Contents Video: 5 hours
  • Skill Level Expert Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2015 Spanish

Course 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.

What are the requirements?

  • Conocimientos básicos de HTML y CSS
  • Cualquier editor de código (Dreamweaver, Brackets, Coda, Sublime text, etc)

What am I going to get from this course?

  • 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

What is the target audience?

  • Diseñadores que quiera mejorar sus conocimientos previos de CSS

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introducción
01:26

Bienvenida y breve explicación del curso

00:47

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.

Section 2: Conceptos fundamentales
02:26

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

02:30

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

03:33

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

02:33

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

03:04

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

Section 3: Selectores
03:06

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

03:30

En este video explicamos los diferentes selectores de atributo

01:28

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

08:12

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

09:01

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

02:02

En este video conoceremos los Pseudo classes selectors

07:52

En este video conoceremos los Dynamic Pseudo classes selectors

05:33

En este video conoceremos y usaremos las Pseudo classes UI

03:18

En este video conoceremos los Structural pseudo class

06:28

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

07:26

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

03:52

En este video conoceremos y aprenderemos a usar Pseudo elements selectors

04:37

En este video conoceremos y aprenderemos a usar Child combinators selectors

09:58

En este video conoceremos y aprenderemos a usar Sibling combinators selectors

01:31

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

Section 4: Color
05:19

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

10:01

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.

02:32

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

00:58

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

04:39

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

Section 5: Gradients
01:58

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

05:22

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

03:36

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

01:25

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

06:45

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

05:36

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

05:06

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

03:26

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

02:01

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

Section 6: Fuentes web
06:09

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

10:37

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

03:57

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

06:06

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

02:04

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

01:50

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

Section 7: Fondos y border
03:11

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

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

04:15

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

03:28

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

06:33

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

04:00

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

03:25

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

04:43

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

03:14

En este video aprenderemos a usar la propiedad background

05:35

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

03:25

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

08:24

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

05:54

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

04:26

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

Section 8: Múltiples columnas
07:49

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

02:30

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

03:49

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

02:53

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

02:16

En este video aprenderemos a balancear el contenido de las columnas

02:40

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

01:18

En este video conoceremos el soporte actual para multi-columnas

Section 9: Flexbox
04:54

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

02:50

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

04:57

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

03:38

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

08:59

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

03:17

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

08:20

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

06:11

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

00:47

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

Section 10: Finalización
00:22

Despedida del curso CSS Avanzado (CSS3)

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Marlon Ceballos, 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.

Ready to start learning?
Take This Course