Skip to content
Submitted 5 months ago

E-commerce_product_page_HTML_SCSS_BEM_TYPESCRIPT

accessibility, bem, sass/scss, typescript
P
Julien Gilbert•500
@juliengDev
A solution to the E-commerce product page challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Andrey•4,480
    @dar-ju

    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

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