Módulo 1 — Fundamentos de HTML y CSS
Módulo 1 — Fundamentos de HTML y CSS
Section titled “Módulo 1 — Fundamentos de HTML y CSS”Objetivo del módulo
Section titled “Objetivo del módulo”Comprender los principios fundamentales del desarrollo web, estructurando documentos HTML semánticos y aplicando estilos CSS para construir interfaces accesibles y adaptables a distintos dispositivos.
Aprendizaje esperado
Section titled “Aprendizaje esperado”AE1: Aplica estructura semántica y estilos responsivos con HTML5 y CSS3, utilizando buenas prácticas de maquetación y diseño.
Contenidos principales
Section titled “Contenidos principales”- Estructura básica de un documento HTML
- Elementos, etiquetas, atributos y jerarquías.
- Buenas prácticas semánticas.
- Elementos de bloque e inline.
- Introducción a CSS
- Sintaxis, selectores, herencia y cascada.
- Colores, tipografía y unidades relativas.
- Modelo de caja y posicionamiento
- Box model, padding, margin, border.
- Position y display.
- Diseño moderno con Flexbox y Grid
- Distribución adaptable y responsive design.
- Buenas prácticas y accesibilidad
- Semántica, contraste, etiquetas ARIA, testing visual.
Metodología del módulo
Section titled “Metodología del módulo”- Demostraciones prácticas en vivo.
- Desafíos semanales orientados a construir una landing page completa.
- Retroalimentación por pares (revisión de código en PR).
Actividades formativas
Section titled “Actividades formativas”| Actividad | Descripción | Evidencia |
|---|---|---|
| A1.1 | Estructura HTML semántica básica | Archivo index.html |
| A1.2 | Aplicación de estilos CSS externos | Archivo style.css |
| A1.3 | Uso de Flexbox para estructura adaptable | Demo responsive |
| A1.4 | Revisión de accesibilidad y contraste | Captura o test |
Evaluación del módulo
Section titled “Evaluación del módulo”| Criterio | Peso |
|---|---|
| Cumplimiento técnico y validación W3C | 30% |
| Diseño responsivo y estructura semántica | 30% |
| Estilo visual y coherencia gráfica | 20% |
| Accesibilidad y documentación | 20% |
Desafío del módulo
Section titled “Desafío del módulo”Crear una landing page responsiva para una marca ficticia, aplicando HTML5 semántico, CSS modular y principios de accesibilidad.
Este desafío será la base del proyecto final que evolucionará a lo largo del curso.
Recursos recomendados
Section titled “Recursos recomendados”- HTML Living Standard – WHATWG
- CSS Reference – MDN
- Flexbox Froggy (juego interactivo)
- Grid Garden (juego interactivo)
- WebAIM Contrast Checker