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
• Style Guide
• Author
• Acknowledgments

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

Links

• Live Site URL: Live Demo

My Process

Built With

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Montserrat - Font used for headings and buttons
• Fraunces - Font used for product name and price

What I Learned

Working on this project, I enhanced my skills in:

• Using CSS Flexbox to create a responsive layout that adjusts to different screen sizes.
• Managing font styles and incorporating custom fonts into a project.
• Ensuring accessibility by adding meaningful aria-labels to interactive elements.

Continued Development

In future projects, I plan to focus on:

• Improving my knowledge of advanced CSS techniques, such as animations and transitions.
• Exploring more about responsive design and media queries to handle various screen sizes and orientations.
• Enhancing my JavaScript skills to add interactivity and dynamic behavior to my components.

Useful Resources

• CSS Tricks Flexbox Guide - A comprehensive guide to Flexbox.
• MDN Web Docs - A valuable resource for HTML, CSS, and JavaScript documentation.
• Google Fonts - For selecting and integrating web fonts.

Style Guide

For style guidelines, check out my Style Guide.

Author

• Frontend Mentor - @Yashi-Singh-9
• LinkedIn - @Yashi-Singh

Acknowledgments

Thank you to the Frontend Mentor community for the challenge and the inspiration. Special thanks to @frontendmentor for creating such valuable resources to improve web development skills.