Fylo landing page with two column layout

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello leverh,

  Congratulation on completing this frontend mentor. Regarding your solution , I have some suggestions:

  HTML

  • Use the headers in a chronological order. How you order headings dictates how a screen reader will navigate through them. As you go down a level, the number should increase by one, like a numbered list within an outline.

  • Instead of using a generic div to wrap the content of the header( navigation links ), you may use <nav> landmark .

  • The alternate text of the logo may be fylo logo.

  • 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:

  <nav>
      <ul id=”..” class=”...” aria-label=”...”> 
  	 <li><a href=””>Features</a></li>
  	 <li><a href=””>Team</a></li>
           <li><a href=””>Sign In</a></li>
       </ul>
  </nav>
  /*Not <ul> within <li> */
  
  

  • The same for the footer navigation, use <ul>.

  • If the image is decorative(like icon of a phone") you set an empty alt to it with an aria-hidden=”true”, if the image is informative , you need to set a descriptive alternate text on the image.

  • 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

  • Don't start alt text with "photo of..." or "Image of..." Jump right into the image's description. Screen-reading tools (and Google, for that matter) will identify it as an image from the article's HTML source code.

  • Forms with proper inputs and labels are much easier for people to use. To pair the label and input, one way is An explicit label’s for attribute value must match its input’s id value. Input fields without accompanying labels can lead to accessibility issues for those who rely on screen readers. If a screen reader comes across an input field without a label it will try to find some accompanying text to use as the label.

  • Adding rel="noopener" or rel="noreferrer" to target="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

  • You may use email validation and prevent the defaults till the email is valid

  • It’s better to use semantic tags rather than <div> . By adding semantic tags to your document, you provide additional information about the document, which aids in communication like <blockquote> <figure> <figcaption> ...

  • For this class="contact", it should be included in the <footer> .

  CSS

  • Add min-height: 100vh to the body that let the body grows taller if the content outgrows the visible page instead.

  • An element with width:100vw can extend below the vertical scrollbar of your browsers, inducing the apparition of horizontal scrollbars along with an unwanted side scroll. Use width:100% instead will extend across the viewport but will always stop at the scrollbar.

  • It’s a good practice to avoid nesting selectors, . The best way to do styling purposes is single class selectors

  Overall, great work! Hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  leverh•300

  @leverhPosted over 2 years ago

  @PhoenixDev22 Thank you for all the great feedback. I will try to utilize all the great advice on the next challenge!

  I've changed the height to 100vh.

  If i understand correctly, you're suggesting to use 100% width instead of 100vw on the body selector?

  Thank you again x

  0
• 

  Divine Obeten•2,415

  @Deevyn9Posted over 2 years ago

  Hi Leverh, great progress, consider giving the nav items a bit of margin on the mobile view, or better still, use a collapsible navbar.

  Happy coding

  Marked as helpful

  0