Frontend Mentor - Product Preview Card Component Solution.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Acknowledgments
• Feedbacks

Overview

This is a solution to the Product Preview Card Component challenge on Frontend Mentor. The challenge was to build out a product preview card and get it looking as close to the design as possible.

The challenge

Users should be able to:

View the optimal layout for the component depending on their device's screen size.

See a hover state on the "Add to Cart" button.

Screenshot:

Links

• Solution URL: https://github.com/Tetris7/product-preview-card-component-main.git
• Live Site URL: https://Tetris7.github.io/product-preview-card-component-main/

---

My process

Built with

Semantic HTML5 markup: Using appropriate tags to create a logical and accessible structure.

CSS custom properties: For a more manageable and reusable stylesheet.

Flexbox: For creating a flexible and responsive layout.

CSS Grid: Could be used for specific layout needs, especially for the main card structure.

Mobile-first workflow: Designing and styling for smaller screens first, then progressively enhancing the layout for larger screens.

What I learned

This project was a great opportunity to practice foundational front-end skills. I focused on:

Responsive design: Making sure the card adapts gracefully to different screen sizes. I learned how to use CSS media queries effectively to change the layout between mobile and desktop views.

Styling with Flexbox: Reinforcing my understanding of Flexbox properties like flex-direction, align-items, and justify-content to center and align elements.

CSS Box Model: Solidifying my knowledge of margin, padding, and border to control spacing and layout.

Useful resources

Frontend Mentor: This platform is amazing for practicing real-world front-end development challenges.

MDN Web Docs: An invaluable resource for looking up HTML, CSS, and JavaScript documentation.

Author

GitHub: @Tetris7

Frontend Mentor: @Tetris7

Acknowledgments

A big thank you to the Frontend Mentor community for the great challenge and helpful feedback. It's a fantastic way to improve my coding skills.

Feedbacks

I'm always looking to improve! If you have any feedback on my code, the project structure, or anything else, please feel free to open an issue or leave a comment. Your insights are greatly appreciated.