Aprende CSS3 desde Cero

curso-aprende-css3-desde-0Las hojas de estilos en cascadas (CSS) son un lenguaje utilizado para describir el aspecto visual de una página web o cualquier aplicación virtual. Usando CSS podemos cambiar colores, margenes, bordes, tipografias, fondos, y mucho más. El contenido de este curso gratuito de CSS3 desde Cero consolidará las Fundaciones CSS desde las más básicas hasta un nivel muy avanzado.

Curso CSS3, aprende desde 0

Introducción a CSS3

En este primer bloque Aprenderemos los conceptos básicos y fundamentales de CSS

#1 Introducción

Bienvenida al Curso de CSS3 desde Cero 2014

#2 Un poco de historia de CSS

Un la historia y evolución de la CSS, por lo que fue creado, y cómo beneficia a los diseñadores y desarrolladores.

#3 Conceptos básicos

Veremos una visión general de los conceptos fundamentales de CSS y la terminología, y como aplicarlos a una pagina web.

Selectores Básicos

Por medio de los selectores elegimos fácilmente a determinados elementos HTML del documento web para luego aplicar los estilos CSS.

#4 Selectores básicos

Los Selectores se utilizan para seleccionar un de elemento en el documento HTML para aplicarle estilos. Veremos el selector universal y También los selectores de elementos de etiquetas HTML.

#5 Selectores Id y Class

Los selectores de clases y los de identificación permiten que apuntamos específicamente a los elementos en función de sus atributos de class o id.

#6 Combinadores de Selectores

los Combinadores crean relación entre dos o más selectores y Se utilizan para apuntar a los elementos secundarios y hermanos directos.

#7 Selectores de atributo

los Selectores de atributos permiten seleccionar los elementos HTML basados ​​en sus atributos o en los valores del mismo.

#8 Introducción a las Pseudo Clases

La pseudo-clases es similar a una clase en HTML, pero no se especifica explícitamente en el documento. En este video veremos una peuqeña introducción a este tema.

#9 Pseudo-Clases de Link y Acciones

las pseudo-clases de enlaces permiten enlaces permiten dar estilos en función de si son o no visitados o si hicieron clic en el. y las pseudo-clases de Acción usuario se aplican en función de la interacción del usuario con un elemento.

#10 Pseudo Clases estructurales básicas

Las Pseudo-clases Estructurales seleccionan los elementos en función de su posición en el documento HTML. En este video, veremos como seleccionar el primer, último y unico hijo de algún elementos HTML.

Selectores Avanzados

Con los selectores avanzados vamos a ser mas precisos y exactos al momento de apuntar a un elemento HTML sin la necesidad de una clase o un ID.

#11 Pseudo clases :nth-child() y :nth-last-child()

En este video vamos a utilizar la pseudo-clase :nth-child() para apuntar a cualquier hijo de un elemento HTML.

#12 Pseudo clases estructurales de tipo :nth-of-type() y :nth-only-type

En este video vamos a ser más específico con las pseudo-clases estructurales para dirigirnos a determinados tipos de elementos.

#13 Más Pseudo clases de CSS3

En este video veremos mas Pseudo Clases de CSS3, veremos las Pseudo Clases :root, :empty, :target, y :not()

#14 Pseudo clases UI o de Interfaz de Usuario

En este video terminamos con las Pseudo Clases de CSS3, viendo las pseudo clases :enabled, :disabled y :checked

#15 Pseudo Elementos, parte 1

Los pseudo-elementos apuntan a elementos virtuales que no están definidos en el marco HTML y no aparecen en el código fuente. En este video veremos los pseudo-elementos ::first-line y ::first-letter.

#16 Pseudo Elementos, parte 2 ::before y ::after

Los pseudo-elementos ::before y ::after nos permiten insertar elementos virtuales, antes y después del contenido de un elemento. Estos elementos solo son visibles para el usuario y no aparecen en el código fuente.

Valores y Unidades

Cada propiedad CSS acepta algun tipo de valor, una palabra clave, unidad de longitud, o valor de color. En este bloque veremos los valores comunes de CSS.

#17 Unidades de Longitud Absolutas

Las Unidades de longitud absolutas son útiles cuando se conoce el medio de salida, estas Unidades absolutas consisten en las unidades físicas (in, cm, mm, pt, pc y la unidad px).

#18 Unidades de Longitud Relativas

Las Unidades de longitud relativas especifican una longitud que es relativa a otra longitud, como el tamaño de fuente de un elemento o de la anchura de la ventana del navegador. En este video veremos las unidades de longitud de CSS (em, ex, rem y %).

#19 Unidades de Longitud Viewport Relativas

Las Unidades de longitudes Viewport relativas definen una longitud porcentual al tamaño del viewport que es la parte visible del documento en los diferentes dispositivos donde se puede visualizar una pagina web. En este video veremos las unidades de longitud viewport relativas de CSS (vw, vh, vmin y vmax).

#20 Los Colores en CSS como tipos de valor

En este video, vamos a aprender cómo dar un color como valor a las diferentes propiedades de CSS y cómo definir colores utilizando palabras clave, valores hexadecimales # y los metodos rgb(), hsl() y rgba() y hsla().

#21 Otros tipos de valores en CSS

En este video, veremos con que otros tipos de valores podemos contar en CSS para aplicar a los elementos HTML por medio de las diferentes propiedades de CSS.

Texto, Fuentes, y Listas

Los Texto son la sangre de una página web, y CSS tiene muchas opciones para definir estilos de texto. En este bloque veremos cuales son.

#22 Propiedades de fuentes en CSS3

En este video, veremos las diferentes propiedades para las fuentes comunes y básicas. Támbien veremos los valores que podemos definir para mejorar nuestro texto por medio de CSS y las propiedades fonts, o propiedades de fuentes.

#23 Utilizando el método Shorthand con las Propiedades Fonts

En este video, veremos como aplicar el metodo Shorthand o forma abreviada para unificar las diferentes propiedades fonts de CSS.

#24 Propiedades de Textos en CSS3

En este video, vamos a aprender las propiedades de texto comunes que se pueden utilizar para especificar los espaciados entre palabras y letras, decoración de texto, alineación etc..

#25 Propiedad de Textos text-shadow

En este video, aprenderemos a utilizar la propiedad de texto text-shadow para aplicar sombras a los textos por medio de CSS3.

#26 Estilos de Listas

En este video vamos a ver como utilizar las propiedades de lista en CSS y como se puede utilizar para controlar la apariencia de las listas ordenadas y desordenadas del documento HTML.

Modelo de Caja de CSS

Cada elemento HTML puede ser pensado como una caja con contenido, relleno, bordes y márgenes. El modelo de caja es la base del diseño con CSS.

#27 “Modelo de Caja” en Css. padding, border y margin

En este video veremos Concepto “Modelo de Caja” en Css, veremos los principales componentes que forman este modelo, veremos como se comportan los margenes, los padding y los bordes en un elemento HTML pensado como una caja.

#28 “Modelo de caja CSS” Width y Height

En este video seguimos viendo el Concepto “Modelo de Caja” en Css, y seguimos viendo las principales propiedades que forman esta base en CSS, Width y Height.

#29 Box-sizing Modificando el Modelo de caja predeterminado

En este video seguimos viendo el Concepto “Modelo de Caja” en Css, y vamos a ver como cambiar el modelo de caja que aplican los navegadores por defecto con la propiedad Box-sizing

#30 La propiedad Display y sus valores

En este video seguimos viendo Propiedades que afectan el “Modelo de Caja” en Css,y vamos a ver la propiedad Display y sus diferentes valores (block, inline, inline-block, none, list-item, table, etc.)

#31 Las Propiedades Float y Clear

En este video seguimos viendo Propiedades que afectan el “Modelo de Caja” en Css,y vamos a ver como podemos utilizar las propiedades Float y Clear

#32 Las Propiedades Position y Z-index

Terminamos este bloque de lo que llamamos el “Modelo de Caja” en Css viendo un par de propiedades que solemos usar mucho cuando diseñamos en CSS, Position y Z-index

Backgrounds, Sombras y Bordes

Con CSS, cualquier elemento puede tener un fondo, un borde y una sombra, y en este bloque veremos como utilizar estas propiedades.

#33 Las Propiedades Background básicas

En este video veremos las propiedades de background básicas en CSS, veremos las propiedades: background-color, background-image, background-repeat, background-position y background-attachment y cada uno de sus valores

#34 Las Propiedades Background avanzadas

En este video veremos la segunda parte del tema de los background en CSS, los que nos brinda la especidficación CSS3. Background con multiples imagenes, background-size, background-origin y background-clip con sus multiples valores

#35 Border-radius

En este video veremos todo lo relacionado con la propiedad border-radius, y como saber configurar sus valores para obtener la redondes de radio que nesecitamos en nuestros elemento HTML

#36 Box-shadow

En este video veremos la propiedad box-shadow de CSS3 que nos permitira añadir sombra a las cajas en nuestro HTML de forma muy fácil.

#37 Border-image

En este video veremos la propiedad border-image de CSS3 que nos permitira aplicar una imagen a los bordes de los elementos HTML

Degradados con CSS3

Con CSS3 podemos hacer transiciones suaves entre dos o más colores. En este bloque vamos a explorar gradientes CSS lineales y radiales.

#38 Degradados lineales (Linear-Gradients)

En este video veremos como aplicar fondo con degradados de colores lineales básicos o rectos con niveles de color y ángulos de grado con la propiedad linear-gradients de css3

#39 Degradados Radiales (Radial-Gradients)

Los degradados radiales parten de un punto central y se extienden suavemente en una forma circular o elíptica. En este video, veremos las opciones y parámetros que podemos utilizar para crear gradients radial, o degradados radiales.

#40 Repeating Gradients

En este video veremos como hacer para que los degradados que apliquemos ya sean radiales o lineales en los elementos HTML se repitan infinitamente, esto lo logramos con la propiedad repeating-x-gradient

Flexbox y Multi-Column

Con CSS Flexbox y Multi-Column, se puede definir fácilmente múltiples columnas de texto y ajustar la flexibilidad de los elementos.

#41 Entendiendo las caracteristicas Flexbox de CSS3

En este video Tutorial veremos las características Flexible Box de CSS3, o simplemente Flexbox, Veremos el poder y eficiencia que nos brindan para poder diseñar con los estándares del día de hoy de forma muy sencilla y con resultados excelentes.

#42 Múltiples columnas con Multi-Column layout de CSS3

En este video, vamos a aprender cómo definir varias columnas de contenido generado desde CSS junto con su ancho, espaciado y algunas otras caracteristicas con las propiedades de CSS3 Multiple column layout

Web Fonts, Fuentes Personalizadas con @Font-Face

CSS3 en su nivel 3 desempolva la regla @Font-face que nos va a permitir vincular fuentes no estándar en nuestras paginas web.

#43 Web fonts, Fuentes personalizadas con @font-face

En este video vamos a ver cómo podemos vincular fuentes externas a nuestro proyecto web con la regla @font-face, también veremos como utilizar las fuentes de Google Fonts y utilizaremos la herramienta Fonts Squirrel para generar nuestras propias fuentes.

#44 Icon fonts, Iconos basados en Fuentes con @font-face

En este video veremos como incluir Iconos vectoriales basadas en fuentes tipograficas de sitios como.. Icomoon, o Font Awesome por medio de la regla @font-face.

Transiciones y Transformaciones

Las Propiedades de transición de CSS proporcionan una manera de controlar la velocidad de la animación en el cambio de las propiedades.

#45 Las Transiciones y sus Propiedades

En este video veremos como aplicar transiciones a los elementos HTML con las propiedades que nos ofrece CSS3, transition-property, transition-duration, transition-delay y transition-timing-function.

#46 Transformaciones 2D

En este video veremos las transformaciones CSS que nos van a permitir mover, rotar, escalar, sesgar en el espacio bidimensional, con la propiedad transition y sus diferentes funciones.

#47 Transformaciones 3D

Las transformaciones 3D en CSS3 que nos van a permitir manipular el elemento en un entonor tridimencional utilizando los ejes X, Y y Z, vamos a poder rotar, mover y escalar los elementos dentro de una perspectiva 3D que establecemos en la página.

Animaciones con CSS3

Las Animaciones de CSS3 hacen posible animar las transiciones de un estilo CSS a otro. y esto lo hacemos por medio de los keyframes.

#48 Las Animaciones en CSS3

En este video vamos a ver los conceptos básicos de las animaciones en CSS3, veremos las propiedades que debemos de utilizar para tener el control sobre nuestras animaciones y veremos la regla keyframes para definir los pasos de la secuencia de nuestras animaciones.

Los Media Queries

Los Media Queries nos permiten aplicar declaraciones CSS dinámicamente en función de los diferentes dispositivos donde se muestre el sitio web.

34 Respuestas

  1. karla dice:

    hola mi pregunta es que si no tienes un informe escrito de eso para entender un poco mas ya que no tengo muchos recursos

  2. Edic dice:

    gracias por compartir el conocimiento

  3. erik dice:

    Buenos dias muy buen curso , muy bien explicado, estoy por el video 46 pero el link de ese video va hacia el video 45 , para que estes pendiente , con tantos videos me imagino que suele suceder.

  4. Aiko dice:

    Me gusta mucho el curso!!!!! Muchas gracias!!

  5. Eduardo dice:

    Felicidades por el curso y los videos..excelente..podría poner el códgo css por favor o dar la ruta para descargarlo…saludos.

  6. Denis dice:

    Amigo el vídeo 45 y 46 se repiten.

  7. Denis dice:

    Hola, excelente tutorial, muy didáctico. Me gustaría saber que editor estás utilizando.

  8. jorge ernesto prada antia dice:

    EL link 46 de transformacions 2D me esta llevando al 45 al de transiciones

  9. Rodolfo dice:

    Hola que tal, este tutorial es muy bueno. En lo personal yo no soy de esas personas que aprende solo pasando tiempo en el pc, yo aprendi hojas de estilo en un curso de css http://www.grupocodesi.com/cursos/curso-de-css.html La verdad me agrado mucho y es un curso 100% práctico.

  10. carlos dice:

    Reitero el buen trabajo realizado en este video.

    Te quería comentar que parece que los puntos #45 Las Transiciones y sus Propiedades y #46 Transformaciones 2D apuntan al mismo video, normal equivocarse con tantos de ellos.

    aprovecho para preguntarte que libros de referencia debería tener en mi mesa para las dudas mas teóricas puntuales que surgen, tanto para HTML5, CSS o PHP, ya que estoy intentando orientarme a Joomla.

    muchas gracias por a ayuda.

  11. carlos dice:

    Muchas gracias por tu aporte.
    Solo he visto dos capítulos y ya he resuelto muchas dudas que tenia.
    Suerte.

  12. stefany dice:

    Hola Johanso y el tema de media queries?

  13. Stefany dice:

    Podrías subir el documento de estilos css, los he creado, pero no me funcionan las caracteristicas de flesxbox!

  14. Stefany dice:

    Hola johanso podrías subir el doc de los estilos.css de la primera clase #41 Entendiendo Las Características Flexbox De CSS3, pues he creado los estilos como tal pero a la hora de implementar flex y demás características no me da, que error ha de ocurrir, gracias?

  15. Andersson dice:

    Gracias esta muy bueno el material, bueno lo que eh visto no se si sea mucha molestia pero sera que nos puede dejar los ejercicios para practicar.. :p

  16. jean Carlos dice:

    Excelente!!, muy bien estructurado y explicado tu curso brother, gracias y salud para ti.

  17. Daniel dice:

    Muchisimas gracias por compartir su conocimiento, se entiende muy bien cada tutorial.

    Abrazo.

  18. Mkrio dice:

    Excelente curso compañero, a mi me han servidos algunos videos de conceptos que no tenia muy claro, gracias por compartirlo gratuitamente.

  19. Edgar Villalpando dice:

    ¡ Esta pagina es la mejor ! mis más sinceros respetos 🙂

  20. Victor David dice:

    Sinceramente esta muy bien explicado, la verdad muchas felicidades muy buen trabajo brother sigue asi.

  21. stefany zapata dice:

    Hola Johanso tu material esta muy bueno y tengo una pregunta para hacerte, que conceptos y trucos manejar a la hora de maquetar posicionamiento con diferentes divs, me ha costado un poco este tema a la hora de tener que posicionar bien estos elementos y que a la hora de responsive no se me muevan o desajusten.

  22. Angel dice:

    Buen curso amigo, muy claro y al punto. Gracias por compartir ts conocimientos

  23. George dice:

    Muchas gracias por compartir tu conocimiento, los mejores deseos para tí y mucho éxito!!

  24. elkin dice:

    muy buen material y muy bien explicado

  25. Eduardo Núñez dice:

    Muy bueno el material, felicitaciones y gracias

  26. Luis Jesús dice:

    Buenos días soy un estudiante de ing. de sistemas, estoy interesado en aprender todo lo referente a CSS3 y HTML5.

    • Johanso dice:

      Hola amigo, bueno aqui estamos colgando los videos de un curso de CSS3 desde lo muy básico hasta lo mas avanzado, lo unico es que se estan subiendo gradualmente de acuerdo a una capacitación que se esta llevando a cabo. Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *