Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yashi-singh-1/product-preview-card-component
This project showcases a responsive product preview card component. It adapts seamlessly to various screen sizes and provides an intuitive user experience.
https://github.com/yashi-singh-1/product-preview-card-component
css css3 front-end front-end-mentor-challenge frontend frontend-mentor frontend-mentor-challenge frontendmentor html html-css html5 htmlcss prodcut-preview-card product-card product-preview responsivedesign resposive-design web-design webdesign
Last synced: about 2 months ago
JSON representation
This project showcases a responsive product preview card component. It adapts seamlessly to various screen sizes and provides an intuitive user experience.
- Host: GitHub
- URL: https://github.com/yashi-singh-1/product-preview-card-component
- Owner: Yashi-Singh-1
- Created: 2024-08-05T16:59:31.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-08-06T04:54:41.000Z (7 months ago)
- Last Synced: 2024-11-10T11:14:18.949Z (3 months ago)
- Topics: css, css3, front-end, front-end-mentor-challenge, frontend, frontend-mentor, frontend-mentor-challenge, frontendmentor, html, html-css, html5, htmlcss, prodcut-preview-card, product-card, product-preview, responsivedesign, resposive-design, web-design, webdesign
- Language: CSS
- Homepage:
- Size: 1.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Product Preview Card Component Solution
This is a solution to the [Product Preview Card Component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The Challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My Process](#my-process)
- [Built With](#built-with)
- [What I Learned](#what-i-learned)
- [Continued Development](#continued-development)
- [Useful Resources](#useful-resources)
- [Style Guide](#style-guide)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The Challenge
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
### Screenshot
### Links
- Live Site URL: [Live Demo](https://product-preview-card-compnent.netlify.app/)
## My Process
### Built With
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- [Montserrat](https://fonts.google.com/specimen/Montserrat) - Font used for headings and buttons
- [Fraunces](https://fonts.google.com/specimen/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.
- Implementing CSS Grid for complex layouts and aligning items.
- Managing font styles and incorporating custom fonts into a project.
- Ensuring accessibility by adding meaningful aria-labels to interactive elements.
Here's an example of CSS I’m particularly proud of:
```css
button {
background-color: var(--dark-cyan);
color: var(--white);
border: none;
border-radius: 10px;
padding: 15px 60px;
font-size: 1em;
font-family: 'Montserrat', sans-serif;
display: flex;
align-items: center;
gap: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
font-weight: 700;
top: 105px;
position: relative;
}
```
### 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](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - A comprehensive guide to Flexbox.
- [MDN Web Docs](https://developer.mozilla.org/en-US/) - A valuable resource for HTML, CSS, and JavaScript documentation.
- [Google Fonts](https://fonts.google.com/) - For selecting and integrating web fonts.
## Style Guide
For style guidelines, check out my [Style Guide](Style-Guide.md).
## Author
- Frontend Mentor - [@Yashi-Singh-1](https://www.frontendmentor.io/profile/Yashi-Singh-1)
- LinkedIn - [@Yashi-Singh](www.linkedin.com/in/yashi-singh-b4143a246)
## Acknowledgments
Thank you to the Frontend Mentor community for the challenge and the inspiration. Special thanks to [@frontendmentor](https://www.frontendmentor.io/) for creating such valuable resources to improve web development skills.