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: https://github.com/madhura-punde/3-Column-Preview-Card-Component/blob/main/index.html https://github.com/madhura-punde/3-Column-Preview-Card-Component/blob/main/styles2.css

• Live Site URL: https://madhura-punde.github.io/3-Column-Preview-Card-Component/

My process

Built with

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

What I learned

This project has given brief hands-on on CSS Box Model parameters majorly margin, padding and other display, font properties. I have developed this project in 2 ways

1. Refer styles.css -- without CSS Flexbox.
2. Refer styles2.css -- with CSS Flexbox.

An implementation done using flex, is completely responsiveness.

Continued development

Flexbox are of great use one dimensional patterns. CSS grid can also be used instead of Flexbox.

Useful resources

• https://www.w3schools.com/css/css_boxmodel.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox

Author

• Website - [Madhura Punde] https://github.com/madhura-punde