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 el pipeline de renderizado del navegador. Fundamenta todo el trabajo posterior con HTML y CSS en el comportamiento real del navegador.

Lección 3 • Configuración de su entorno de desarrollo

Instala y configura un editor de código, las herramientas de desarrollo del navegador y un servidor local de archivos. 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 corporal 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 al reservar las tablas estrictamente para datos tabulares.

Lección 4 • Enlaces e imágenes

Cubre las 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, los atributos action, method y los 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 la agrupación lógica de formularios.

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 los tipos de entrada HTML5: date, range, color, tel y number. Los tipos 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 tamaño del elemento. El dominio del modelo de caja es un prerrequisito para todo el trabajo de diseño.

Lección 2 • Especificidad, herencia y cascada

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

Lección 3 • Sintaxis de 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 una tipografía escalable y accesible.

Lección 1 • Combinación de 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 • Posicionamiento en Grid y áreas con nombre

Enseña la colocación basada en líneas, la sintaxis span y grid-template-areas para regiones con nombre. Las áreas con nombre 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 el apilamiento de los elementos.

Lección 4 • Fundamentos de Flexbox

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

Lección 1 • Tipografía y espaciado responsivos

Aplica clamp, unidades vw y escalas de espaciado fluido a la tipografía y los espacios de diseño. El tipo fluido elimina la necesidad de múltiples anulaciones de breakpoint.

Lección 2 • Sintaxis de media query y breakpoints

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

Lección 3 • Principios del diseño responsivo

Cubre las cuadrículas fluidas, las imágenes flexibles y la etiqueta meta viewport como los tres pilares del 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 la 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 están aceleradas por GPU y no desencadenan reflujo de diseño.

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 en todo el tema desde una sola declaración.

Lección 4 • Animaciones de fotogramas clave CSS

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

Lección 1 • Aplicación del sistema de diseño CSS

Implementa propiedades personalizadas, escala tipográfica y estilos de componentes 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 los objetivos del sitio, el inventario de contenido y wireframes de baja fidelidad antes de escribir código. La planificación previene reescrituras estructurales y el descontrol del alcance durante el desarrollo.

Lección 3 • Implementación del diseño 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 automáticas y manuales, corrige problemas de contraste y agrega preferencias de movimiento. El sitio final cumple con los estándares WCAG AA de contraste y navegación por teclado.