Un ejemplo visual y educativo para principiantes.
Este proyecto no es una solución compleja ni un encargo real, sino una demostración sencilla y didáctica que preparé para una charla con alumnos de mi instituto.
Mi objetivo fue mostrarles, en pocos minutos y de forma visual, cómo se pueden combinar pequeñas técnicas modernas del frontend para mejorar la experiencia de usuario, sin necesidad de grandes frameworks.
Puntos clave que vimos
✅ scroll-snap: navegación vertical fluida entre secciones
✅ glightbox: efecto lightbox moderno sin jQuery
✅ text-gradient: uso de gradientes en títulos para captar atención
✅ 🎯 Responsive layout básico, adaptable a móviles
Sencillo, pero no olvidemos la semántica
Además, aproveché para reforzar buenas prácticas semánticas (<figure>, <figcaption>) y accesibles (alt, títulos descriptivos), todo en un entorno limpio y minimalista que puede ser replicado fácilmente por estudiantes.
Aunque se trata de un proyecto sencillo orientado a enseñanza, me aseguré de aplicar buenas prácticas desde el inicio.
El resultado: Una puntuación casi perfecta en Lighthouse:
⚡ Performance: 99
♿ Accessibility: 100
🛡️ Best Practices: 100
🔍 SEO: 100
Esto demuestra que incluso en proyectos introductorios se puede escribir código limpio, accesible y bien optimizado para la web moderna.
