Paso a Paso — Lea · Learning by Projects

Proyecto ejemplo

Mi primera web responsive
— guía completa

Sigue este proyecto completo para construir una landing page profesional desde cero. Ideal para ver cómo funciona el método Lea.

Información del proyecto

Duración 8 horas

Nivel Principiante

Categoría Tecnología

Pasos 5 fases

HTML5 CSS3 JavaScript Responsive

Progreso 0%

← Más proyectos

Planificación y estructura HTML

~90 min ▾

Empezamos definiendo la estructura semántica de la página. Antes de escribir código, planifica qué secciones necesita tu landing page.

Define el objetivo de tu landing page (producto, servicio o portafolio)
Dibuja un boceto en papel de las secciones: header, hero, features, CTA, footer
Crea la estructura HTML semántica con etiquetas correctas

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi Landing Page</title> </head> <body> <header>...</header> <main> <section class="hero">...</section> <section class="features">...</section> </main> <footer>...</footer> </body> </html>

💡 Consejo: Usa siempre etiquetas semánticas como <header>, <main>, <section> en lugar de divs genéricos. Mejora el SEO y la accesibilidad.

Diseño visual y sistema CSS

~120 min ▾

Ahora damos estilo a la estructura. Definimos variables CSS, tipografía, colores y el sistema de espaciado que usaremos en toda la página.

Crea variables CSS para colores, tipografía y espaciado
Aplica estilos reset y base para consistencia cross-browser
Diseña el header con navegación funcional
Crea la sección hero con imagen de fondo y texto superpuesto

:root { --primary: #E07535; --text: #1C1B2E; --bg: #FFFFFF; --spacing: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } .hero { min-height: 90vh; background: var(--bg); display: flex; align-items: center; padding: calc(var(--spacing) * 8); }

💡 Consejo: Diseña primero para móvil y luego escala a pantallas más grandes. Es más fácil ampliar que reducir.

Responsive design con CSS Grid & Flexbox

~90 min ▾

Adaptamos el diseño a todas las pantallas usando CSS Grid y Flexbox. La página debe verse perfecta en móvil, tablet y desktop.

Implementa un grid de 12 columnas con CSS Grid
Usa Flexbox para alinear elementos dentro de cada sección
Añade media queries para breakpoints: 480px, 768px, 1024px
Prueba en Chrome DevTools con distintos tamaños de pantalla

/* Grid de features */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 768px) { .features-grid { grid-template-columns: 1fr; } }

Interactividad con JavaScript

~90 min ▾

Añadimos comportamiento interactivo: menú hamburguesa, animaciones de scroll, formulario con validación y smooth scroll.

Implementa el menú hamburguesa para móvil
Añade animaciones de fade-in al hacer scroll
Crea la validación del formulario de contacto
Implementa smooth scroll para los enlaces de navegación

// Menú hamburguesa const hamburger = document.getElementById('hamburger'); const menu = document.querySelector('.nav-menu'); hamburger.addEventListener('click', () => { menu.classList.toggle('open'); hamburger.classList.toggle('active'); }); // Animación al scroll const observer = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }); }, { threshold: 0.1 });

💡 Consejo: Usa el IntersectionObserver API en lugar de eventos scroll para mejor rendimiento y animaciones más fluidas.

Revisión final y publicación

~60 min ▾

Revisamos el proyecto, optimizamos el código y lo publicamos online para añadirlo a nuestro portafolio.

Valida el HTML con el validador de W3C
Comprueba el rendimiento con Lighthouse en Chrome
Asegura que todas las imágenes tienen atributo alt
Despliega en GitHub Pages o Netlify (gratis)
Comparte el enlace en la galería de Lea

🎉 ¡Enhorabuena! Al completar este proyecto habrás creado tu primera web responsive y entenderás HTML, CSS y JS en profundidad. ¡Publícala en la galería!

Recursos de apoyo

Todo lo que necesitas
para no bloquearte

Cada proyecto incluye un set completo de recursos para que puedas avanzar con confianza en cada paso.

📚

Documentación de referencia

Cada tecnología usada viene con enlace a la documentación oficial y resúmenes de los conceptos más importantes.

Acceder →

🎥

Videos de apoyo

Cuando un concepto es complejo, incluimos videos cortos (5-10 min) que explican exactamente lo que necesitas.

Ver videos →

💡

Pistas y soluciones

Si te bloqueas en algún paso, tienes acceso a pistas progresivas y la solución completa de referencia.

Ver pistas →

👥

Comunidad de estudiantes

Pregunta, comparte avances y da feedback a otros estudiantes que estén trabajando en el mismo proyecto.

Unirse →

🛠️

Código de inicio

Muchos proyectos incluyen un boilerplate inicial para que puedas arrancar sin perder tiempo en configuraciones.

Descargar →

🏆

Certificado de proyecto

Al completar cada proyecto recibes un certificado digital que puedes compartir en LinkedIn y tu portafolio.

Ver ejemplo →

Preguntas frecuentes

Todo lo que quieres
saber antes de empezar

¿Necesito experiencia previa para empezar?

No necesitas ninguna experiencia previa. Tenemos proyectos diseñados específicamente para principiantes absolutos que te enseñan los fundamentos desde cero mientras construyes algo real.

¿Cuánto tiempo necesito dedicar cada semana?

Con 4-6 horas semanales puedes completar la mayoría de proyectos en 2-4 semanas. Cada guía indica el tiempo estimado total y por paso para que puedas planificar tu ritmo.

¿Puedo completar los proyectos a mi propio ritmo?

Completamente. No hay fechas de entrega ni plazos. Cada proyecto queda guardado en tu perfil y puedes retomarlo cuando quieras. El progreso se guarda automáticamente.

¿Qué pasa si me bloqueo en algún paso?

Cada proyecto incluye pistas progresivas, ejemplos de solución y acceso a la comunidad de estudiantes y mentores. Nunca estás solo. También puedes consultar en el foro específico de cada proyecto.

¿Los proyectos completados sirven para un portafolio profesional?

Sí. Cada proyecto está diseñado para producir un resultado real y de calidad que puedas mostrar a empleadores o clientes. Muchos estudiantes han conseguido trabajo o clientes gracias a sus proyectos de Lea.

Construye paso
a paso

Mi primera web responsive
— guía completa

Información del proyecto

Planificación y estructura HTML

Diseño visual y sistema CSS

Responsive design con CSS Grid & Flexbox

Interactividad con JavaScript

Revisión final y publicación

Aprende, aplica
y mejora constantemente

Objetivo claro

Ciclos cortos

Feedback constante

Todo lo que necesitas
para no bloquearte

Documentación de referencia

Videos de apoyo

Pistas y soluciones

Comunidad de estudiantes

Código de inicio

Certificado de proyecto

Todo lo que quieres
saber antes de empezar

¿Necesito experiencia previa para empezar?

¿Cuánto tiempo necesito dedicar cada semana?

¿Puedo completar los proyectos a mi propio ritmo?

¿Qué pasa si me bloqueo en algún paso?

¿Los proyectos completados sirven para un portafolio profesional?

Construye pasoa paso

Mi primera web responsive— guía completa

Información del proyecto

Planificación y estructura HTML

Diseño visual y sistema CSS

Responsive design con CSS Grid & Flexbox

Interactividad con JavaScript

Revisión final y publicación

Aprende, aplicay mejora constantemente

Objetivo claro

Ciclos cortos

Feedback constante

Todo lo que necesitaspara no bloquearte

Documentación de referencia

Videos de apoyo

Pistas y soluciones

Comunidad de estudiantes

Código de inicio

Certificado de proyecto

Todo lo que quieressaber antes de empezar

¿Necesito experiencia previa para empezar?

¿Cuánto tiempo necesito dedicar cada semana?

¿Puedo completar los proyectos a mi propio ritmo?

¿Qué pasa si me bloqueo en algún paso?

¿Los proyectos completados sirven para un portafolio profesional?

Construye paso
a paso

Mi primera web responsive
— guía completa

Aprende, aplica
y mejora constantemente

Todo lo que necesitas
para no bloquearte

Todo lo que quieres
saber antes de empezar