Retos CSS

Una colección abierta de retos de CSS para practicar interfaces, animaciones, layouts y diseño responsive. Cada directorio contiene una demo independiente y la galería reúne los 25 retos en una sola página.

La idea es simple: abre un reto, entiende cómo funciona, haz una versión propia y comparte lo que aprendas. Las mejoras y nuevos retos son bienvenidos.

Repositorio público: github.com/thealexdev/reto-proyectos-css-001

Galería

La galería está en main/main.html. Muestra una vista previa aislada de cada demo, una descripción breve de lo que se practica y un enlace para abrir cada reto a pantalla completa.

Empezar

Necesitas una versión actual de Node.js y npm.

npm install
npm run dev

El servidor abre la galería en http://localhost:5173/main/main.html.

Comandos

Comando	Descripción
npm run dev	Inicia el servidor de desarrollo.
npm run build	Genera la versión estática completa en dist/.
npm run preview	Sirve localmente el contenido generado en dist/.

El build copia las demos junto con la galería, por lo que los iframe y recursos locales también funcionan en producción.

Despliegue en Surge

Genera la versión estática y publica el contenido de dist/:

npm run build
surge dist retos-css.surge.sh

El build crea dist/index.html además de dist/main/main.html, por lo que Surge mostrará la galería directamente desde la raíz del dominio.

Estructura

main/main.html              # Galería de retos
1_nav_responsive/           # Demo independiente
2_imagenes_apiladas/        # Demo independiente
...
25_card_skate/              # Demo independiente
vite.config.js              # Configuración de desarrollo y build

Las demos mantienen sus estilos y recursos dentro de su propio directorio. Las rutas de directorios usan snake_case; los estilos suelen estar en css/, scss/ o sass/, y los recursos en img/.

Contribuir

1. Haz un fork y crea una rama para tu propuesta.
2. Crea o modifica un reto dentro de un directorio con snake_case.
3. Incluye un punto de entrada HTML, estilos y recursos locales necesarios.
4. Si usas SCSS, compila y versiona el archivo CSS y su mapa de origen.
5. Añade la vista previa, título y descripción del reto en main/main.html.
6. Si creas una demo nueva, añádela a demoDirectories en vite.config.js para incluirla en dist/.
7. Ejecuta npm run build y comprueba que la galería y el reto funcionan en escritorio y móvil.
8. Abre un pull request explicando qué construiste y qué técnicas CSS exploraste.

No hace falta crear algo enorme. Una variación, una interacción nueva o una mejor solución responsive también es una contribución valiosa.

Ideas para un reto

• Reinterpretar una de las demos con otra identidad visual.
• Crear una microinteracción accesible con :focus-visible y prefers-reduced-motion.
• Diseñar un componente responsive sin JavaScript.
• Convertir una interfaz cotidiana en un experimento visual.

Créditos

Proyecto creado y mantenido como espacio de práctica y aprendizaje compartido de CSS.

Gran parte de este aprendizaje parte del trabajo de Código 369, mi maestro e inspiración para seguir explorando CSS.