Skip to content

Desarrollo Full-Stack

HTML5, CSS3 y JavaScript Moderno


Course
Jorge Alberto Osorio
Access code required
Enroll

Domina HTML5, CSS3 y JavaScript moderno desde cero con un enfoque práctico, creando sitios web profesionales, accesibles y optimizados que funcionan en cualquier dispositivo y cumplen con los estándares actuales.

Este curso está diseñado para quienes desean aprender a construir sitios web modernos combinando HTML5, CSS3 y JavaScript, priorizando la aplicación práctica y la resolución de problemas reales desde el primer día. A través de cinco módulos cuidadosamente estructurados, avanzarás desde la creación de la estructura básica de una página HTML hasta el desarrollo de aplicaciones web interactivas y optimizadas, todo ello bajo una metodología que privilegia ejemplos concretos, ejercicios inmediatos y herramientas accesibles. Comenzarás entendiendo la estructura esencial de un documento HTML5 y la importancia de las etiquetas semánticas para la accesibilidad y el SEO. Aprenderás a incorporar multimedia y a crear formularios interactivos con validación nativa, sentando bases sólidas para cualquier proyecto web. A continuación, explorarás los selectores, la jerarquía y el modelo de caja en CSS3, así como el diseño responsivo con Media Queries y la integración de animaciones y transiciones para enriquecer la experiencia del usuario. El tercer módulo te sumergirá en JavaScript moderno: su sintaxis, tipos de datos, variables, operadores y estructuras de control, enseñándote a definir funciones eficientes y comprender el alcance de las variables para escribir código limpio y reutilizable. Descubrirás cómo manipular dinámicamente el DOM, gestionar eventos y actualizar el contenido en respuesta a la interacción del usuario, además de almacenar información de manera local o en sesión utilizando las capacidades de HTML5. En la fase avanzada, dominarás la comunicación asíncrona con Fetch API para conectar tus páginas con servidores externos sin recargar, y aplicarás buenas prácticas de accesibilidad y optimización SEO. Aprenderás técnicas de rendimiento web modernas para minimizar tiempos de carga y mejorar la eficiencia de tus proyectos. Además, te familiarizarás con las principales herramientas de desarrollo y depuración integradas en los navegadores, esenciales para resolver problemas y mejorar tu código. Finalmente, el curso culmina con la gestión de versiones usando Git y GitHub, preparándote para el trabajo colaborativo en proyectos reales. A lo largo de cada módulo, pondrás en práctica lo aprendido con ejercicios y mini-proyectos que podrás implementar desde el primer día, recibiendo métricas simples para medir tu progreso. Al finalizar, tendrás las competencias para diseñar, desarrollar y optimizar sitios web profesionales, accesibles y listos para el mundo real, siguiendo las mejores prácticas del sector.

Here is the course outline:

1. Fundamentos esenciales de la Web moderna

Introducción práctica a la creación de páginas con HTML5, primeros estilos en CSS3 y bases de JavaScript para sentar cimientos sólidos de desarrollo.

Bienvenida
Arquitectura mínima y etiquetas semánticas en HTML5
Multimedia y estilos fundacionales: del píxel al bloque
Primeros pasos en JavaScript: sintaxis y control de flujo
Ensayo Integrador: Del andamiaje semántico a la web interactiva
Quiz: Fundamentos esenciales de la Web moderna
Proyecto: Crea tu Página Web Personal Interactiva

2. Diseño responsivo y experiencia de usuario visual

Profundiza en técnicas de CSS3 para lograr sitios adaptables, accesibles y optimizados, incorporando animaciones que cautivan.

Media Queries: anatomía del diseño responsivo
Accesibilidad y SEO como cimientos del front-end
Animaciones fluidas y rendimiento optimizado
Ensayo integrador: Diseño responsivo, accesibilidad, animaciones y rendimiento web
Quiz: Diseño responsivo, accesibilidad, animaciones y rendimiento web
Proyecto de Módulo: Sitio Web Adaptable, Accesible y Animado

3. Lógica y dinamismo con JavaScript

Aprende a dotar de interactividad a tus páginas mediante formularios inteligentes, manejo del DOM y respuesta a eventos del usuario.

Formularios inteligentes y validación nativa
Funciones, alcance y modularidad de código
DOM, eventos y manipulación dinámica del contenido
Ensayo: De formularios inteligentes a interfaces interactivas con JavaScript
Quiz: Lógica y dinamismo con JavaScript
Proyecto: Crea un formulario interactivo y dinámico con JavaScript modular

4. Datos, rendimiento y colaboración profesional

Gestiona información en el navegador, comunica tu aplicación con servidores, depura de forma eficiente y controla versiones con Git.

Persistencia en el navegador: localStorage y sessionStorage
Fetch API: diálogo asíncrono con el servidor
Depuración eficaz y control de versiones profesional
Ensayo Integrador: Dominio de datos, rendimiento y colaboración profesional
Quiz: Datos, rendimiento y colaboración profesional
Proyecto Integrador: Aplicación Web Persistente y Colaborativa

5. Síntesis y hoja de ruta para el desarrollo web futuro

Recapitula los aprendizajes clave, conecta conceptos y traza un plan de acción para proyectos reales de desarrollo front-end.

Refinando la base: HTML5 semántico revisitado
Una única interfaz para todos los dispositivos
Rendimiento holístico: de la carga crítica al despliegue
Ensayo de Síntesis: De la Semántica al Rendimiento en el Desarrollo Web Moderno
Quiz: Síntesis y hoja de ruta para el desarrollo web futuro
Proyecto integrador: Sitio web semántico, responsivo y optimizado
Glossary
Study guide
Back to top