html5 css3 (responsive till 375px as designed)

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Both desktop and mobile layout looks really great and it is responsive.

  Just some suggestions on this one:

  • Since you made the website-logo a link, you would need to use aria-label attribute or screen-reader element inside it. The value for whatever method you pick will be the place where this link would take them. Since typically, a website-logo points the user to the homepage, you could use aria-label="homepage" on the a tag. This will inform the user where this link would take them. You do this method if there are no text-content inside the element where screen-reader could have read.
  • Website-logo img should be using the website's name as the alt like alt="fylo". Remember that a website's logo is meaningful so always make sure it uses the proper alt value.
  • I think those 3 items below the website-logo are interactive components but not quite sure if it is a link or just button to control something, hard to tell really.
  • A page must have a single h1 on a page. Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element.
  • The 0gb and 100gb aren't really a list items, they are just better sitting on their own container like p tag but not inside ul.

  Aside from those, great work again on this one.

  Marked as helpful

  1