Advice generator app - HTML, CSS, JavaScript, API

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  HTML 🏷️:

  • This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to incorrect usage of semantic markup, which lack landmark for a webpage

  ---

  • So fix it by replacing the <section> element with the semantic element <main> in your index.html file to improve accessibility and organization of your page.

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>

  ---

  • They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

  ---

  CSS 🎨:

  • Use min-height: 100vh instead of height, to properly center the component both horizontally and vertically

  ---

  • Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation

  ---

  • min-height says that the minimum height is some value but that the element can continue to grow past that defined height if needed (like the content inside makes it taller or whatever).

  ---

  • And, another bonus tip. Don't want give width: 100vw for body. By default browser can render it for you

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0
• 

  hamza•390

  @HamzaouladevPosted over 1 year ago

  hello @maiconrmonteiro, here's some feedback regarding your layout i hope you find interesting:

  -in order to keep your code DRY, i suggest you dont rewrite max-width in your media query, instead just use the following code:

  section {
  width: 90%;
  max-width: 540px;
  }
  

  also i suggest you add this code for more responsive images:

  picture, 
  img {
     display: block;
     max-width: 100%;
  }
  

  -you should also wrap your component in a <main> tag and use more semantics html5 tags in general.

  hope you found my feedback helpful, happy hacking!

  Marked as helpful

  0