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 developers improve their coding skills by building realistic projects.

---

Table of Contents

• Overview
  • The Challenge
  • Screenshots
  • Links
• Installation and Running
• My Process
  • Built With
  • What I Learned
  • Continued Development
  • Useful Resources
• Author
• Acknowledgments

---

Overview

The Challenge

Users should be able to:

• View an optimized layout based on their device's screen size.
• See hover and focus states for all interactive elements.

Screenshots

Desktop Version

Mobile Version

---

Links

• Live Site URL: Live Demo

---

Installation and Running

To view and run this project locally, follow the steps below:

Prerequisites

Make sure you have the following installed on your system:

1. Node.js and npm (for SCSS compilation, optional if you're modifying the styles)
2. A code editor like VS Code.
3. A browser to view the project.

---

Steps

1. Clone the Repository:

   git clone https://github.com/Yashi-Singh-9/Product-Preview-Card-Component.git

2. Navigate into the Project Directory:

   cd Product-Preview-Card-Component

3. Install Dependencies (Optional for SCSS Compilation):

   If you need to modify or recompile SCSS, install the required dependencies. Run:

   npm install

   Ensure you have node-sass installed globally or locally to compile SCSS to CSS.

4. Compile SCSS (Optional):

   If you make changes to the SCSS file, run:

   npm run scss

   This will compile the styles.scss file into styles.css.

5. Run the Project:

   Open the index.html file in your browser directly or use a live server extension in VS Code:

   npx live-server

---

My Process

Built With

• Semantic HTML5
• SCSS for styling
• Bootstrap 5 for layout and responsive design
• CSS Flexbox for alignment
• Mobile-first workflow
• Google Fonts:
  • Montserrat for headings and buttons
  • Fraunces for product name and price

---

What I Learned

Working on this project helped solidify my understanding of:

1. Responsive Design:

   • Leveraging Bootstrap's grid system and utility classes for responsiveness.
   • Using the picture element to serve different images for desktop and mobile views.

2. SCSS:

   • Organized styling using variables for colors, reusable components, and media queries.
   • Efficient handling of hover effects and transitions.

3. Accessibility:

   • Adding meaningful alt text to images and aria-labels to interactive elements for better accessibility.

---

Continued Development

In future projects, I aim to focus on:

• Mastering CSS Grid and advanced SCSS techniques.
• Incorporating JavaScript for interactivity (e.g., animations, user feedback).
• Exploring more advanced Bootstrap 5 components for faster development.

---

Useful Resources

• MDN Web Docs - Comprehensive resource for HTML, CSS, and JavaScript.
• CSS-Tricks Guide to Flexbox - Helpful for building responsive layouts.
• Bootstrap Documentation - Bootstrap components and utilities.

---

Author

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

---

Acknowledgments

Special thanks to Frontend Mentor for providing engaging and meaningful challenges. Also, thanks to the developer community for their helpful resources and inspiration!