Skip to content
Submitted almost 2 years ago

E-commerce product page

Beshoy S.•460
@BeshoyS
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

Hi Guys, in this challenge, I used Sass and BEM approach, which I am not really a fan of, but it confused me a lot. I didn't finish all the functionalities like lightbox and delete the product from the cart.

I appreciate your support and feedback so I can improve my skills in JS, DOM, and Sass.

have a nice day to you all.

Community feedback

  • Adriano•38,120
    @AdrianoEscarabotePosted almost 2 years ago

    Hi Beshoy S., how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

    Images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.

    I noticed that in higher resolutions the content is growing a lot, and it is harming the design of the page, to improve this we can do the following:

    @media screen and (min-width: 56.25em)
body {
    max-width: 1440px;
    margin: 0 auto;
}

    The rest is great!

    I hope it helps... 👍

    1
    Beshoy S.•460
    @BeshoySPosted almost 2 years ago

    @AdrianoEscarabote Thank you for these tips.

    1
    Adriano•38,120
    @AdrianoEscarabotePosted almost 2 years ago

    @BeshoyS happy coding!!

    1

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