Aprende a crear páginas web con HTML5 y CSS3

Construye páginas web en HTML5 y CSS3 con todos los elementos del lenguaje y sus principales características.

Created byDaniel López

Last updated 7/2018

Spanish

What you'll learn

Descubrir la manera de hacer páginas web con el lenguaje HTML5
Crear páginas web con efectos y buena apariencia gracias a CSS3
Identificar las características de los nuevos elementos del HTML5 y el CSS3
Crear código HTML y CSS rápidamente con emmet

Course content

11 sections • 93 lectures • 8h 48m total length

Introducción2:54
En esta clase estaremos hablando de las generalidades del lenguaje y sus alcances
Archivos del Curso0:08

¿Qué es HTML5?4:49
En esta clase aprenderás que HTML5 es una colección de elementos para el diseño y desarrollo de páginas web. Esta colección representa la manera en que se presenta la información en el navegador y la forma de interactuar con ella.
Semántica2:49
En esta clase aprenderás que en el HTML5 los elementos estructurales tienen un sentido semántico, tienen una razón de ser. Tienen un significado por sí mismos.

DOCTYPE8:31
En esta clase aprenderás la importancia y relevancia del elemento DOCTYPE
HTML1:12
En esta clase aprenderás la importancia de la etiqueta HTML así como la relevancia de su atributo LANG
META1:42
En esta clase hablaremos de la etiqueta META y el atributo CHARSET
Header3:45
En esta clase aprenderás que el elemento header al igual que el head, provee información de introducción, la diferencia radica en que el head tiene la información de TODO el documento, mientras que el header lleva la información de el cuerpo del documento, o de partes de la información del cuerpo.
Nav2:22
En esta clase hablaremos del elemento NAV, que sirve para darle al navegador, información de la navegación de los elementos más importantes del sitio, es decir, allí se referencian los documentos que estén enlazados entre sí para poder llegar a ellos y que hacen parte de nuestro sitio
Main1:08
En esta clase hablaremos del elemento MAIN, que define el contenido principal del documento.
Section1:59
En esta clase aprenderás qué hace el elemento SECTION y cual es su importancia en un documento HTML5.
Article4:01
En esta clase aprenderás la importancia del elemento ARTICLE dentro de un documento HTML5.
Aside2:16
En esta clase hablaremos del elemento ASIDE. Uno de los elementos característicos del HTML5, ya que en el vamos a insertar información que puede tener que ver con el contenido mismo, pero que por sí sola no sería relevante.
Footer3:04
En esta clase aprenderás que el elemento FOOTER provee información importante para finalizar un determinado elemento.
Figure9:58
En esta clase aprenderás los elementos FIGURE y FIGCAPTION, que sirven para agrupar contenido y mostrarlo organizadamente dentro del navegador.

Emmet3:38
En esta clase aprenderás que Emmet es un plug-in que nos sirve para desarrollar código HTML y CSS de manera rápida mediante pseudocódigo y que se puede instalar en muchos programas de la actualidad.
Emmet - Elementos Hermanos1:00
En esta clase aprenderás a agregar elementos hermanos con Emmet.
Emmet - Elementos Hijos1:27
En esta clase aprenderás a agregar elementos hijos con Emmet.
Emmet - Salir de una cadena2:30
En esta clase aprenderás a salir de las cadenas con Emmet.
Emmet - Agrupar elementos3:58
En esta clase aprenderás a agrupar elementos con Emmet.
Emmet - Elementos multiplicados1:31
En esta clase aprenderás a multiplicar elementos con Emmet.
Emmet - Elementos ID y CLASS1:57
En esta clase aprenderás a agregar elementos con ID o CLASS con Emmet.
Emmet - Etiquetas implícitas2:44
En esta clase aprenderás a utilizar etiquetas implícitas con Emmet.
Emmet - Elementos con atributo3:06
En esta clase aprenderás a agregar elementos que contengan atributos con Emmet.
Emmet - Elementos enumerados3:26
En esta clase aprenderás a agregar elementos enumerados con Emmet.
Emmet - Agregar textos3:19
En esta clase aprenderás a agregar texto dentro de los elementos con Emmet.
Emmet - Varios5:47
En esta clase aprenderás varios tips para utilizar el Emmet.
Emmet - CSS3:19
En esta clase aprenderás a agregar propiedades CSS con Emmet.
Emmet - Práctica4:59
En esta clase haremos un ejercicio con Emmet para aplicar todo lo que hemos visto a través de esta sección.

CSS39:51
En esta clase haremos una introducción a las propiedades del CSS3.
Border Radius5:09
En esta clase aprenderás a utilizar la propiedad Border-Radius.
Border Image7:48
En esta clase aprenderás a utilizar la propiedad Border-Image.
Box Shadow4:16
En esta clase aprenderás a utilizar la propiedad Box-Shadow.
Background Múltiple3:47
En esta clase aprenderás a utilizar la propiedad background.
Background Origin4:55
En esta clase aprenderás a utilizar la propiedad background-origin
Background Size5:01
En esta clase aprenderás a utilizar la propiedad background-size.
Color9:17
En esta clase aprenderás a utilizar el Color en CSS3.
Degradados5:00
En esta clase aprenderás a utilizar degradados en CSS3.
Text Shadow3:06
En esta clase aprenderás a utilizar la propiedad text-shadow.
Word Wrap2:58
En esta clase aprenderás a utilizar la propiedad word-wrap.
Columnas7:08
En esta clase aprenderás a utilizar la propiedad column.
@Font-Face11:21
En esta clase aprenderás a utilizar la propiedad @font-face.
Web Fonts9:37
En esta clase aprenderás a utilizar las fuentes web y sus aplicaciones.
First Letter4:14
En esta clase aprenderás a utilizar la propiedad first-letter.
Selection2:47
En esta clase aprenderás a utilizar la propiedad selection.
Before y After3:20
En esta clase aprenderás a utilizar las propiedades before y after.
Nth-child6:00
En esta clase aprenderás a utilizar la propiedad nth-child.
Nth-Last-Child2:56
En esta clase aprenderás a utilizar la propiedad nth-last-child.
Nth-Of-Type2:30
En esta clase aprenderás a utilizar la propiedad nth-of-type.
Nth-First-Of-Type2:12
En esta clase aprenderás a utilizar la propiedad nth-first-of-type.
Not3:08
En esta clase aprenderás a utilizar la propiedad not.
Transform - Rotate2:37
En esta clase aprenderás a utilizar la propiedad transform y el valor rotate.
Transform - Origin4:11
En esta clase aprenderás a utilizar la propiedad transform y el valor origin.
Transform - Scale3:56
En esta clase aprenderás a utilizar la propiedad transform y el valor scale.
Transform - Skew2:55
En esta clase aprenderás a utilizar la propiedad transform y el valor skew.
Transform - 3D11:02
En esta clase aprenderás a utilizar transformaciones en 3D.
Transform - Translate2:48
En esta clase aprenderás a utilizar la propiedad transform y el valor translate.
Perspective4:01
En esta clase aprenderás a utilizar la propiedad transform y el valor perspective.
Transition17:04
En esta clase aprenderás a utilizar la propiedad transition.
Animation I5:54
En esta clase aprenderás a utilizar la propiedad animation y su aplicación.
Animation II5:47
En esta clase aprenderás a utilizar la propiedad animation y su aplicación.
Librerías Útiles6:13
En esta clase aprenderás a utilizar una serie de librerías de vital importancia dentro de los documentos HTML5.

Workshop I - 17:27
En esta clase aprenderemos a configurar nuestros archivos, el sitio, y la estructura del ejercicio.
Workshop I - 26:44
En esta clase vamos a estructurar el contenido HTML5 de nuestro documento.
Workshop I - 34:26
En esta clase vamos a crear los estilos del documento y las fuentes que vamos a utilizar.
Workshop I - 45:05
En esta clase vamos a crear los estilos de la estructura del documento.
Workshop I - 510:29
En esta clase vamos a agregar los estilos para la lista del documento.
Workshop I - 69:27
En esta clase vamos a aplicar psudo-classes para transformar algunos elementos de la lista.
Workshop I - 73:53
En esta clase vamos a agregar estilos para el header, encabezados y el footer.
Workshop I - 84:52
En esta clase vamos a afinar algunos detalles para finalizar el ejercicio.

Workshop II - 17:57
En esta clase vamos a darle estructura a nuestros archivos y a nuestro documento principal.
Workshop II - 215:37
En esta clase vamos a agregar el contenido HTML5 en el body.
Workshop II - 32:48
En esta clase vamos a seleccionar y configurar las fuentes web que vamos a utilizar en nuestro documento.
Workshop II - 42:01
En esta clase vamos a agregar unos links anclados y a agregar el mapa de ubicación del sitio.
Workshop II - 55:56
En esta clase vamos a agregar los estilos de la estructura del documento.
Workshop II - 616:32
En esta clase vamos a agregar todos los estilos del elemento header y todo su contenido.
Workshop II - 714:52
En esta clase vamos a agregar los estilos para el elemento home.
Workshop II - 84:08
En esta clase vamos a agregar los estilos del elemento "abajo".
Workshop II - 99:18
En esta clase vamos a agregar los estilos del elemento article (temas).
Workshop II - 101:17
En esta clase vamos a agregar los estilos para la galería.
Workshop II - 116:26
En esta clase vamos a agregar los estilos del contacto.
Workshop II - 124:12
En esta clase vamos a agregar los estilos del elemento Footer.
Workshop II - 134:39
En esta clase vamos a configurar los links para que funcionen con la librería Scrollomatic de jQuery.
Workshop II - 141:53
En esta clase vamos a afinar algunos detalles como verificar nuestro código en los validadores de la w3c.

Requirements

Es necesario tener conocimientos básicos en HTML y CSS o haber culminado el curso "Aprende a crear páginas web con HTML y CSS" del autor
Manejo básico de un sistema operativo (Windows, Mac OS ó Linux)

Description

Gracias a la aparición de la conectividad en dispositivos móviles, las páginas web de la actualidad, hacen uso de nuevas tecnologías. Estas nuevas tecnologías permiten el manejo de los dispositivos no solamente para navegar por internet sino para una serie de tareas como geolocalización, uso de la cámara, bases de datos locales, consultas asíncronas, uso de juegos en 2 y 3D, etc y para todo eso es primordial utilizar el HTML5.

El HTML5 es un lenguaje que ahora tiene contenido semántico y permite el uso de una serie de APIs que le dan la posibillidad a los usuarios tener una mejor experiencia a la hora de acceder a internet.

En este curso vas a aprender todo lo relacionado con las nuevas características del lenguaje HTML5 y CSS3 para que puedas explotar estas propiedades y crear tus páginas web de una manera correcta. Desde los elementos básicos hasta los tips y las técnicas de uso para crear páginas web con este estándar.

Who this course is for:

Diseñadores, publicistas, programadores, profesionales y emprendedores en general
Cualquier persona a la que le interese aprender a desarrollar páginas web con HTML5 y CSS3

Aprende a crear páginas web con HTML5 y CSS3

What you'll learn

Explore related topics

Course content

Introducción2 lectures • 3min

HTML5 - La tecnología2 lectures • 8min

Elementos HTML511 lectures • 40min

Escribir HTML y CSS más rápido, EMMET14 lectures • 43min

Formularios HTML53 lectures • 51min

Multimedia HTML52 lectures • 28min

Gráficos Vectoriales2 lectures • 20min

CSS333 lectures • 3hr 3min

WorkShop I - Práctica8 lectures • 52min

Workshop 2 - Práctica14 lectures • 1hr 38min

Requirements

Description

Who this course is for: