Mobile first, BEM

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted almost 4 years ago

  Hey, awesome job on this one. Layout in desktop looks good, responds fine and the mobile layout looks good as well.

  Some suggestions would be:

  • The alt for the website-logo img should have been alt="loopstudios", the image already has the text needed, better use it. Also when using alt attribute, avoid adding words that relates to "graphic" like "logo, image, icon..", img is already an image, no need to describe as one.
  • Do not use any other element inside ul element as a direct child unless it is li element. Only li element are used inside it as a direct child.
  • Do not remove the visual indicator for an interactive element outline if you removed this, make sure to add an indicator such as box-shadow or a custom outline on the :focus-visible state of the element.
  • The alt for the image after the hero-section needs to use alt="' since it is just decorative or maybe a meaningful alt kind of confused on this one.
  • see all needs to be a link a and not button, since it is supposed to be a link to a page to "see all" creations.
  • Each creation should have been a a tag because it serves as a link link for the specific creation the website made.
  • The hover effect on each card does not suits well, its light can hurt eyes and it makes the text not visible, adjust to another one.
  • Also, another one, always have a main element that will wrap the whole main content of the webpage. A preferred structure would be:

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

  FOOTER

  • Website-logo img should use alt="loopstudios".
  • The links below it should be inside nav element, since those are still your navigational links.
  • The social media links should be inside a ul element, since those are "list" of social media links.
  • Each a tag that wraps the social media should have been using aria-label attribute, to which the value corresponds to the social media it wraps. For example, the a tag that wraps the facebook should have aria-label="facebook", this way, users will know where this link would take them.
  • The svg for the social media should have been using aria-hidden="true" since it is just decor for the social media.

  MOBILE

  • Hamburger menu should have been using button element and not div. div alone is not accessible. Along with aria-expanded to which the value is changed by javascript, whether the user have toggled the button or not. Have a search for it the net.
  • The button that will be used in the dropdown should also have aria-label="navigation menu dropdown" attribute, this way users will know what this button does.

  Aside from those, great job on this one.

  20

  Marked as helpful
• 

  nageeb0•5

  @nageeb0

  Posted almost 4 years ago

  very good

  00