📚 Tanda 5 – Solo enunciados de ejercicios (nivel medio)

Tabla de contenidos

Objetivo: practicar clip-path, Grid y variables CSS.

Crea perfiles.html.
Maqueta tres tarjetas de usuario contenidas en un section con Grid responsivo.
Cada tarjeta debe mostrar foto, nombre, rol y botón “Seguir”.
Redondea la foto usando clip-path: circle() y permite cambiar su tamaño con CSS variables.
Al pasar el ratón, el borde de la tarjeta debe animar su grosor.

Objetivo: thead/tbody/tfoot, atributos data-* y pseudoclases avanzadas.

Crea gastos.html con una tabla de 12‑15 registros (fecha, categoría, importe).
Añade un pie de tabla que calcule total mensual (puede ir hard‑coded).
Implementa un menú de filtros (radio buttons): “Todos”, “Alimentación”, “Ocio”… sin JS.
Cuando se active un filtro, deben mostrarse solo las filas coincidentes; las demás se ocultan con CSS.
Resalta las filas de importe > 100 € usando :has() o :is() combinado con atributos.

Objetivo: inputs tipo radio ocultos, accesibilidad y validación propia HTML5.

Crea resena.html con un formulario que recoja nombre, correo, comentario y puntuación 1‑5.
Dibuja las estrellas con SVG embebido o icon font; deben cambiar color cuando se seleccionan.
Asegúrate de que el grupo de radios sea accesible por teclado y con lector de pantalla.
Muestra un contador en vivo de caracteres restantes para el comentario (máx. 200) usando JS ligero.
El botón “Enviar” debe desactivarse hasta que todos los campos sean válidos.

Objetivo: Flexbox, scroll-snap y JS para navegación.

Crea slider.html con un contenedor horizontal de mínimo 4 testimonios.
Usa scroll-snap-type: x mandatory; para que cada tarjeta se alinee al soltar.
Añade flechas “prev/next” y puntos indicadores mediante JS sencillo.
Activa autoplay que avance cada 6 s y se pause con mouseenter.
Asegúrate de que el slider funcione igual con teclado (flechitas) y que los indicadores tengan aria-live.

Objetivo: Variables, prefers-contrast y persistencia.

Crea temas.html con un interruptor (checkbox o botón) “Tema alto contraste”.
Define al menos dos esquemas de color mediante variables (normal y alto‑contraste).
Si el sistema reporta prefers-contrast: more, elige automáticamente el modo alto, salvo que el usuario seleccione otro.
Guarda la preferencia en localStorage y reaplica al recargar.
Añade animación suave al cambiar tema (colores y fondo).

Objetivo: Canvas o SVG, APIs de tiempo y accesibilidad.

Crea cronometro.html que muestre un círculo que se llena a medida que avanza el tiempo.
Implementa botones Start, Pause y Reset.
El tiempo total debe ser configurable (por ejemplo 2 min).
Actualiza el título de la pestaña (document.title) con la cuenta atrás restante.
Anuncia los últimos 10 segundos mediante aria-live para usuarios con lector de pantalla.

Objetivo: API HTML Drag & Drop, Flexbox y aria-grabbed.

Objetivo: Animación de capas, pseudo‑elementos y @media (prefers-reduced-motion).

Crea 404-parallax.html con título grande “404”.
Detrás del título, coloca al menos tres capas (div, SVG o img) que se muevan a distinta velocidad cuando el ratón se mueva.
Desactiva la animación si se detecta prefers-reduced-motion: reduce.
Añade un botón “Volver al inicio” que obtenga el foco automáticamente al cargar.
Valida que el contraste del texto y el foco sean AA o mejor.

🔍 Cómo usarlos