fylo-two-column

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello nevin raju,

  Congratulation on completing another frontend mentor challenge Great work! I have some suggestions regarding your solution if you don't mind:

  HTML

  • Instead of using a generic div with the class .nav to wrap the links of the header, you may use semantic <nav> landmark around an unordered list <ul>after you put your links within an unordered list structure so that a screen reader will read out how many things are in the list to give visually impaired users the most information possible about the contents of the navigation. It might look like this:

  	  <ul class=”” aria-label=””> 
  	        <li><a href=”#”>Features</a></li>
  	        <li><a href=”#”>Team</a></li>
  	        <li><a href=”#”>Sign In</a></li>
  	 </ul>
  
  

  The same for the socials links in the footer , you may use <ul>.

  • The alternate text of the logo may be alt="Fylo logo". Use the website's name as an alternate text.

  • For the alternate text of the testimonials avatar should not be empty, you can use the avatar name alt=" kyle burton".

  • look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content

  • You have used an aria-label to the <main> with column(for the assistive technology users), I’m not sure why you have used it, maybe you’ve meant to use class. Anyway, The purpose of providing a label for objects that can be read by assistive technology. The aria-label attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.

  • You want to read how to label your sections. Here are three methods.

  • Use <form> to wrap . class="get-start-email" and class="get-started-cta" instead of generic div.Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together.

  • Consider specifying the type of the button in the form. Then later , you may use the JavaScript to the get the form by its id and prevent submitting the form till the email is valid.(email validation)

  • Use the<nav > landmark to wrap the footer navigation with aria-label=”secondary “ or aria-label=”footer”. A brief description of the purpose of the navigation, omitting the term "navigation", as the screen reader will read both the role and the contents of the label. thenav element in the header could use an aria-label="primary" or aria-label=”main”attribute on it. The reason for this is that, You should add the aria-label for a nav element if you are using the nav more than once on the page. This will make it unique.you can read more in MDN

  • Do not use <br> to increase the gap between lines of text Or make empty space between elements, use padding / margin styling via CSS. And about using <br> in the <p> to make the paragraph break in new line, You may use max-width to <p> and remove those <br>.

  • Last I really recommend to use devtools (inspector), as it shows what the HTML on your page looks like at runtime , as well as what CSS is applied to each element on the page.(There is a large padding of 80px in get-start with overflow of the content in the mobile.)

  Aside these , great work Hopefully his feedback helps

  Marked as helpful

  1

  ---

  

  Nevin Raju•270

  @newwohhPosted over 2 years ago

  @PhoenixDev22 hi thanks for your feedback it helped me a lot and im just a noob its only couple of weeks since ive started to learn coding your suggestions are very valuable and i will keep in mind in the next challenge.

  1