Este proyecto es mi solución al reto Blog Preview Card de Frontend Mentor. El objetivo fue construir una tarjeta de vista previa de blog, siguiendo el diseño propuesto y aplicando técnicas modernas de desarrollo frontend.
Características principales
- Diseño responsivo:
La tarjeta 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 (<article>,<img alt>,<h2>,<p>) y jerarquía visual clara con títulos, colores y espaciados. Se implementaron estados de hover y focus para todos los elementos interactivos. - Estilizado personalizado:
El sistema de diseño utiliza variables CSS para colores, tamaños de fuente y espaciado. La fuente “Figtree” se integra localmente para una tipografía consistente. - Optimización de rendimiento:
Mínimas dependencias externas y assets auto-hospedados para carga rápida y disponibilidad offline.
Proceso y aprendizajes
Durante el desarrollo, me enfoqué en mejorar la accesibilidad (atributos alt descriptivos, roles ARIA donde fue necesario), el diseño responsivo (media queries, unidades relativas) y las buenas prácticas de CSS (variables, flexbox, evitar alturas fijas).
Tecnologías utilizadas
- Astro Framework
- HTML5 semántico
- CSS con custom properties y media queries
- Fuente Figtree auto-hospedada
Recursos
- Frontend Mentor Style Guide
- MDN Web Docs
- Google Fonts
Autor
- Frontend Mentor: @JoelBuenrostro
- GitHub: JoelBuenrostro
- Instagram: @joel_buenrostro
¿Tienes alguna pregunta o comentario sobre este proyecto? ¡No dudes en contactarme a través de mis redes sociales o dejando un comentario aquí!