Skip to content

hitmorecode/product_preview_card_component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontend Mentor - Product preview card component solution

This is a solution to the Product 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

Users should be able to:

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

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox

What I learned

For this one I follow the suggestion of someone in the community and did a mobile first approach. It was fun doing it like this, normally I start with desktop first as I feel more comfortable doing this way. So this was different from my normally approach (getting out of my comfort zone). I will force myself to continue to do this way from now on. Trying to kill bad habits :-)

Useful resources

  • CSS-Tricks - This is an amazing article which helped me getting started with flexbox. I'd recommend it to anyone still learning this concept.

  • Colt Steele - Flexbox tutorial - This video helped me understand flexbox. If you are struggling with flexbox like I did, I recommend this video.

  • codeSTACKr - Learn CSS Grid in 20 Minutes - This is a great video tutorial on how CSS grid works and how to use it.

  • Wes Bos - CSS Grid Course - This is a series of CSS grid tutorials. It's devided in 25 parts. For those who really want to learn CSS grid, I recommend these series.

Author

About

Frontend Mentor Challenge

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published