loopstudios landing page using react

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, awesome work on this one. Layout in desktop seems fine, the responsiveness could be better since right now, slowly changing the screens-width, some text are overflowing, the collections-card are not being wrapped in another row they are just getting squished until mobile breakpoint is reached. Mobile layout looks fine. But a major issue is, I suspect there are usage of vh units in height on this one. inspect your layout in devtool at the bottom, you will see that the layout is getting destroyed.

  Some suggestions would be:

  • Avoid using height: 100vh on a large container like the body tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • A typical layout of a site looks like:

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

  This way, all element that has content are inside their respective landmark elements.

  • Website-logo img should be using the website's name as the alt like alt="loopstudios". Remember that a website's logo is meaningful so always make sure it uses the proper alt value.
  • Those 5 items should be a link since they are your website's navigational links. A proper markup for those is:

  <nav aria-label="primary">
   <ul>
    list of links in here
   </ul>
  </nav>
  

  • To be honest, there are lots of % unit in height on this one. As soon as I removed the height: 100vh the layout just got destroyed when viewing in dev tools at bottom.
  • This text IMMERSIVE EXPERIENCES THAT DELIVER should be a single h1 with a max-width so that the text will wrap on their own and not using div and p tag.
  • Second img could use a better alt since vrguy is what? You could describe it properly like a man using vr something like that.
  • The bold text on the image's right side should be a heading tag.
  • OUR CREATIONS should be a heading tag since it describes what the section will contain, hence the website's creations.
  • see all should be a link since on a real site, those would be a link that a user can go to "see all" creations.
  • Each of those creation card should have an a tag sitting inside it, since each card will be a link for a user to view.
  • You could have used as well a ul on those since those are "list" of creations. Using a figure on those since every creation card text are the figcaption which can use a a tag inside it. Have a look at my solution on this one see if you can get some markup ideas on this.

  FOOTER

  • When using img tag, don't forget to include the alt attribute, even if the value of it is empty or not. If you don't include this, screen-reader will read the source path of the img which you don't want. So always include it.
  • Same for the website-logo it should use the website name as the alt value.
  • Your placement are wrong, the navlinks should be first before the social media. Use grid on this one to properly place the items.
  • Social media links could be inside ul since those are "list" of links.
  • Each a tag that wraps social media, it should have either aria-label attribute or screen-reader element inside it. The value for whatever method you will use should be the name of the social media like aria-label="facebook" on the facebook link a tag. This way, users will know where this link would take them.
  • Each img inside the social media link should be hidden since they are only decoration so use alt="" and add extra aria-hidden="true" attribute on them.
  • Same goes for the navlinks, use the structuring that I stated above.

  MOBILE

  • Hamburger menu should be using a button element since it is a control. Again, interactive components uses interactive elements. By using div you are making it not-accessible.
  • The img inside the hamburger should be hidden, use the method I mentioned above about hiding elements.

  SUPPOSING BUTTON IS USED

  • The button will be using the method I mentioned using aria-label attribute or screen-reader element inside. The value will describe what does the button do. The value could be aria-label="navigational dropdown menu".
  • The button should have a default aria-expanded="false" attribute on it. It will be set to true if the user toggles the button.
  • Also, why create a component that replaces the whole content of the site when the button is toggled? Don't.

  Now, learning some libraries like react is really great, but before doing it, make sure that you have a strong fundamentals about semantic html and proper usage of css, because right now, those are really missing in here. As a react developer or just a developer in general, the last thing you want to do, is to create a not accessible website.

  But still, great job on this one.

  10