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
  • Links
  • My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

build out this 3-column preview card component and get it looking as close to the design as possible.

The challenge

Users should be able to:

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

Links

• Solution URL: Solution
• Live Site URL: N/A

My process

Started with the basic layout of the HTML webpage, creating my divs and classes for the elements on the page I planned to manipulate. I then went to my style sheet and tweaked according to the picture specifications.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.

Through this small project I learned the basics of using CSS Flexbox while also reinforcing other CSS principles. At this moment I only have the free version of Frontend Mentor so I feel like there are some design aspects I may have left out but I am proud of the work I made. Learning when to use certain flexbox properties was my main priority for this project.

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

Some CSS snippets I enjoyed learning were

• flex-direction
• justify-content

Continued development

I've been independently studying semantic HTML and CSS on my own for awhile, I have a huge interest in frontend webdevelopment and design, I'm planning on after this assignment attempting to use grid to make the same assignment and then hopefully starting a project that have opportunities to use both CSS Grid and CSS Flexbox in one.

Note: Delete this note and the content within this section and replace with your own plans for continued development.

Useful resources

• CSS Tricks - This website was extremely helpful in helping me when I would forget or not understand what certain CSS Flexbox properties would do.
• W3Schools - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.

Author

• Website - Jason Nham
• Frontend Mentor - @JasonNham
• Twitter - @JasonNham

Acknowledgments

I'd like to thank my family for helping me and supporting me through my studies.