responsive landing page using html, css flex&grid and js

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. But there styling issues on this one both desktop and mobile as well for responsiveness, I suspect a lot of position: absolute on this one which should be avoided as much as you can.

  But still, some suggestions mainly on the markup:

  • Thea tag that wraps website-logo should have either aria-label attribute or screen-reader element inside it. The value for whatever method you will use should describe where the link would take them, usually a website-logo-link points to homepage so use aria-label="homepage" something like that.
  • 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.
  • 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.
  • When using ul element, only li tag are valid tag to be directly inside it, so wrap those a tag by their respective li tag.
  • You should not have used margin to set a size on the div that wraps the website-img, the nav should be using padding on this one so that the element inside it won't get an extra unnecessary sizes. Try tabbing on the website-logo, you will notice it occupies huge size on its outline.
  • h1 doesn't need those br tag to make the text wrapped in another row. You could have used max-width on the h1 adjust until all 3 lines are in their own row.
  • Same goes for the next heading tag, use max-width instead of br.
  • Also, as I suspected, lots of position: absolute are being used. For example, the section after the hero. The image and the text-content in its right side should be nested in a single section or div and that container will be using position: relative if you like, this way the content inside it are only relative to their respective container and not for the body tag since right now, they are relative to the body and not to the main nor in their respective container. Always make sure that when using position: absolute on an element, they are relative to a controlled container by adding position: relative.
  • see all should be a link so use a tag.
  • On this one, the creations section, you could have use figure element because it make sense in here since each text for every collections are figcaption of the img inside it. Have a look at my solution on this one see the markup and you can take note on how they are properly placed without usage of position: absolute I rarely use that since they go out of the flow.

  FOOTER

  • Same for the website-logo and website-logo-link, use what I mentioned earlier about it.
  • Social medias could use a ul element 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 aria-hidden="true" attribute on them.
  • The other 5 links at the bottom should be using the same structure I mentioned above, li tags and you could nest that ul inside a nav since that is still your navigational links.

  MOBILE

  • Hamburger menu should be using a button element since it is a control. Again, interactive components uses interactive elements. By using img you are making it not-accessible.

  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 img inside the button should be hidden so use alt="" and extra aria-hidden="true" attribute on the img tag.
  • The button should have a default aria-expanded="false" attribute on it. It will be set to true if the user toggles the button.
  • The order of the hamburger button and the dropdown in the markup is wrong, the button should be placed before the dropdown so that the focus will be next to the dropdown, after the button has been toggled.

  Currently, stylings are the very issue in here, but still, great work on this one.

  Marked as helpful

  0

  ---

  

  Kurt Gonzales•300

  @KurtGonzalesPosted about 3 years ago

  @pikamart Thank you for the effort and time giving feedback on may project, sir!

  1