Loopstudios-Landing-Page using HTML CSS JS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop is fine, just the creations section's card are already wrapped, I am using 1366x768. But, the responsiveness and mobile state are missing. When creating a site, always include a mobile state and the responsiveness should be present as well.

  Some other suggestions would be:

  • nav should be wrapped inside header.
  • The website-logo shouldn't be inside the nav since it is not being treated as a link.
  • Website logo should be only using the website's name as the alt like alt="loopstudios".
  • Also when using alt attribute, avoid using words that relates to "graphic" such as "logo" and others. An img is already an image/graphic so no need to describe it as one.
  • Inside the main the header should be placed on its own. A typical layout of a site looks like:

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

  This way all element are inside a landmark elements.

  • Avoid using vh unit in height property, as this limits the element's height based on the remaining screen's height. Use rem instead on this so that it is consistent. Try looking the site on dev tools at the bottom, hero-section is not looking great.
  • Each a tag that are inside each card should be using :

  display: block;
  height: 100%;
  width: 100%
  

  Since right now they don't have a size because inline-elements cannot contain a block element. What I suggested is wrong to be honest but it is a workaround. Because right now, navigating with keyboard, you cannot see what card are you in since the a doesn't contain a size for the outline to be visible.

  FOOTER (must not be inside the main)

  • Same for the website-logo, use the proper alt value.
  • List of links could be inside a nav since those are still your navigational 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 aria-hidden="true" attribute on them.

  Right now those only because I can't suggest the markup for the mobile state since it is missing. Try to add this and you can reply on this again and I could review the site once it is refactored. Again, great job on this one.

  Marked as helpful

  0

  ---

  

  Franznic0•310

  @Franznic0Posted about 3 years ago

  @pikamart Hi there! Thanks for your feedback, it was very helpful and introduced me to some new stuff like the aria-label. I improved the code try to follow your suggestions, but I'm not very sure what you meant with "mobile state" honestly, I think could be something I haven't studied yet. If it is not asking too much and you have some links for documentation about this topic that could share, could be very appreciated.. =)

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @Franznic0 Hi, well I don't really have a resource about that hehe.

  But mobile state only means the site being seen in your mobile device. Because in here right, you coded the design for desktop layout but you need to create the layout as well for mobile state so that your site will be good to look at both mobile and desktop.

  I think there are some resource here in fem. Check out the resources page here at the top part next to the solutions page. There are bunch of different resources for different things and maybe you can find some on how to approach mobile design^^

  0