Curso de HTML5 y CSS3

Lección 1 • Introducción a los Roles de HTML y CSS

Distingue la estructura (HTML), presentación (CSS) y comportamiento (JavaScript) como preocupaciones separadas. Establece expectativas para el arco completo del curso.

Lección 2 • Cómo Funciona la Web

Cubre los ciclos de solicitud-respuesta HTTP, la resolución DNS y los pipelines de renderizado del navegador. Fundamenta todo el trabajo posterior de HTML/CSS en el comportamiento real del navegador.

Lección 3 • Configuración de tu Entorno de Desarrollo

Instala y configura un editor de código, las herramientas de desarrollo del navegador y un servidor de archivos local. Asegura que cada estudiante tenga un espacio de trabajo consistente y productivo.

Lección 1 • Reglas de Sintaxis y Anatomía de HTML5

Explica etiquetas, atributos, reglas de anidamiento y la declaración DOCTYPE. La sintaxis correcta previene problemas de renderizado en modo quirks del navegador.

Lección 2 • Elementos de Contenido de Texto

Enseña encabezados, párrafos, listas, citas en bloque y elementos de texto en línea. Los estudiantes estructuran contenido del cuerpo legible y semánticamente significativo.

Lección 3 • Tablas y Presentación de Datos

Construye tablas de datos accesibles usando los elementos thead, tbody, th y td. Refuerza el HTML semántico reservando las tablas estrictamente para datos tabulares.

Lección 4 • Enlaces e Imágenes

Cubre etiquetas de anclaje, valores href, atributos target y el elemento img con texto alt. Estos elementos forman la columna vertebral de páginas web navegables y visuales.

Lección 1 • Fundamentos de Formularios HTML5

Cubre el elemento form, atributos action, method y tipos de entrada principales. Los formularios son el mecanismo principal para el envío de datos del usuario.

Lección 2 • Select, Textarea y Fieldset

Construye menús desplegables, áreas de texto multilínea y controles de formulario agrupados. Fieldset y legend mejoran la accesibilidad y el agrupamiento lógico del formulario.

Lección 3 • Elementos de Referencia Semántica

Introduce header, nav, main, article, section, aside y footer. El marcado semántico mejora la accesibilidad y la indexación en motores de búsqueda.

Lección 4 • Tipos de Entrada y Atributos Avanzados

Explora tipos de entrada HTML5: date, range, color, tel y number. Los tipos de entrada nativos reducen la dependencia de JavaScript y mejoran la UX móvil.

Lección 1 • El Modelo de Caja de CSS

Define las áreas de contenido, relleno, borde y margen y su efecto en el dimensionamiento de elementos. El dominio del modelo de caja es prerrequisito para todo trabajo de diseño.

Lección 2 • Especificidad, Herencia y Cascada

Explica cómo los navegadores resuelven reglas conflictivas usando puntuaciones de especificidad y orden de origen. Dominar la cascada previene sobrescrituras de estilo inesperadas.

Lección 3 • Sintaxis CSS y Métodos de Vinculación

Cubre conjuntos de reglas, declaraciones, estilos en línea, bloques de estilo internos y hojas de estilo externas. Las hojas de estilo externas se establecen como el estándar profesional.

Lección 4 • Colores, Unidades y Fundamentos de Tipografía

Cubre valores de color hex, RGB, HSL y unidades CSS absolutas vs. relativas. El uso consistente de unidades rem y em soporta tipografía escalable y accesible.

Lección 1 • Combinando Flexbox y Grid

Demuestra cuándo anidar Flexbox dentro de celdas Grid y viceversa. Los estudiantes construyen un diseño de página completo usando ambos sistemas apropiadamente.

Lección 2 • Colocación en Grid y Áreas Nombradas

Enseña colocación basada en líneas, sintaxis span y grid-template-areas para regiones nombradas. Las áreas nombradas hacen que los diseños complejos sean legibles y mantenibles.

Lección 3 • Alineación y Orden en Flexbox

Cubre las propiedades justify-content, align-items, align-self y order. Estas propiedades permiten un control preciso sobre la distribución y apilamiento de elementos.

Lección 4 • Fundamentos de Flexbox

Introduce el modelo de contenedor flex y elemento flex, ejes y la propiedad flex-direction. Flexbox resuelve elegantemente problemas de alineación unidimensional.

Lección 1 • Tipografía y Espaciado Responsivos

Aplica clamp, unidades vw y escalas de espaciado fluido a tipografía y espacios de diseño. La tipografía fluida elimina la necesidad de múltiples sobrescrituras de breakpoint.

Lección 2 • Sintaxis de Media Queries y Breakpoints

Enseña sintaxis @media, tipos de medio y operadores lógicos para definir breakpoints. Los breakpoints deben reflejar necesidades de contenido, no tamaños de dispositivo específicos.

Lección 3 • Principios de Diseño Responsivo

Cubre cuadrículas fluidas, imágenes flexibles y la etiqueta meta viewport como los tres pilares de RWD. Estos principios guían cada decisión de diseño en este capítulo.

Lección 4 • Imágenes y Medios Responsivos

Usa srcset, sizes y el elemento picture para servir imágenes de tamaño apropiado. La entrega correcta de imágenes reduce el peso de página en redes móviles.

Lección 1 • Rendimiento y Accesibilidad del Movimiento

Identifica propiedades compuestas, evita animaciones que desencadenan layout y respeta prefers-reduced-motion. El diseño de movimiento responsable sirve a todos los usuarios.

Lección 2 • Transformaciones CSS

Aplica transformaciones translate, rotate, scale y skew en espacio 2D y 3D. Las transformaciones son aceleradas por GPU y no desencadenan reflow de layout.

Lección 3 • Propiedades Personalizadas de CSS

Define y consume variables CSS para tokens de color, espaciado y tipografía. Las propiedades personalizadas permiten cambios temáticos globales desde una sola declaración.

Lección 4 • Animaciones de Keyframes CSS

Construye animaciones de múltiples pasos usando @keyframes, animation-name y propiedades de animación. Las animaciones de keyframes se ejecutan independientemente de la interacción del usuario.

Lección 1 • Aplicando el Sistema de Diseño CSS

Implementa propiedades personalizadas, escala tipográfica y estilos de componente en todas las páginas. Un sistema de diseño compartido asegura consistencia visual en todo el sitio.

Lección 2 • Planificación del Proyecto y Wireframing

Define objetivos del sitio, inventario de contenido y wireframes de baja fidelidad antes de escribir código. La planificación previene reescrituras estructurales y desvíos de alcance durante el desarrollo.

Lección 3 • Implementación de Layout Responsivo

Aplica diseños Grid y Flexbox con media queries mobile-first en todas las páginas. Cada página debe renderizarse correctamente en anchos de viewport de 320px a 1440px.

Lección 4 • Auditoría de Accesibilidad y Pulido Final

Ejecuta verificaciones de accesibilidad automatizadas y manuales, corrige problemas de contraste y añade preferencias de movimiento. El sitio final cumple con estándares WCAG AA de contraste y navegación por teclado.