flyo-landing-page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. The layout in desktop seems fine, on mobile state, the font-size could be lower down since it is big right now. Also the responsiveness can be improved, while resizing, there are sections where overlapping occurs, the font-size not scaling and the sizes of containers shrink but not the content.

  Some suggestions would be:

  • The company logo in the header should have alt="fylo" , since the image itself have the text on it, better use it on the alt attribute.
  • The ul in the header should be wrap inside a nav so that screen reader users will know that these are navigational links.
  • The links as well in the header should be wrapped inside an a tag because those are links.
  • The large text on the header should have been wrapped inside h1 not h3. Always have at least 1 h1 on a webpage. Do not also skip a heading tag. When you use h3 make sure that there are h1 and h2.
  • The get started is better when it will be a a tag since it looks like it is a link rather than a button control.
  • When you have an img element and you think it doesn't add anything, use alt="" on them.
  • On the testimonial section, the img of the person should have their name as the alt value like alt="satish patel".
  • On the cta section, the email input should be wrapped inside a form element including the button next to it. Having also a validation on it will be really great so that you could practice more about js.
  • The email input should have a label that will be pointed to it. The label could be a sr-only text, only visible for screen reader users.
  • The button next to it should have type="submit", be explicit on what your controls should act. Adding also cursor: pointer on the :hover state on desktop will be really great.
  • On the footer the website logo should use alt="fylo" as well. Avoid adding words that relates to "graphic" like "logo, icon, picture.." as a value on alt attribute.
  • The footer links should be wrapped inside their own a tag and be nested inside a ul element. Since those are list of links, it would be great as well if it nested inside a nav, it would look like:

  <nav>
    <ul>
      { links goes in here } 
   </ul>
  </nav>
  

  Lastly, you need to test your layout in dev tools before submitting. Check if the layout is good when you change the screen size, that is why you need to improve the responsiveness of it.

  Aside from those, great work.

  Marked as helpful

  1
• 

  Matheus Ribeiro Da Rosa•70

  @FrintxDPosted about 3 years ago

  Try to put flex in other containers

  0