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: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Import/Export (javascript S6)
In the project I learned the use of type modules in javascript, Because with it I can separate functions bys modules, making project maintenance easier!
Bellow is an example:
<body>
<script type="module" src="./assets/js/script.js"></script>
</body>
export function initMenuMobile(){
....
}
import {initMenuMobile} from "./modules/menuMobile.js";
initMenuMobile();
- Frontend Mentor - @Wan0805
- Instagram - @wanderson.duartee
I wnat to thank God for giving me wisdom and in the moments I struggled(lol) he gave me solace in my heart and mind to calm down and tink about how to finish the project!
I'm very happy with my commitment, it may seem simples to some people but for me it's the feeling that I gave my best!