HTML5 y CSS3 para principiantes: la guía definitiva

Aprende HTML5 y CSS3 para crear modernas y dinámicas páginas web con animaciones y transiciones sin apenas esfuerzo.
4.3 (3 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.
12 students enrolled
$19
$80
76% off
Take This Course
  • Lectures 29
  • Length 6.5 hours
  • Skill Level Beginner 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/2013 Spanish

Course Description

Aprende los conceptos y herramientas básicas para desarrollar una web con los nuevos estándares HTML5 y CSS3.

Obtén unos conocimientos sólidos en HTML5 y CSS3 con este curso para principiantes.

  • Sintáxis, etiquetas semánticas, layouts, etiquetas nuevas, modificadas y obsoletas, soporte de los navegadores
  • Selectores, pseudo-elementos, media queries
  • Web Fonts, propiedades de caja, sombras y fondos múltiples
  • Transparencias y gradientes de colores
  • Transformaciones, transiciones y animaciones


Todo el poder de la maquetación con HTML 5 y CSS 3 ahora a tu alcance, con nuestra guía definitiva y en vídeo.

HTML 5 y CSS 3 son los nuevos estándares de la web. Mediante HTML 5 obtenemos una mayor sofisticación de código que con HTML 4, y podremos construir las estructuras de formas nuevas y óptimas.

En cuanto a las hojas de estilo con CSS 3, tendremos disponibles gran variedad de opciones para hacer cosas que antes eran impensables sin mucho código. Tendremos opciones como sombreados y redondeados, pero también funciones avanzadas de movimiento y transformación.

Este es un curso únicamente en vídeo. Verás la imagen de nuestra pantalla y escucharás al profesor hablando mientras ves lo que hace en su pantalla. Muy útil y didáctico.

Además, te enseñaremos a utilizar herramientas fundamentales para hacer la vida mucho más fácil al programador, como generadores de código que harán las delicias de quién los use.

Al finalizar el curso serás capaz de crear páginas web utilizando HTML 5 y darles vida con transformaciones, animaciones e incorporando increíbles efectos gráficos con CSS 3 y sin apenas esfuerzo.


What are the requirements?

  • Para realizar este curso se necesitan conocimientos previos de HTML 4 y de CSS 2.1.

What am I going to get from this course?

  • Proporcionar a los alumnos un conocimiento del nuevo estándar de Internet: HTML 5 y CSS 3.

What is the target audience?

  • Este curso está dirigido a todas aquellas personas que deseen actualizar sus conocimiento de HTML 4 y CSS 2.1 hacia el nuevo estándar de la red.
  • También tenemos alumnos que desean conocer qué cosas se pueden hacer con HTML 5 y con CSS 3, porque son jefes de proyecto por ejemplo, pero no van a codificar ya más. Este curso está preparado también para que esas personas puedan tener una idea general de HTML 5 y CSS 3 sin necesidad de hacer ninguna línea de código.

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: HTML 5
06:43
  • Introducción al HTML 5 haciendo un repaso a todos los puntos que vamos a ver en este módulo.
  • Comienzo del curso.
  • Sintaxis de HTML 5
  • Doctype
  • Head
19:30
  • Etiquetas semánticas
  • Header
  • Nav
  • Ejemplo
03:42
  • Examinamos un ejemplo real donde se usa Header y Nav. En este ejemplo vemos como los desarrolladores de la web han optado por una mezcla entre etiquetas HTML 5 y etiquetas DIV.
12:53
  • Footer
  • Ejemplo
  • Evaluamos una página web real viendo su código fuente
08:51
  • Section
  • Ejemplo
  • Evaluamos una web real
19:44
  • Article
  • A través de una web real, se ilustra el significado de Article
  • Ejemplo
  • A través de otra web real, identificamos los elementos vistos hasta este momento
  • Aside
  • Ilustramos el uso de Aside dentro de las dos webs reales que hemos vista antes
16:18
  • Ejemplos de Aside
  • Evitando los "fat footers"
  • ¿Qué etiqueta semántica debemos escoger en cada momento?
  • Layouts
19:55
  • Estructura del documento: Secciones, encabezados y outline
  • Fuera del outline: <hgroup>
  • Encabezados: conclusiones
16:40
  • Nuevas etiquetas
  • <figure>
  • <time>
  • <details>
  • <mark>
  • <meter>
  • <progress>
12:37
  • Etiquetas redefinidas
  • Etiquetas obsoletas
10:22
  • Soporte en los navegadores
  • Validando el código
  • HTML5 Boilerplate
Section 2: CSS 3
07:53
  • Dónde encontrar documentación gratuita sobre CSS 2.1 y también otras materias, como HTML 4.
  • Repaso a los contenidos del módulo
  • Introducción a CSS 3
  • Selectores: selector de atributos en CSS 2.1
05:58
  • Selectores: selector de atributos en CSS 2.1 (continuación del vídeo anterior)
  • Selectores: selector de atributos en CSS 3
  • Selectores: selector de hermanos
13:29
  • Pseudo-clases
  • Pseudo-elementos
23:52
  • Selectores CSS 3: soporte y especificación
  • Media Queries: Introducción
  • Media Queries: Sintaxis
  • Media Queries: logic
  • Media Queries: media
  • Media Queries: expression
  • Media Queries: media features
  • Media Queries: Condiciones múltiples
14:49
  • Ejemplo de uso de las media queries
  • Web Fonts: introducción y sintaxis
  • Web Fonts: src
  • Web Fonts: formatos
  • Web Fonts: formatos y generador
  • Web Fonts: soporte y especificación
12:54
  • Propiedades de texto: text-shadow
  • Ejemplos de text-shadow
  • Generador de text-shadow
  • Soporte y especificación de text-shadow
  • Propiedades de texto: Múltiples columnas
16:09
  • Múltiples columnas: otras propiedades
  • Múltiples columnas: elementos internos y comportamiento
  • Múltiples columnas: Soporte y especificación
  • Propiedades de caja: box-shadow
  • Ejemplos de box-shadow
  • Generador de box-shadow
  • Soporte y especificación de box-shadow
14:59

Propiedades de caja (seguimos viendo propiedades de caja)

  • border-radius
  • Ejemplos de border-radius
  • Generador de border-radius
  • Soporte y especificación de border-radius
  • Múltiples fondos
  • Ejemplos de múltiples fondos
  • Soporte y especificación de múltiples fondos
11:49

Propiedades de caja (continuamos con estos elementos)

  • Nuevas opciones para fondos
  • Soporte y especificación de las nuevas opciones para fondos
  • Imágenes en los bordes
  • Ejemplo de bordes con imágenes
  • Soporte y especificación de las imágenes en los bordes
13:06
  • Color, opacidad y transparencia
  • Ejemplo
  • Color: RGBA y HSLA
  • Generadores de RGBA y HSLA
  • RGBA y HSLA: Soporte y especificación
12:30
  • Gradientes
  • Gradientes lineales
  • Ejemplos de gradientes lineales
  • Gradientes radiales
  • Ejemplos de gradientes radiales
  • Generadores de gradientes
  • Gradientes: Soporte y especificación
19:01
  • Transformaciones
  • Transformaciones 2D: rotate
  • Ejemplos de rotate
  • Transformaciones 2D: translate
  • Ejemplos de translate
  • Transformaciones 2D: skew
  • Ejemplos de skew
  • Transformaciones 2D: scale
  • Ejemplos de scale
  • Transformaciones 2D: Múltiples transformaciones
  • Transformaciones 2D: Soporte y especificación
16:42

Transformaciones 3D

  • Rotación respecto a los ejes
  • Ejemplos
  • Rotaciones y backface-visibility
12:12

Transformaciones 3D

  • Desplazamiento
  • Ejemplos
  • Escalado


Soporte y especificación de las transformaciones 3D

16:56

Transiciones

  • Las transiciones con CSS 3
  • transition-property y transition-duration
  • Ejemplos
  • transition-timig-function
  • Ejemplos
  • Curvas bezier para timing-function
13:36

Transiciones

  • transition-delay
  • transition
  • Ejemplos
  • Transiciones y transformaciones
  • Soporte y especificación
  • Ejemplos de animaciones usando transiciones y transformaciones
15:39

Animaciones

  • CSS 3 y las animaciones
  • Propiedades
  • Ejemplo
  • Soporte y especificación
  • Más información sobre las animaciones
  • Analizamos varias animaciones
Section 3: Consideraciones finales
Article

Consideraciones finales

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Grupo SYNCROM, 25 años formando futuros. 25 años ayudando a personas.

Con más de 25 años de experiencia en formación, nuestros cursos están diseñados para que te sean útiles. No engordamos las horas de curso por el hecho de tener más horas. De hecho, nos gusta lo contrario, es decir, explicamos los conceptos de forma clara y concisa y utilizando el mínimo tiempo posible para ello. Porque el tiempo es oro, y es un recurso precioso al que la gente tiene que aprender a darle el gran valor que posee.

Nuestros profesores tienen sobrada experiencia en las materias que imparten. No son teóricos. Antes que patrones, hemos sido marineros. 

Con Udemy, hemos descubierto una puerta que utilizamos para acercar formación de calidad a precios asequibles a todo el mundo.

Nuestros temarios están diseñados para hacer sencillo el aprendizaje. Aunque la materia que tratemos parezca complicada, te la haremos lo más sencilla posible. Somos gente normal, con ganas de enseñar lo que sabemos, y lo que nos ha costado años aprender, y que hemos resumido en unas horas de conocimiento intensivo.

No te olvides de valorar nuestros cursos. Es la forma en que tú nos puedes agradecer el esfuerzo enorme que hemos puesto en la creación de cada uno de los cursos que tenemos, y en los que todavía no han visto la luz pero en los que estamos trabajando.

Ready to start learning?
Take This Course