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: Solution Link
• Live Site URL: 3 column preview card component

My process

Built with

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

What I learned

I learnt how to make a web page responsive, adjustable screen sizes for mobile and desktop screens. i learnt how to do this using CSS media query. An example is shown below

First the design for mobile:

.container {
    max-width: 325px;
    margin-top: 50px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

Then the desktop design:

@media (min-width: 786px) {
    .container {
        max-width: 800px;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

Continued development

My focus now will be on CSS grid layout and bootstrap.

Useful resources

• Pointer Cursor - This helped me for changing the mouse cursor to a pointer for a hover effect.
• Responsive Web Design - This is an amazing article which helped me finally understand Responsive Web design and Media queries. I'd recommend it to anyone still learning this concept.

Author

• Frontend Mentor - @ABQ4539