Skip to content
Submitted about 2 months ago

E-commerce_product_page_HTML_SCSS_BEM_TYPESCRIPT

#accessibility#bem#sass/scss#typescript
P
Julien Gilbert•500
@juliengDev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...E-commerce product page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Key Project Points

  • Robust Vanilla TypeScript Architecture with Vite
  • Interactive Product Gallery with Lightbox and Thumbnails
  • Dynamic Cart with Toast Notifications
  • Responsive Navigation with a Mobile Burger Menu
  • Intuitive User Interface with Hover States
What challenges did you encounter, and how did you overcome them? Challenges in Lightbox and Slider Development

Developing the lightbox and slider, along with the dynamic visual effects on thumbnails, was particularly complex. Every component was built entirely in pure Vanilla TypeScript, without relying on any framework.

In addition to handling smooth transitions and interactions, a strong emphasis was placed on accessibility, ensuring that the UI remains usable for all users.

That being said, there is always room for improvement, and the code is likely not yet perfect. Further refinements and optimizations could enhance both performance and maintainability.

What specific areas of your project would you like help with?

Every constructive comment on the approach used in the solution is welcome.

Community feedback

  • Andrey•2,570
    @dar-juPosted about 2 months ago

    Hi Gilbert!

    Great professional work! I like how the logic works, also that you used several tools in this task. The layout corresponds to the layout as much as possible.

    I want to draw your attention to several points:

    • look at the screen resolution of about 1024 pixels, for the menu you need to add paddings on the sides, like the main block
    • screen resolution 910, the input overlaps the images
    • screen resolution 780, the button overlaps the images
    • screen resolution 760 and below, the content needs to be centered and possibly made wider
    • image navigation with arrows is better added only on the mobile version
    • there is no way to enter the quantity of goods from the keyboard, why are you using span instead of input?
    • it is not recommended to use the same alt for different images, on this page all images are content, except for the shopping cart icon
    • this page has only one heading and one paragraph, for the rest of the text fields (price, discount, company) it is better to use span
    • the page looks better if hovers are used (menu, button, shopping cart), besides, they are in the brief
    • if you add images, the layout breaks, you need to set the size of the images and add flex-wrap: wrap for .slider__thumbnails, the layout must be stable

    Otherwise everything is great, good luck with the development!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord