Responsive LandingPage using: Sass, PugJS, Vanilla Js, Bem

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, great work on this one. Desktop layout looks fine but the hero-section on my end, the hero-image is like bit shorter like on the design. I am using a 1366x768 monitor and the second section's text are like pushed down and not aligned properly on the vr-guy image. For the responsiveness, currently it doesn't respond well. If you go to like 820px upwards, you will see that contents are being hidden and creating horizontal scroll, the collection cards as well are squashed. The mobile state however looks great.

  Some suggestion on the site would be:

  • There is no hero tag. For this one, remove the hero tag and just use header. But looking at this one, you are including the hero-section inside the header tag which should not be. The primary header typically contains the topmost part of the site, including the site-logo, the navlinks and other controls but not the hero, because you want the header to be reusable to other pages of the site and if you include the hero-section on that one, then you won't be able to put it because you don't want the hero-section to appear for every pages right. Include the hero-section inside the main tag.
  • 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="loopstudios".
  • Change the usage of vmin unit to using rem unit so that it will stay consistent for other users. Using vh, vw, vmin, vmax is not consistent because they are relative to the screen size of the user. Meaning user will get different layout compared to others.
  • I would use img tag for the vr-guy image since the text on its right side is complimenting the image and making it contentful.
  • Just to iterate since I am using dev tools at the bottom to review the site, there are lots of usage of the vmin unit in here. Every component gets shorter.
  • For each of the collection card, you could use figure on this one since their name is complimenting each images, hence using figcaption on it would be great. Also if you look at this section, each of the card acts as a link because there is an interaction with it since it has :hover state. They act like as link for user to view them individually, so adding an a tag in there would be really nice.

  FOOTER

  • Same with the company logo, use a more proper alt value.
  • You could use nav as well on the 5 links below the site-logo since they are still your website's navigational links. Just remember to add an aria-label="footer" on the nav tag so that it will be distinct.
  • Those social-media links could be inside a ul element since those are "list" of links.
  • Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.
  • Social-media image should be hidden since it is only a decorative image so use alt="" and aria-hidden="true".

  MOBILE

  • Hamburger menu should be using a button since it is an interactive component. Remember that when creating interactive components, always make use of interactive elements. If you use div, then you are excluding lots of users because mouse is the only one that can interact with it and no other peripherals can.

  SUPPOSING BUTTON IS USED

  • The hamburger button should have a default attribute of aria-expanded="false" and it will be set to true when the users toggles it and vice-versa.
  • The hamburger button should have either aria-label attribute or sr-only text inside it which defines what the button does. You could use aria-label="navigation dropdown menu"
  • Lastly,. the placement of your dropdown and the toggle is wrong. The dropdown should be placed after the toggle in your html so that when a user toggles the button, the next focus will be set to the dropdown if they use like tab key on the keyboard. Swap them up.

  Aside from those, great job again on this one.

  0

  ---

  

  Darwin Sánchez•380

  @darwinsanchez9018Posted almost 3 years ago

  @pikapikamart Thank you very much, it has been a great help.

  But, I did the design only for two screens as the challenge says.

  About the Hero, I did not know and I am happy for your help. The VR-Guy thing and the cards, there are no problems when they grow up, you are wrong, vmin is very useful, not only rem is used. Links to the true cards must go in a link. I did not know about the mobile menu, thanks for the information. And the Aria Label did not know either. I'm doing my first JR projects and practices, I still don't know everything, like you; be more understanding. Anyway thanks

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  @darwinsanchez9018 Hey, glad that you found my review useful:>

  For the images of the vr-guy and the other cards, try using dev tools at the bottom of your site, you will see that the images shrink whenever the dev tools height is changed. vmin is not consistent because if a user has different screen-size in terms of height, they will get different layout compared to others. Using rem will be consistent because even if a user has small screen-size, they will get the same layout like everyone.

  1