Frontend Mentor - 3-column preview card component solution

This is a solution to the 3-column preview card component 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

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

Links

• Solution URL: Hosted By Github Pages

My process

Built with

• HTML
• CSS
• Flexbox

What I learned

For this challenge I focussed on the follow: 1) More Efficient css styling - I focussed on reducing the number of css classes that I usually use. I often have a habit of having many redundant classes in order to achieve the specified design specifications. One example of this was using the "inherit" value for the border radius of the individual cards (as seen in the css snippet below).

2) Flexbox - I used flexbox to achieve the main layout of the design switching from flex direction row to column where necessary.

3) Mobile/Tablet Styling - I got some practice utilizing media queries to implement a responsive design.

To see how you can add code snippets, see below:

.card-container {
    display: flex;    
    justify-content: flex-start;
    flex-direction: row;   
    flex-wrap: wrap;     
    margin-left: auto;
    margin-right: auto;    
    padding: 200px 0 200px 0;
    border-radius: 10px;
    min-height: 480px;
    max-width: 870px;
}

.card-sedans {
    background-color: hsl(31, 77%, 52%);
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}

Continued development

I still plan on learning how to use CSS Grid but found I was able to complete this design with techniques that I was already familiar with.

Useful resources

• Font Face Assistance resource - This helped me to import and link multiple ttf files from the same font family
• Flexbox Assistance - This was a useful flexbox reference guide.

Author

• Website - Rashid Wilson
• Frontend Mentor - @shangum