Características clave
- Lograrás obtener conocimientos sólidos de HTML5 y CSS3.
- Podrá construir una página web semántica y hermosa usando HTML5 y CSS3.
- Podrá poner en práctica tus conocimientos para laborar como diseñador web.
- Será capaz de hacer un sitio web completo y vender tu trabajo por buenas cifras de dinero.
Temario del curso
-
Módulo 1: Introducción al Diseño Web con HTML5
-
Módulo 2: Creando y codificando contenido en HTML5
- Agregando SALTOS DE LÍNEA
- Usando em y strong
- Definiendo Títulos h1-h6
- Insertando comentarios
- Creando listas numeradas
- Creando lista con viñetas
- Insertando caracteres especiales
- Definiendo abreviaturas con “abbr”
- Definiendo fecha y hora con “TIME”
- Legalizándonos con “small”
- Utilizando la etiqueta “figure” y “figcaption”
- Citando títulos con “cite”
- Citando contenido con “q” y “blockquote”
- La etiqueta invisible “span”
- Graficando medidas usando “meter”
- Mostrando progresos con “progress”
-
Módulo 3: Insertando Imágenes y enlaces con HTML5
-
Módulo 4: Creando formularios con HTML5
- Estructura de los formularios
- Creando Cajas de texto(text)
- Etiquetado semántico de campos
- Creando cajas de contraseña (password) y Botones radiales (radio)
- Creando checkbox (casilla de verificación)
- Creando los Botones de envío y de reseteo
- Creando campos para Email, URL, Teléfono y Búsquedas
- Creando campos numéricos(number) y de tipo rango(range)
- Creando cajas para fechas (date), hora (time) y color (color)
- Creando áreas de texto(textarea) (casilla de verificación) y cajas de selección(selectlist)
- Nuevos atributos en HTML5
-
Módulo 5: Etiquetas Estructurales en HTML5
- ¿Qué son etiquetas semánticas estructurales?
- Creando encabezados con “header”
- Definiendo la navegación con “nav”
- Definiendo el área principal de un sitio con “main”
- Definiendo el contenido principal con “article”
- Definiendo Secciones con “section”
- Definiendo contenido secundarios con “aside”
- Definiendo el pie de página con “footer”
- Creando contenedores genéricos con “div”
- Mejorando accesibilidad de nuestro sitio con ARIA
-
Módulo 6: Video y audio con HTML5 y CSS3
- Introducción al uso de elementos multimedia
- Agregando atributos a nuestro reproductor de video
- La batalla de los formatos y codec
- Insertando audio y hablando sobre formatos y codec
- Proporcionando múltiples archivos de audio
- Integrando Reproductores alternativos basados en HTML5
- Sitios especializados en alojar audio y videos usando en HTML5
-
Módulo 7: Pintando la web con CSS3
- Introducción a CSS3
- Construcción de una regla e incluyendo CSS3 en HTML5
- Relevancia de estilos en CSS3
- La Herencia en CSS3
- La Cascada en CSS3: Importancia y Especificidad
- La Cascada en CSS3: El Orden de las reglas
- Agregando comentarios en CSS3
- Tipos de Selectores en CSS3 y el Selector de etiqueta
- Selectores de clase
- Selectores de ID
- Selectores Combinadores
- Selectores de atributos Tipo [Atributo]
- Selectores de atributos Tipo [Atributo=valor]
- Selectores de atributos tipo [Atributo*=valor]
- Selectores de atributos tipo [Atributo^=valor] y [Atributo$=valor]
- Selectores de atributos tipo [Atributo~=valor]
- Introducción a los Selectores de Pseudo-clases
- Las Pseudo-clases :hover, :active y :focus
- Las Pseudo-clases: first-child, :last-child
- Las Pseudo-clases :only-child, :only-of-type, :nth-child y :nth-last-child
- Las Pseudo-clases :Empty y :not()
- Las Pseudo-clases UI (User Interface):enabled, :disabled y :checked
- Selectores de Pseudo Elementos ::first-lines y ::first-letter
- Selectores de Pseudo Elementos – ::Before y ..After (Parte 1)
- Selectores de Pseudo Elementos ::Before y ::After (Parte 2)
-
Módulo 8: Estilizando texto con CSS3
- Definiendo una familia de fuentes(Tipo de letra)
- Fuentes personalizadas con @Font-face (parte 1)
- Fuentes personalizadas con @Font-face (parte 2)
- Insertando fuentes alojadas en Google Font
- Convirtiendo texto en Itálica y Negrita
- Definiendo el tamaño de la fuente( Unidades de Longitud Absolutas)
- Definiendo el tamaño de la fuente(Unidades de Longitud Relativas)
- Definiendo el tamaño de la fuente(Unidades de Longitud Relativas) II
- Definiendo el tamaño de la fuente(Unidades de Longitud Relativas) III
- Definiendo el Interlineado con “line-height”
- Definiendo el color del texto: Usando Keyword,Hexadecimal, RGB y RGBA
- Definiendo el color del texto: Usando HSL Y HSLA
- Definiendo el fondo del contenido
- Usando background-clip, múltiples fondos y la propiedad Shorthand “background”
- Controlando el espaciado de los textos
-
Módulo 9: Creando diseños con CSS3
- El Modelo de caja y la propiedad “Padding”
- La propiedad “Border” y “Margin”
- Definiendo la anchura (width, min-width, max-width) y la altura (height, min-height, max-height)
- Definiendo un nuevo modelo de caja con “Box-sizing”
- Trabajando con Display:inline-block
- La propiedad Float y Clear
- Trabajando con Display:Table
- Ocultando elementos con Display:none
- Posicionamiento estático y Relativo
- Posicionamiento Absoluto
- Posicionamiento Fijo
- Taller práctico de posicionamiento (parte 1)
- Taller práctico de posicionamiento (parte 2)
-
Módulo 10: Mejoras y efectos con CSS3
-
Módulo 11: Creando nuestro proyecto Final
- Sectorizando nuestro diseño
- Creación de un proyecto en Sublime Text
- Codificando el encabezado del sitio
- Codificando el Slide de imágenes y acceso rápidos
- Codificando el contenido principal y Próximos eventos
- Codificando la zona de suscripción, pie de pagina y redes sociales
- Usando normalizer.css y vinculando nuestra hoja de estilos
- Estilizando el encabezado
- Estilizando el slide de imágenes
- Estilizando los zona de acceso rápido
- Estilizando el contenido principal
- Estilizando los Próximos eventos
- Estilizando la zona de suscripción, pie de pagina y redes sociales
- Agregando compatibilidad con navegadores obsoletos (Parte 1)
- Agregando compatibilidad con navegadores obsoletos (Parte 2)
- Subiendo nuestro sitio al Internet
¿Has tratado de aprender diseño web pero has terminado asustado, al ver tantas líneas de código confusas?. Déjame decirte que los 2 lenguajes más importantes de diseño web se llaman HTML5 y CSS3 . Estos, son muy fáciles de aprender, siempre y cuando tengas un maestro que te enfoque y oriente correctamente.
En mis años que vengo enseñando diseño web, he descubierto que la formas más efectiva de aprender cualquier lenguaje de programación es “Sumergirse en el código y ensuciándose las manos”.
En este curso te proporcionaremos las bases teóricas necesaria y a la vez nos sumergiremos entre todas esas líneas de código para que finalmente te conviertas en un experto en HTML5 y CSS3.
A lo largo de este curso, te guiaremos paso a paso en este viaje y te transformaremos, de un principiante a un diseñador de páginas web profesionales, capas de codificar tus propios sitios web, ya sean personales o para empresas.
¿TE GUSTA EL DISEÑO WEB Y NO SABES POR DÓNDE EMPEZAR?
Entonces, este es el curso que estabas esperando. Cuando deseamos aprender a crear un sitio web, la pregunta que todos nos hacemos es: ¿Por dónde empiezo?. Tranquilo, en este curso te llevaremos de la mano y de modo didáctico, te iremos sumergiendo en el apasionante mundo del diseño web.
Partimos asumiendo que usted no sabe nada y empezamos por enseñarte las principales herramientas para hacer un sitio web. Luego nos sumergimos más y trabajamos con HTML5 y CSS3.
MIRA EL SITIO QUE CONSTRUIRÁS:
Este es un curso práctico y cada cosa que te enseñemos, lo pondrás en práctica en la vida real. Al finalizar este curso vas a construir un hermoso mini-sitios web. Míralo desde el siguiente enlace:
ESTE CURSO ESTÁ DIRIGIDO:
- Estudiantes de diseño web:
Si estas aprendiendo a diseño web, este curso te mostrará de forma clara como codificar desde “0” tu sitio web usando html5 y css3. - Administradores web:
Personas que tienen un blog personal o administran un sitio web y están en constante contacto con código HTML y desean saber modificarlo correctamente, sin estropearlo todo. - Marketers y afiliados:
¿Estas creando productos para vender online o estas promocionando productos como afiliados y no sabes cómo insertar esas líneas de código dentro de tu web?, tranquilo en este curso aprenderás hacerlo.
Aprende a escribir el HTML5 y CSS3 que usarás en la vida real.
