Frontend Mentor - 3-Column Preview Card Component Solution

This is a solution to the 3-column preview card component challenge on Frontend Mentor.

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: https://www.frontendmentor.io/solutions/css-custom-properties-css-flexbox-css-grid-xOljzZQUJ
• Live Site URL: https://kens-visuals.github.io/3-column/

My process

Built with

• Semantic HTML5 markup
• SCSS variables
• CSS Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I experimented with CSS Grid where my goal was to make the project fully responsive using media queries as little as possible

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

<div class="col">
  <div class="col--1">
    <h1 class="col__heading">Sedans</h1>
    <p class="col__text">Choose a sedan for its affordability...</p>
    <a class="btn orange">Learn more</a>
  </div>
</div>

.col {
  /* ... */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  /* ... */
}

Continued development

Planning on using more CSS Grid and Flexbox, to improve the overall workflow and maintainability of the code. Also considering on researching about media queries and responsive web development

Useful resources

• stackedit.io - This website helped me to write my markdown files faster and easier, highly recommended.

• Flexbox Cheat Sheet and Grid Cheat Sheet - These two amazing websites can be very useful for beginners to improve their skills in CSS flexbox and grid.

Author

• Frontend Mentor - @kens-visuals
• Codewars - @kens_visuals
• CodePen - @kens-visuals