Ejercicios de HTML y CSS para practicar
Maquetación y accesibilidad de páginas reales por apartados: Flexbox, Grid, diseño adaptable, variables CSS, tipografía fluida, formularios accesibles y componentes con JavaScript, comprobados con pruebas en la propia página.
Cada ejercicio trae enunciado, pistas, solución y pruebas automáticas: escribes el código aquí mismo, lo ejecutas y ves al momento si es correcto. Tu progreso se guarda en el tema del que sale cada ejercicio.
Ejercicios largos de HTML y CSS
Enunciados completos con ejemplos, guía paso a paso y solución explicada, como los de un examen práctico.
Difícil90 minLanding de una cafetería: Flexbox, Grid y diseño adaptableMaqueta paso a paso la página de una cafetería: la cabecera con Flexbox que se reorganiza en el móvil, la carta en una rejilla de 1, 2 o 3 columnas, variables y tipografía fluida con clamp, la etiqueta de agotado con ::after y un formulario de reservas accesible.Ver el ejercicio Medio60 minPágina de un evento accesible: HTML semántico y ARIACorrige las barreras de accesibilidad de la página de unas jornadas: header, nav y main, enlace para saltar al contenido, encabezados, textos alternativos (y alt vacío para lo decorativo), una tabla bien marcada, enlaces que dicen adónde llevan y un menú desplegable con aria-expanded.Ver el ejercicio