HTML and CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, really great work on this one. The desktop layout looks really good, it is very responsive and the mobile state looks really great as well.

  Some suggestions on this one would be:

  • Nesting the 3 navlinks in a ul element would be nice since those are "list" of links.
  • When using flexbox instead of using the width or height to manipulate sizes, use flex or flex-basis properties.
  • Just an addition to boost your skills, a form validation would be really nice on this one. Since by adding form validation, not only you are practicing your javascript, but accessible in general as well since when it comes to a form, you need to make it as accessible as you can.
  • Hero-section should not be using aside since there are no useful content inside that you are using.
  • Hero-section-img should be using alt="". When you are hiding an element with aria-hidden="true" make sure that alt is empty so that it will be hidden totally.
  • Also, when using alt avoid adding words that relates to 'graphic' such as image. img tag is an image so no need to describe it as one.
  • Same goes for the small-arrow-icon on the see how fylo works element's being hidden should be using a correct attribute. Also, you could have used that img as a ::after of the a tag, that way you avoided using an extra img.
  • Same for the quotation mark icon.
  • Person's img should be visible and use img tag on it with alt="Kyle Burton" as it is a meaningful element. When a person's image and name are present in components like this, always make them visible.
  • Person's position should not be using its own heading tag, a p tag would work or you can wrap it with the person's name heading tag.
  • Same for the cta form, you won't need aside on it.

  FOOTER

  • aria-hidden="true" on the small icons on the website's information like the email icon and location.
  • The 7 links could be inside nav as well since those are still your navigational links.
  • You can use ul as well to wrap each links since those are "list" of links. This ul would be inside the nav.
  • Social media could be inside ul as well.
  • The role=img on the social media should be hidden since it is decorative only.

  Aside from those, site looks great.

  Marked as helpful

  0

  ---

  

  Stephane Jean•360

  @distephano30Posted about 3 years ago

  @pikamart Thank you sir! I appreciate your advices. The 7 links on the footer, I removed the nav here because it should have only one nav tag on the document. Yes, you're right about the aside, I saw that as errors on the report. Thanks again for helping me.

  1
• 

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  Hi Stephane,

  Great work on this project! It is responsive for both desktop and mobile. Just a suggestion, you might want to have a look at the report of your project. So that you have an idea of what issues you can fix.

  Good luck!

  Marked as helpful

  0

  ---

  

  Stephane Jean•360

  @distephano30Posted about 3 years ago

  @fidellim Really helpful, I didn't check on the reports before.

  1

  

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  @distephano30 you're welcome :) Good luck with your future projects!

  0

  

  Stephane Jean•360

  @distephano30Posted about 3 years ago

  @fidellim thank you

  1