Development > Web Development
44h 5m
£14.99 Free for 29 days
Domina HTML5 y CSS3: De Principiante a Experto en Desarrollo Web
What you will learn:
- Construir páginas web con HTML5 siguiendo las mejores prácticas
- Maquetar y diseñar páginas web con CSS3
- Utilizar las etiquetas semánticas de HTML5
- Crear formularios web con atributos y pseudoclases de HTML5
- Integrar video y audio en páginas web
- Desarrollar animaciones con Canvas y SVG
- Crear aplicaciones web que funcionen sin conexión a internet
- Implementar mapas de Google en páginas web con HTML5
- Crear animaciones y transiciones con CSS3
- Diseñar páginas web responsivas con Media Queries
Description
¿Listo para dominar el desarrollo web? Este curso te lleva de principiante a experto en HTML5 y CSS3, las tecnologías esenciales para construir sitios web modernos y atractivos. No se requieren conocimientos previos.
Desde los fundamentos de las etiquetas HTML y las reglas de estilo CSS, hasta la creación de páginas web totalmente responsivas, animaciones interactivas, y aplicaciones offline, este curso te proporciona una base sólida. Aprenderás a utilizar APIs de HTML5 como Canvas y SVG para crear gráficos y animaciones impresionantes, a manejar el almacenamiento local (LocalStorage) para gestionar datos de usuario, y a integrar mapas de Google mediante la API de Geolocalización.
El curso incluye:
- Vídeos descargables
- Apuntes PDF
- Ejercicios resueltos
- Acceso a recursos adicionales
Dominarás:
- Estructura semántica HTML5 (header, section, article, etc.)
- Diseño responsivo con Media Queries
- Manejo avanzado de selectores CSS
- Diseño con Flexbox y Grid
- Animaciones con CSS y Canvas
- APIs HTML5 (Canvas, SVG, LocalStorage, Geolocalización, File API)
Únete a miles de estudiantes y comienza tu viaje hacia el éxito en el desarrollo web. ¡Inscríbete ahora!
Curriculum
¿De qué está hecha la web?
Esta sección introductoria establece las bases, explorando la historia de Internet y HTML, y presentando la estructura del curso y sus materiales. Se incluye una breve introducción al curso y una panorámica histórica para comprender mejor el contexto de HTML.
Principios de HTML
Aprende la sintaxis fundamental de HTML, comenzando con conceptos básicos como etiquetas, la directiva DOCTYPE, metadatos, y comentarios. Se exploran los fundamentos de la creación de documentos HTML, brindando una base sólida para el desarrollo posterior. Incluye apuntes adicionales para profundizar en el tema.
Las principales etiquetas de HTML
Esta sección se enfoca en las etiquetas HTML más comunes, incluyendo párrafos, encabezados, énfasis, listas (ordenadas, no ordenadas y de definición), hipervínculos, imágenes, tablas y divisiones. Se cubre el manejo de elementos esenciales para la estructuración del contenido web. La sección incluye apuntes y ejercicios para asegurar una buena comprensión.
Formatos y colores con estilos en cascada
Se introducen los fundamentos de CSS, incluyendo el manejo de colores, fuentes y otras reglas de estilo para dar formato al contenido. Se proporciona una introducción a los estilos en cascada, una herramienta fundamental para el diseño web.
Selectores y unidades de los estilos en cascada
Aquí aprenderás diferentes tipos de selectores CSS, como los selectores básicos, agrupados, globales, con atributos, y por estructura del documento. Se aborda la especificidad de los selectores y las diferentes unidades de medida en CSS para lograr diseños precisos. Incluye apuntes y preguntas para evaluar el aprendizaje.
El modelo de caja
Profundiza en el modelo de caja CSS, que define cómo se estructuran y se posicionan los elementos en una página web. Se cubren los márgenes, bordes, relleno, y otras propiedades importantes, así como las propiedades `display`, `box-sizing`, `background`, y `outline`. Se incluyen apuntes para un repaso y preguntas para la autoevaluación.
Navegación e impresión con Estilos en cascada
Aprende a crear menús de navegación, simular tabuladores, y configurar el modo de impresión con CSS. También se explica cómo incluir el favicon en la página web.
Posicionamiento y flujo
Esta sección cubre el flujo natural de las cajas, la flotación de elementos, el posicionamiento absoluto y fijo, proporcionando las herramientas para controlar la ubicación y el comportamiento de los elementos en la página.
Formato de páginas con CSS
Aprende técnicas para diseñar páginas web con formatos fijos y flexibles, incluyendo el diseño responsivo para diferentes dispositivos (escritorio, tabletas y móviles) usando Media Queries y el concepto de Mobile First. Se cubre el manejo de tamaños máximos y mínimos para una mayor flexibilidad en el diseño.
Creación de formularios con HTML
Esta sección cubre la creación de formularios HTML, incluyendo diferentes tipos de entradas, botones, etiquetas, y la aplicación de estilos CSS para mejorar su apariencia y usabilidad.
La regla de estilo Display
Explora en detalle la propiedad `display` en CSS y su uso con `grid` para crear layouts complejos y responsivos. Se cubren conceptos como `grid-column-start`, `grid-area`, `grid-span`, `grid-template-areas`, `minmax`, `auto-fill`, y `auto-fit`.
Ejemplo de páginas con layout con display: grid:
En esta sección se aplican las técnicas de `display: grid` aprendidas anteriormente para crear diferentes tipos de layouts, incluyendo layouts simples, embebidos, de tipo blog, y una página de inicio responsiva.
HTML5: Introducción
Se inicia la exploración de HTML5 con una introducción a sus características y las herramientas necesarias para el curso. Se revisan temas como el DOCTYPE y metadatos en HTML5.
HTML5: Las etiquetas estructurales o semánticas
Aprende a utilizar las etiquetas semánticas de HTML5 para crear una estructura clara y significativa en tus páginas web. Se explican las etiquetas `header`, `section`, `article`, `aside`, `footer`, y `nav`.
HTML5: Manejo de formularios
Profundiza en el manejo de formularios con HTML5, aprendiendo a usar los nuevos tipos de entrada para validar datos (email, URL, tel, number, range, date), atributos como `autofocus`, `placeholder`, `required`, `pattern`, y `autocomplete`, así como las pseudoclases.
HTML5: Manejo de video y audio
Aprende a integrar video y audio en tus páginas web utilizando las etiquetas y atributos de HTML5, incluyendo el manejo de diferentes formatos de video, precarga, reproducción automática, bucles y opciones de control.
API Canvas HTML5
Se introduce la API Canvas de HTML5 para crear gráficos y animaciones en el navegador. Se cubren temas como el contexto, relleno, contorno, líneas, arcos, curvas, gradientes, patrones y sombras.
Crear una sencilla aplicación de dibujo con canvas
Se construye una aplicación de dibujo básica utilizando la API Canvas, incluyendo la creación de una cuadrícula, manejo de eventos del ratón, y el dibujo dinámico de líneas.
Animación básica con el Canvas
Aprende los conceptos básicos de animación con Canvas, creando una sencilla animación de una pelotita que rebota y detecta colisiones.
CANVAS: crear un juego de memoria
Desarrolla un juego de memoria completo utilizando la API Canvas, incluyendo la creación de un tablero, el barajado de cartas, la detección de cartas seleccionadas, y la comparación de pares.
CANVAS: Crear un juego de memoria con imágenes
Mejora el juego de memoria anterior para que utilice imágenes en lugar de formas geométricas simples, utilizando la API File para cargar las imágenes.
CANVAS: Crear un juego de ahorcado
Construye un juego de ahorcado utilizando Canvas, incluyendo la creación del tablero, la gestión del teclado, y la lógica del juego.
Los microdatos, microformatos y RDFa en HTML5
Se presenta una introducción a los microdatos, microformatos y RDFa en HTML5 para semántica y datos estructurados.
El API-File
Aprende a utilizar la API File de HTML5 para trabajar con archivos, incluyendo la lectura de archivos, el manejo de múltiples archivos, y la detección de archivos en zonas Drag&Drop.
El API localStorage y sessionStorage
Descubre cómo usar localStorage y sessionStorage para almacenar datos del usuario en el navegador y gestionar una sencilla aplicación de altas, bajas y cambios.
El API de Geolocalización
Integra mapas de Google en tus páginas web usando la API de Geolocalización de HTML5 para obtener la ubicación del usuario.
HTML5: API Drag & Drop
Aprende a utilizar la API Drag & Drop de HTML5 para permitir a los usuarios arrastrar y soltar elementos en la página.
HTML5: API Web worker
Introduce la API Web Worker de HTML5 para realizar tareas en segundo plano sin bloquear la interfaz del usuario.
HTML5: API Offline web application
Descubre cómo crear aplicaciones web que funcionen sin conexión a internet utilizando el manifiesto de aplicaciones web.
HTML5: API SVG
Aprende a utilizar la API SVG para crear gráficos vectoriales escalables en tus páginas web.
Introduccion CSS3
Se presenta una introducción a CSS3, incluyendo el uso de Modernizr para detectar versiones antiguas de Internet Explorer y el manejo de prefijos de navegadores.
Selectores en CSS3
Explores los selectores tradicionales y nuevos de CSS3, incluyendo selectores de tipo, atributos, y Nth.
CSS3: Trabajo con colores
Aprende técnicas avanzadas para trabajar con colores en CSS3, incluyendo transparencia, gradientes lineales, radiales y cónicos.
CSS3: Tipografia Web
Domina el manejo de fuentes web con CSS3, incluyendo `font-face`, sombras de texto, texto multicolumna, y el uso de fuentes de Google y Font Awesome.
CSS3: Maquetación de páginas con CSS3
Aprende a usar Flexbox para crear diseños modernos y responsivos. Se cubren propiedades clave como `display`, `flex-direction`, `justify-content`, `align-items`, `flex-wrap`, `flex-flow`, etc.
CSS3: Nuevo modelado de las cajas
Se exploran las nuevas características de CSS3 para el modelado de cajas, incluyendo esquinas redondeadas, imágenes de fondo, sombras, `background-size`, `background-blend-mode`, y `background-attachment`.
CSS3: Transiciones y transformaciones
Aprende a crear animaciones y transiciones suaves en tus diseños web con CSS3, incluyendo transformaciones 2D y 3D, transiciones, animaciones, y filtros.
Creación de páginas responsivas con los Media Queries
Domina las Media Queries para crear páginas web que se adaptan a diferentes dispositivos y tamaños de pantalla.
Crear una tarjeta de usuario con HTML5 y CSS3
Proyecto práctico para crear una tarjeta de usuario atractiva y responsiva, aplicando los conocimientos adquiridos.
Crear una pantalla de entrada o login
Proyecto práctico para diseñar una pantalla de inicio de sesión atractiva y funcional, aplicando los conocimientos adquiridos.
Crear una pantalla de inicio (landingpage)
Proyecto práctico para crear una página de inicio (landing page) atractiva y efectiva, aplicando los conocimientos adquiridos.
Crear una página de testimonios con Display:grid
Proyecto práctico que utiliza `display:grid` para crear una página de testimonios responsiva y bien estructurada.
Crear una página responsiva con flex-box
Proyecto práctico que utiliza Flexbox para crear una página web responsiva y moderna.
Ejemplos de desarrollos con HTML y CSS3
Se muestran ejemplos adicionales de desarrollos web con HTML y CSS3, incluyendo una línea de tiempo, un tooltip, un efecto flip, y un símbolo de cargador.
Bonus: Herramienta de desarrollo web
Se revisan herramientas útiles para el desarrollo web, incluyendo herramientas para seleccionar colores, encontrar colores armónicos, descargar fuentes e iconos, crear gradientes, y diseñar con Flexbox y Grid.
Ejercicios del curso Todo HTML5 y CSS3
Se concluye el curso con una sección de preguntas y ejercicios para reforzar el aprendizaje.
Deal Source: real.discount