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

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

Overview

A three(3) column preview card component, built mainly with Flexbox, and other CSS tools.

The challenge

The Challenge was to build the 3 column preview card component provided in the desig folders Users will be able to:

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

Screenshot

Links

• Solution URL: MY SOLUTION

My process

My process started with the implementation of HTML5 semantic markups in the HTML document, after that every other thing that followed was the CSS styling and design. The CSS styling and design stated with resetting, using the universal selector(*) to remove the natural margins and paddings that the HTML markup provides. Colors, margins, padding, fonts were then used to design the cards. Media Queries was also used to design the desktop view.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

This Challenge allowed me to practice more on CSS Flexbox, It also reminded me of the importance of using percentages(%) for your widths when building a responsive container for your website, landing pages, etc.

Useful resources

• Resource 1 - This Youtuber helped me uderstand CSS Flexbox. I really enjoyed the short tutorial and will use it going forward.

Author

• Frontend Mentor - @modade97
• Twitter - @modadegospel