saheedatt/product_preview_card

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
  • Useful resources
• Author

Overview

The challenge

The challenge was was to create a product preview card component with specific requirements.Users should be able to view the optimal layout based on their device's screen size(Desktop and Mobile screen)

Screenshot

Links

• Solution URL: Solution URL
• Live Site URL: Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

In this project, I practiced using flexbox for layout and styling components. I also improved my skills in responsive web design and using media queries to adapt the design for different screen sizes.

Continued development

In future projects, I plan to further enhance my CSS skills, explore more advanced CSS techniques, and dive deeper into JavaScript to add interactivity and dynamic functionality to my projects.

Useful resources

• MDN Web Docs - This helped me when I got stuct trying to figuure out how to some flexbox properties properly. It is written in a way that is easy to understand.You'll probably like it too.

Author

• Name: Afolabi Saheedat
• Frontend Mentor - @Saheedatt