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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

This project repo is my solution to the Blog Preview Card Challenge from Frontend Mentor. The goal of this challenge was to build a visually accurate card layout of a Blog Preview that displays an image, some accompanying text, and an image of the author and their name.

This project helped me reinforce my HTML by structuring the card and grouping related content together and my CSS.

Users should be able to:

• See hover and focus states for all interactive elements on the page

• Solution URL: My Solution
• Live Site URL: GitHub Pages

I started by examining the preview image of the design from the provided challenge files. My goal was to replicate the layout and styling as close as possible.

I added more elements to the already provided HTML like <article>, <main>, <section>, and <footer> to group related content together for structuring the page and for flexbox usage.

• Semantic HTML5 markup
• CSS3
• Flexbox

I was able to reinforce my usage of flexbox for the layout of the page and was able to try using the transistion property, and the :hover pseudo class.

In future projects, I want to improve my overall CSS skills, especially with flexbox and layout techniques.

• GitHub - rowanvictor01
• Blog Posts - rowanvictor01
• Frontend Mentor - @rowanvictor01
• X (Twitter) - @rowanlearnscode
• Discord - victor032794