Este proyecto es mi solución al reto Recipe Page de Frontend Mentor. El objetivo fue construir una página de receta siguiendo el diseño propuesto y aplicando técnicas modernas de desarrollo frontend.
Características principales
- Diseño responsivo:
El layout se adapta dinámicamente usando CSS Flexbox y media queries, asegurando una experiencia fluida en dispositivos móviles, tablet y escritorio. - Accesibilidad:
Uso de HTML semántico (<main>,<section>,<h1>,<p>) y jerarquía visual clara con títulos, colores y espaciados. - Integración de fuentes locales:
Se integraron las fuentes “Young Serif” y “Outfit” mediante archivos locales y@font-facepara una apariencia personalizada y profesional. - Estilizado personalizado:
El sistema de diseño utiliza variables CSS para colores, tamaños de fuente y espaciado, siguiendo la guía de Frontend Mentor.
Proceso y aprendizajes
Durante el desarrollo, me enfoqué en lograr un diseño pixel-perfect, integrar correctamente las fuentes locales y mejorar la accesibilidad. Se resolvieron retos como la adaptación del layout a diferentes tamaños de pantalla y la personalización de los elementos visuales.
Tecnologías utilizadas
- Astro Framework
- HTML5 semántico
- CSS con custom properties y media queries
- Fuentes locales: Young Serif y Outfit
Retrospectiva
Este proyecto me permitió profundizar en diseño responsivo, integración de fuentes y buenas prácticas de accesibilidad. Si lo retomara, exploraría el uso de SASS para escalar los estilos y añadir más características de accesibilidad.
Recursos
- Frontend Mentor Style Guide
- MDN Web Docs
- Google Fonts
Autor
- Frontend Mentor: @JoelBuenrostro
- GitHub: JoelBuenrostro
- Instagram: @joel_buenrostro
¿Tienes sugerencias o comentarios? ¡Feliz código!