Fylo landing page with two column layout challenge hub

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, just need the website-logo to be a bit more larger, it is responsive and the mobile layout looks great as well.

  Some suggestions would be:

  • Website-logo should only be using alt="fylo" as the value, lose the word "logo". When using alt attribute, avoid adding words that relates to "graphic" such as "logo, images, icon.." it is already an image so no need to describe it as one.
  • Always wrap the main content inside the main section, a typical structure looks like:

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

  This way, all elements with contents are inside a landmark element.

  • Hero-section image should have alt="" and extra aria-hidden="true" attribute on the img. A decorative image needs to be hidden at all times.
  • input element needs to have an label associated with it, the label would be hidden for users that is why it needs to have an sr-only class, you can search up a styling for this class.
  • button inside the form needs to have type="submit" as an attribute, always be explicit what your button should be, because a button with no type attribute defaults to submit when it is inside a form element.
  • Since you are using type="email" on the input your error-message is not really doing its job. Instead, make your own custom email validation, just use type="text" and handle the validation via your javascript.
  • The second-section's img needs to be hidden as well, use the mentioned method above on it.
  • The arrow-icon on the see how fylo works needs to be hidden as well, again, it is decoration only and it doesn't add any content to the page.
  • Quotation img on the testimonial section needs to be hidden as well.
  • The alt for the person's image needs to be their name like alt="Kyle Burton" when a person's name and image is both present, always use the name as the alt value for the image.
  • Name of the person could use a heading tag. Also, when wrapping a text content, use meaningful element like a heading tag if it is a heading or a p tag if it is just a text, do not just use div to wrap text.
  • Same goes for the cta section, you need the form like what I mentioned above.

  FOOTER

  • Website-image needs to use alt="fylo".
  • The 2 icons for the phone and email should be hidden, use the mentioned method above as well.
  • For the list of links, I would use a single ul element on it, since those links are just related to one another. Using display: grid would be great.
  • Social media links should be using ul element, since those are "list" of links.
  • Each social media should be inside a tag since those are links.
  • Each a tag that wraps the social media should either have aria-label attribute or an sr-only element inside it. The value for whatever method you will use should be the name of the social media, this way user will know where this link would take them. For example, using aria-label, the a tag would look like:

  <a href="facebook.com" aria-label="facebook">
     img inside here 
  </a>
  

  But using the sr-only method is much better than using aria-label, look it up on the net.

  Aside from those, great work again on this one.

  0