Loopstudios Landingpage using HTML CSS JS

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, awesome work on this one. Desktop layout looks really great, though you have missed the dark-overlay in the hero-section, adding that would be really great so that the navlinks color will pop out more since it is complementing the white color. Site is responsive, but in some sizes like at 600px, scroll down on the collections and you will see that the see all link is overlapping the heading text on its left side. Each of the collection card as well is squished, it would be awesome to create a responsive layout in the collections card so that they won't appear like that. Mobile state looks great though, but you only changed the hero-section image at point 375px which is too small for other phones since lots have higher width than that. Toning the breakpoint up would be great.

  Some other suggestions on the site would be:

  • It would be great to have this markup:

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

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

  • 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="loopstudios".
  • Avoid using id to target and style an element since it is a bad practice due to css specificity. Instead, just use class to target element.
  • The hero-text should be using a h1 since it looks like the primary heading on this layout. Using h1 would be really great.
  • When making a text uppercase, do not directly type the word in the markup capitalized. Doing this results screen-reader reading the text letter-by-letter and not by word. Instead just use regular lowercase text and just use text-transform: uppercase on it on the css.
  • Also, do not just use span to wrap a text, use other meaningful tags on it.
  • I would use a descriptive alt on the vr-guy though since the text in that section describes the person as well.
  • The bold text in the vr-guy section should be a heading tag. Use h2 on it.
  • our creations should be a heading tag like an h2. Remember that heading tags are important in a site since it gives an information on what each section that they belong contains. For examples, making the our creations a heading tag, it gives information that the section will contain the website's creation, hence those 8 collections.
  • For each collection, it would be great to use a figure tag on this one since those collection title names are the figcaption for each of the img.
  • Also, it would be much better if you didn't use the a tag as the container for the whole collection item. It would be much better if you would do something like:

  <figure>
    <img src="" alt="">
    <figcaption>
      <a href=""{title in here}></a>
    </figcaption>
  </figure>
  

  The figure will be using position: relative and the a tags pseudo-selector maybe the ::before will be position: absolute and will use height: 100% and width: 100% so that the whole creation item will be clickable and this will be a more valid markup.

  FOOTER

  • Don't use the nav to wrap the whole content. nav tag is used for links that are your websites' primary links or navigational links. Because by wrapping the whole content of the footer by nav those social media links will be included as well and as you can see, those aren't navigational links, they are external links. Use div in-place of the current nav and use nav only to wrap the 5 links below the footer-logo.
  • The website-logo-link should be using the approach that I mentioned earlier. Look it up:>
  • 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".

  FOOTER

  • Hamburger menu should be using a button since it is an interactive component.

  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"
  • The img inside the hamburger-menu should have been hidden since it is only a decorative image.
  • Your placement of the hamburger and the dropdown is incorrect. The hamburger should be placed "before" the dropdown so that, after toggling it, the focus will be next to the dropdown. Swap them up or place the toggle before it.
  • Lastly, the dropdown is being hidden only visually but still being picked up by screen-reader since you are not hiding it properly. On the hidden state of the dropdown, add a visibility: hidden on it and when the button is toggled, use a visibility: visiblity on the dropdown. This way content will be hidden and shown properly if needed.

  Aside from those, great job again on this one.

  01

  Marked as helpful