This is a solution to the Blog preview card challenge on Frontend Mentor. Frontend Mentor challenges help me improve my coding skills by building realistic projects.
Your challenge is to build out this blog preview card and get it looking as close to the design as possible.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your users should be able to:
- See hover and focus states for all interactive elements on the page
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- HTML structure: practice semantic HTML by using
<h1>, <h2>, <p>, <img>. - CSS styling: improve my skill with
- Flexbox positioning
- Hover and focus effects
- Typography (font size, color, background) to match the design
- Box shadow and border for styling card
- I want to continue improving my CSS layout skills
- I plan to focus more on responsive design, ensuring layout look consistent across all screen sizes
- I also aim to improve my clean and structured code, making it easier to read and maintain
- Example resource 1 - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
- Example resource 2 - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.