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

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

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Blog-preview-card

My process

Built with

• Semantic HTML5 markup
• CSS custom properties (variables)
• CSS media queries
• Flexbox

What I learned

This project deepened my understanding of CSS custom properties (variables) and media queries, which are crucial for creating maintainable and responsive designs. Here are some examples:

/* Variables */
:root {
  --yellow: hsl(47, 88%, 63%);
  --white: hsl(0, 0%, 100%);
  --gray-500: hsl(0, 0%, 42%);
  --gray-950: hsl(0, 0%, 7%);
  --bold: 800;
  --normal: 500;
}

/* Media Queries */
@media (min-width: 576px) {
  .button,
  .publish-date,
  .name {
    font-size: 14px;
  }
  .title {
    font-size: 24px;
  }
  .description {
    font-size: 16px;
  }
}

Continued development

In future projects, I plan to continue leveraging CSS variables for theme management and consistency across designs. Additionally, I will focus on refining my use of media queries to ensure optimal responsiveness on a variety of devices.

Useful resources

• CSS Tricks - This site has been invaluable for understanding and implementing CSS custom properties and media queries.
• MDN Web Docs - A comprehensive resource for all things web development, including detailed documentation on CSS variables and media queries.

Author

I'm Joel Magene. My profile here:

• Frontend Mentor - @Jomagene
• Twitter - @Jomagene

Acknowledgments

Thanks to Frontend Mentor for providing such an excellent platform for honing web development skills. Also, a shoutout to the community for their constant support and feedback.