Responsive E-commerce landing page built with vanilla js

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks really great, site is responsive and the mobile state looks really great as well.

  Some suggestions would be:

  • It would be great to have this markup as the direct child of the body tag:

  <header />
  <main />
  <footer />
  

  This way, all content of your page will be inside their own respective landmark element.

  • I also saw the there are separate markup for the mobile state and desktop for the navbar? It would be really great to only use 1 and make it work for mobile and desktop. You would just need to adjust those in the @media to look like mobile or desktop layout. This way, you won't need to create extra html element.
  • Include the website-logo inside the nav since you are treating it as a link that directs user to the homepage.
  • Also, you don't need h1 to wrap the website-logo, a div would be fine.
  • Website-logo-link a tag should have either aria-label attribute or sr-only text inside, that describes where the link would take the user. Usually, website-logo directs user to homepage so use homepage as the value like `aria-label="homepage".
  • Remember that a website-logo is one of the meaningful images on a site so use proper alt for it. Use the website's name as the value like alt="sneakers".
  • When using img tag, you don't need to add words that relates to "graphic" such as "logo" and others, since img is already an image so no need to describe it as one.
  • The cart should have use the same method , the aria-label or sr-only text. This time, describe what the button should do. It could be aria-label="shopping cart dropdown".
  • The svg inside the cart is only decorative image, so hide for screen-reader users using aria-hidden="true".
  • The cart-button should also have a default of aria-expanded="false" attribute. This will be set to true if the user toggles it and vice-versa.
  • Also the cart-dropdown should be next to the button on the markup. Right now, it is placed way beyond the cart-button, hence when you , for example toggles the cart using keyboard, using tab again does not direct to the cart-dropdown, it instead goes to the person profile because the markup placement is wrong.
  • The sneaker-image should not be a link a since it does not directs a user to another page. Instead, use button on it with a proper aria-label or sr-only text on what the button does.
  • I also usage of !important in the css, we normally avoid this because it makes it hard to overwrite properties.
  • Also, on the image again of the sneaker, use only 1 button for it. Then just change the img inside it or change its background-image. Do not use multiple trigger elements on it.
  • Those 4 selections of image should be using like button or a set of radio-buttons. Remember that interactive components needs to use interactive elements. Using div or img as a toggle makes the component not accessible.
  • When wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like div, span to wrap the text.
  • Avoid using id to target and style an element since it is a bad practice due to css specificity.
  • Same with the minus and add button, use a labelling method for it. The svg inside it should be hidden as well, use the method I mentioned above.
  • svg inside the add-to-cart should be hidden as well.

  Also there's a bug. After pressing the add-to-cart. I can't pressed it again but when using the plus on the button it adds another item on the cart which should not be. Only when pressing add-to-cart should add an item right. You don't want user to be surprised why are there lots of order that they didn't "add to cart".

  • The cart delete-item button should also use labelling.
  • For this one, I would add element/elements that uses aria-live to announce that something has been made. You can look up for aria-live to know what I mean:>

  MOBILE

  • Hamburger button should also use labelling. It should use like navigation dropdown menu.
  • Hamburger button should have a default as well of aria-expanded="false" which is set to true if it has been toggled.
  • The img inside the hamburger-menu should have been hidden since it is only a decorative image.
  • Again, the placement for the hamburger-menu and the dropdown is incorrect. The dropdown should be placed after the hamburger menu.

  If you have any queries, just let me know okay. Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Samuel Oyebade•375

  @SamsegunPosted about 3 years ago

  @pikamart wow... thanks pal. This is really helpful!

  1