Loopstudios Landing Page

Community feedback

• 

  Malesela Kgobe•555

  @M-KgobePosted about 3 years ago

  Hi Your solutions looks pretty good.

  Your github repo does not work, you might have posted an incorrect link or something. you also seem to have a lot of issues in your report, check it out.

  Marked as helpful

  0

  ---

  

  Thomas Emerson•290

  @emersonvisualsPosted about 3 years ago

  @M-Kgobe Thanks for the feedback! I just realised my github repo was on private and I've just made it public. Working now though! Cheers 😀

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome job on this one. Layout in desktop looks really good and the mobile state is good as well. Though you are using too much screen size for the mobile layout, I already get the mobile layout at point 1200px, which desktop layout should still be present at that point. Adjusting breakpoint will be really great.

  Some other suggestions would be:

  • The alt for the website logo should be alt="loopstudios", the image already have the text needed better using it. You usually use the website name for the website-logo's alt.
  • The list of links in the header should be inside a nav element, since those are your navigational links.
  • The text usage for all the capital letters, for example, the hero-text, when you have a design that needs the text capitalized all, you don't explicitly type the sentenced in capital letters in html, because if you do that, assistive tech will read that sentence, letter by letter. Instead just use regular text like "Immersive experiences that delivers" and just use text-transform: uppercase on the css. Same goes for every capitalized text on your site.
  • Always have a main element that will wrap the main content of you website. A typical structure would look like:

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

  • The second image after the hero-section should be alt="" I think or maybe use more meaningful alt value.
  • "SEE ALL" is better to be anchor tag a rather than button since it looks more like a link to page to "see all" collections.
  • Avoid using multiple h1 on a webpage. Only use at least 1 h1 per page.
  • You don't need javascript to use the hover effect on your element. You don't need those mousenter listeners, you could just use :hover property on the css to do those. For stylings, let css handle it, you don't need to use those if you are just applying effects for the :hover state.

  FOOTER

  • Website logo should use alt="loopstudios".
  • Social media links should be inside anchor tag a since those are "links". Each a tag that wraps the social media, should have aria-label or sr-only text, to which the value will be the name of the social media.
  • The bottom links should be inside nav element, since those are still your navigational links.

  MOBILE

  • The hamburger menu should be using button element and not div. When there is an interactive component, always interactive element.
  • The button will should also have aria-label attribute or an sr-only text inside it, describing what the button should do, a sample text could be "navigation menu dropdown". The button should also use aria-expanded attribute, the value will be changed by javascript, either true if the user toggles it or false, it the user does not.
  • You don't have to create a separate list of links for the dropdown. You should use the original links, reuse html elements so that your markup won't be bloated.

  Just those above, still, great job on this one.

  0