Learning flex

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, really nice work on this one. The desktop state looks great, site is responsive and the mobile state looks great as well.

  Others already gave their feedback on this one which is really nice to see giving feedbacks for other members:>. For some other suggestions, here are some:

  • For this one, a preferred markup would be like this:

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

  The header contains the website-logo, main for main-content and footer for the social-medias. If you use a landmark, like a header inside the main, it will just be treated as a normal tag so always have its own row beside the main if needed.

  • Lose the word logo in the website img alt attribute. When using img tag, you don't need to add words that relates to "graphic" such as "logo" and others, since img is already an image so no need to describe it as one.
  • Don't use width: 100vw since this will only add a horizontal scrollbar at the bottom, since this value does not account the vertical scrollbar's width.
  • The hero-section image is just a decorative since there are no other info about the illustration. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if you are using svg instead of img tag.
  • Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
  • Lastly, since those social media are supposed list of "links", use a tag for each icon. Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Benja.min•740

  @BenjaDotMinPosted almost 3 years ago

  @pikapikamart Hey! Thanks so much for the detailed feedback. I definitely have a weakness with SEO and accessible html, so this is great advice for me.

  I am going to find this so useful, thanks again.

  1
• 

  Vibhor Singh•40

  @Vibhor0Posted almost 3 years ago

  Man, you imitated the site really well. Nicely done :)

  Marked as helpful

  1

  ---

  

  Benja.min•740

  @BenjaDotMinPosted almost 3 years ago

  @Vibhor0 I really appreciate that, thanks for the comment :)

  0
• 

  MikevPeeren•2,100

  @MikevPeerenPosted almost 3 years ago

  Hey 👋

  Looking good 👍

  Try to keep in mind that when using alt if it's for use to screenreaders for example the logo isn't in this case.

  Marked as helpful

  0

  ---

  

  Benja.min•740

  @BenjaDotMinPosted almost 3 years ago

  @MikevPeeren Hey! Thank you, than means a lot :)

  That's a good point, I will use that going forward.

  0
• 

  Martijn•420

  @skorpiooPosted almost 3 years ago

  Damn.. Now I'm impressed. Well done!

  1

  ---

  

  Benja.min•740

  @BenjaDotMinPosted almost 3 years ago

  @skorpioo That's very kind, thank you! :)

  0
• 

  Krish•660

  @Alone-07Posted almost 3 years ago

  how did u do that exactly?? Did you use sketch , figma??

  1

  ---

  

  Benja.min•740

  @BenjaDotMinPosted almost 3 years ago

  @Alone-07 Sadly I cannot afford the premium costs, so have no access to Sketch or Figma files.

  0