Principiante
Unas 16 horasProyecto 1 de 4Web accesible para un comercio de barrio
Una librería de barrio quiere su primera web: portada con novedades, catálogo, página de eventos y formulario de contacto. Debe verse bien en el móvil, ser accesible y cargar rápido. Constrúyela con HTML semántico y CSS propio, sin frameworks, y añade algo de interactividad con JavaScript.
HTML5CSS3 (Flexbox y Grid)JavaScriptLighthouse
Tu avance0/16 · 0 %
Objetivos de aprendizaje
- •Estructurar páginas con etiquetas semánticas y una jerarquía de encabezados correcta
- •Maquetar con Flexbox y Grid y adaptar el diseño al móvil con media queries
- •Crear formularios accesibles con validación nativa
- •Manipular el DOM para filtrar contenido
Requisitos mínimos
Fases sugeridas
- 1
Contenido y estructura
- 2
Estilos
- 3
Interactividad y formulario
- 4
Calidad
Qué entregar
- Código fuente en un repositorio
- Web publicada (GitHub Pages o similar)
- Informe de Lighthouse y de los validadores
Para ir más allá
- Modo oscuro con prefers-color-scheme
- Mapa de la tienda incrustado de forma accesible
- Marcado de datos estructurados (schema.org) para la tienda
Rúbrica de evaluación
| Criterio | Peso | Para la máxima nota |
|---|---|---|
| HTML semántico | 25 % | Etiquetas adecuadas, encabezados en orden y validación sin errores |
| Maquetación responsive | 25 % | Diseño cuidado en todos los tamaños sin desbordamientos |
| Accesibilidad | 25 % | Navegable con teclado, contraste AA, textos alternativos útiles |
| JavaScript | 15 % | Filtro funcional sin errores en consola y sin recargar la página |
| Publicación | 10 % | Web publicada y rápida |
Úsala para autoevaluarte antes de entregar. Tu profesorado puede usar otros criterios.
Consejos y errores típicos
- Un div con onclick no es un botón: usa <button>.
- Diseña primero para el móvil: añadir columnas es más fácil que quitarlas.