Responsive new clipboard landing page main

Community feedback

• 

  kelvintheophil•80

  @kelvintheophilPosted about 3 years ago

  thanks @raymalt for the feedback , hope in my next project i'll be able to cover the setbacks in my code and make it readable and user friendly , thanks alot mate

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks great, it is responsive and the mobile state looks great as well.

  Some suggestions would be:

  • It would be great to have this markup on the current page:

  <header /> # contains the logo
  <main />
  <footer />
  

  This way, all element that has content are inside their respective landmark elements.

  • Website-logo img should be using the website's name as the alt like alt="clipboard". 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.
  • Avoid using vh unit in height property as this is not consistent. Try to inspect the layout in dev tools at the bottom, try to resize the dev tool's height, you will notice that the site is shifting as well. Instead, use rem value in the min-height and not height so that it won't have a fix height.
  • Other images could use a more descriptive alt. For example on the computer image, you could use alt="clipboard app on a desktop".
  • You could use ul on the 3 items besides the computer image since those looks like "list" of the clipboard's feature.
  • Those 3 icons before the company logos are only decoration. Decorative image must be hidden at all times for screen-reader users by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • You don't need to add cursor: pointer to the company logos as they are not using an interactive element.
  • Avoid using multiple h1 on a page, use only at least 1 per page so change those into other heading tags.
  • Why are there 2 footer? On this one, the footer should be the footer itself...That sounds confusing, you know what I mean, don't use footer on the .attribution you can use aside for now on that.

  FOOTER

  • Same for the website-logo it should use the website name as the alt value.
  • On the 5 links, you could use ul on those since those are "list" of links. Also you can nest this ul inside a nav since those links are still your website's navigational links.
  • Social media links could be inside ul 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 the method I mentioned above as well.

  Aside from those, great job again on this one. Let me know if you have any queries.

  0