Módulo II — Fundamentos de Desarrollo Front End

Objetivo general

Al finalizar este módulo serás capaz de construir páginas web responsivas y semánticamente correctas usando HTML5 y CSS3, agregar interactividad con JavaScript, gestionar tu código con Git y publicarlo en GitHub.

Objetivos específicos

Estructurar documentos HTML5 con etiquetas semánticas correctas.
Aplicar estilos con CSS3 y crear layouts responsivos con Flexbox y CSS Grid.
Escribir código JavaScript básico: variables, tipos de datos, funciones, arrays y objetos.
Manipular el DOM con JavaScript y jQuery.
Manejar un flujo de trabajo completo en Git: init, add, commit, push, branch y merge.

Contenido del módulo

#	Tema	Tipo	Duración
1	El Lenguaje HTML	Teoría	6h
2	Estilos CSS y Responsividad	Teoría + Práctica	8h
3	Bases de JavaScript	Práctica	10h
4	Git y GitHub	Práctica	6h
5	Taller: Wallet App	Proyecto	10h

Conceptos clave

Concepto	Descripción
HTML semántico	Uso de etiquetas con significado (`<header>`, `<main>`, `<article>`) para mejorar accesibilidad y SEO.
Responsive Web Design	Diseño adaptable a múltiples tamaños de pantalla usando media queries, Flexbox y Grid.
DOM	Document Object Model — representación en árbol del HTML que JavaScript puede manipular.
Git	Sistema de control de versiones distribuido para rastrear cambios en el código.
Rama (branch)	Línea de desarrollo paralela que permite trabajar sin afectar la rama principal.

Prerrequisitos

Haber completado el Módulo I (pensamiento algorítmico).
Tener instalado: VS Code, Git, y un navegador moderno (Chrome o Edge recomendado).
Cuenta en GitHub.

Recursos adicionales

MDN Web Docs — HTML — Referencia completa de etiquetas HTML.
CSS Tricks — Flexbox Guide — Guía visual de Flexbox.
JavaScript.info — Guía moderna de JavaScript en español.
Oh My Git! — Juego interactivo para aprender Git.

Proyecto integrador

Wallet App — Landing Page

Construir la Wallet App: landing page pública de una billetera digital, con diseño moderno, responsivo y funcional, que demuestre el dominio de HTML5 semántico, CSS3 avanzado y JavaScript básico.

Paso a paso

Crea la estructura HTML con etiquetas semánticas: <header>, <nav>, <main>, <section>, <footer>.
Diseña al menos 4 secciones: hero, características, equipo y contacto.
Implementa el layout con Flexbox y CSS Grid con enfoque mobile-first y responsivo en 3 breakpoints (móvil, tablet, escritorio).
Crea un formulario de contacto con validación en JavaScript (campos requeridos y formato de email).
Agrega al menos una animación o transición CSS (hover, fade, slide, etc.).
Publica el proyecto en un repositorio GitHub con un mínimo de 8 commits descriptivos.
Activa GitHub Pages para que el sitio sea accesible en línea.

Entregable

Sube el link del repositorio GitHub a la plataforma. El repositorio debe ser público y contener:

Todos los archivos fuente (index.html, style.css, script.js)
Un README.md con descripción del proyecto y link a GitHub Pages
Mínimo 8 commits con mensajes descriptivos