Frontend Mentor - Blog preview card solution

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.

Table of contents

• Screenshot
• Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Screenshot

Links

• Solution URL: https://github.com/TheGroobi/blog-preview-card
• Live Site URL: https://blog-preview-card-weld.vercel.app

My process

Really easy challange, putting everything together into containers makes it easy to create padding and spacing. Positioning it with flexbox inside a 100vh x 100% container makes it always centered, and using em values as padding/margin feels way more reliable.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

Feeling more comfortable with using flexbox and relative values for padding/margin. A lot cleaner than the first challange i did here.

Useful resources

• Image Styling - Forgot how to make the icon smaller and this helped.
• Box Shadow - Really helpful guide for box shadow.

Author

• Frontend Mentor - @TheGroobi