This is a solution to the Blog Preview Card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
The challenge was to build a responsive blog preview card component that looks great on all screen sizes. The design was provided by Frontend Mentor, and the goal was to replicate it as closely as possible using HTML and CSS.
Requirements:
- Build a responsive blog preview card.
- Match the design provided in the style guide.
- Ensure accessibility and semantic HTML.
- HTML5: Semantic markup for better accessibility.
- CSS3: Custom properties, Flexbox, and Grid for layout.
- Google Fonts: Used the
Figtreefont for typography. - Mobile-First Workflow: Designed for mobile devices first, then scaled up for larger screens.
- CSS Custom Properties: Used CSS variables (
:root) to manage colors and make the code more maintainable. - Responsive Design: Practiced creating a responsive layout that adapts to different screen sizes.
- Accessibility: Improved my understanding of semantic HTML and proper use of
altattributes for images. - CSS Pseudo-Elements: Used
::beforeto create a shadow effect for the card.
Areas I want to continue focusing on in future projects:
- Advanced CSS Animations: Adding subtle animations to improve user experience.
- CSS Grid: Exploring more complex grid layouts.
- JavaScript Integration: Adding interactivity to static components.
- Frontend Mentor - For providing the challenge and design files.
- CSS Tricks - For helpful articles on CSS Grid and Flexbox.
- Google Fonts - For the
Figtreefont used in this project. - MDN Web Docs - For reference on HTML and CSS.
- Zahra Ehsani
- Frontend Mentor: For providing the challenge and design files.
- Google Fonts: For the
Figtreefont. - Open Source Community: For the wealth of resources and inspiration.
Thank you for checking out this project! If you have any feedback or suggestions, feel free to reach out or open an issue on GitHub.