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

Overview

The challenge

Users should be able to:

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

Screenshot

Given Desktop	Given Mobile

---

Desktop	Mobile

Links

• Solution URL: Responsive product preview card with sass, smacss and flexbox
• Live Site URL: Hosted on Github Pages

My process

I went with a desktop-first approach, as this was my first time working with responsiveness. After drawing on paper the box models to see how to structure the HTML, I moved onto contructing piece by piece the SMACSS. The first design was made using floats, later on changed to flex for learning purposes.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• SCSS/Sass
• Desktop-first workflow
• SMACSS Methodology

What I learned

• How sass files are put together and how to pick and change their post-process css styles
• How to approach building a website from a given design
• How to leverage on containers backgrounds to change images depending on the viewport

Continued development

• Learning how to better scale fonts and maintain the designs across different screen-ratios.

Author

• Frontend Mentor - @Mochitto
• Twitter - @mochideveloper