This is a solution to the E-commerce product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Open a lightbox gallery by clicking on the large product image
- Switch the large product image by clicking on the small thumbnail images
- Add items to the cart
- View the cart and remove items from it
- Solution URL: [https://github.com/aszxqaz/frontend-mentor-e-commerce-product-page/]
- Live Site URL: [https://frontend-mentor-e-commerce-product-page-tau.vercel.app/]
- Vanilla JavaScript
- SCSS
- Flexbox
- Mobile-first workflow
While working through this project, I learned basics of using Flexbox layout and media queries. For example:
@media (min-width: $first-breakpoint) {
display: flex;
flex-direction: column;
align-items: center;
padding-top: $mobile-padding;
}
I am a new frontend developer and this is is my first project. In future I want to continue getting new experience in JavaScript and CSS by making new Frontend Mentor challenges.
- [https://stackoverflow.com/] - This helped me to find answers to almost all of the questions arised during the development.
- [https://css-tricks.com/] - This is an amazing resource to find out CSS best practices.
- [https://www.w3schools.com/] - Another great resource to look up the information about using CSS and also JavaScript.
- Frontend Mentor - [@aszxqaz] (https://www.frontendmentor.io/profile/aszxqaz)
- GitHub - @aszxqaz