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

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

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

Screenshot

This is the desktop view.

This is the mobile view.

This is a view of the blog title when one hovers over it.

Links

• Solution URL: https://www.frontendmentor.io/solutions/blog-card-challenge-using-htmlcss-nOd_7Q1Owu
• Live Site URL: https://kofi100.github.io/Blog-Card-Challenge-HTML/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

What I learned

I revised on what I leant about BEM ,grid and flexbox in order to make this card. I also learnt on how to use Figma to design the website as close to the design as possible.

I'm especially proud of how I used BEM naming convection to write the code below and also proud of how the

website can dynamically changed without using media-queries.

.card{
    width: max-content;
    max-width:24rem ;
}
.card--bgClrWhite{
    background-color: var(--White);
}
.card--border{
    border: thin solid black;
    
}
.card--borderRadius_20px{
    border-radius: 1.25rem;
}
.card--borderRadius_10px{
    border-radius: .625rem;
}
.card--padding24px{
    padding: 1.5rem;
}
.card--shadow{
    box-shadow: .5rem .5rem black;
}
.card--colorGray500{
    color: var(--Gray500);
}
.card__topImg{
    width: 100%;
}

Continued development

I think I'm going to improve my knwoledge and use of BEM,Grid and Flexbox in order to create responsive webpages and use Figma more often.

Author

• Website - Kofi K
• Frontend Mentor - @Kofi100