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: 3 column preview card component

• Live Site URL: card-preview-component.matiaslagoevia.com

My process

Built with

• Semantic HTML5 markup
• Flexbox
• Mobile-first workflow

What I learned

• Flex approach to center main content and footer helped on this too
• Flex items' images have align-self: start implicitly, stretching them
• Font-sizes in rem, everything else (padding, margins, etc) in em
• Styling buttons with :hover pseudoclass
• Controlling flex containers' direction & wrap with flex-flow
• Specifying max-width alongside width for containers to prevent them growing too much
• Using margin: 0 auto to center content horizontally
• VSCode "wrap with component" snippet helped me be more productive

Continued development

I'm happy I'm continue to explore flexbox and it's usage, and look forward to doing so. Also, the ability to visually determine how I want to split up the HTML markup and apply styles, differentiating between margin/padding/etc., and continuing to grow my experience in this.

Useful resources

• Conquering Responsive Layouts - Helping me understand how to create responsive layouts as simply as possible
• MDN — flex-flow - Helped me understand and visualize the concepts of flex-direction alongside flex-wrap

Author

• Website - Matias Lago Evia
• Frontend Mentor - @matiaslagoevia