Easy Challenge 32min took from me

Community feedback

• 

  RabbitMaid•1,020

  @AgbortokoPosted over 1 year ago

  • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

  You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your html you can use the <section> tag.

  You did Great!

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  The picture tag should be within the main tag to fix the accessibility issues. sample html

  <main>
  <picture><img></picture>
  <h1></h1>
  <p></p>
  </main>
  <footer><div class= "attribuition"></div></footer>
  

  For a responsive content, give the main a fixed max-width value and a padding value for all the sides. max-width: 320px padding: 16px

  Give the img a max-width of 100% instead of a width for a responsive image.

  Give h1 and p the same font-size of 15px which is 0.9375rem and the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  1

  ---

  

  Zak-najjar•40

  @Zak-najjarPosted over 1 year ago

  @Hassiai Thanks For responsive that help me a lot I have a question how you calc the max-width

  0