Recipe page using bootstrap

Community feedback

• 

  Alberto Raúl José•610

  @alberto-rjPosted 7 months ago

  👋 Hi, @Ranem97!

  👏 Congrats on investing your time and leveling up with the Recipe page challenge.

  I have some suggestions that can help you improve your solution to this challenge.

  Use the CSS rem unit in your styles.css file

  It is good practice to use the rem unit to specify the font-size, margin, padding, width, height..., instead of the CSS px unit. Learn more here.

  On line 108 to 126 of your index.html file

  You could use the <table> tag to create the nutrition section table, instead of simply using the <div> tag and the Bootstrap grid system. <table> should be used here, because it has this semantic meaning. Learn more why here. Learn how to create a table using Boostrap here.

  On line 134 to 144 of your index.html file

  For the footer of the page, you could use the <footer tag because it express this semantic meaning too. Learn more here.

  👎 Don't

  <div class="attribution"> 
    Challenge by
    <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">
    Frontend Mentor </a>.
    Coded by <a href="https://focused-joliot-da009a.netlify.app/">Ranem Haffar</a>.
  </div>
  

  👍 Do

  <footer class="attribution">
    <p>
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">
      Frontend Mentor </a>.
      Coded by <a href="https://focused-joliot-da009a.netlify.app/" target="_blank">Ranem Haffar</a>.
    </p>
  </footer>
  

  So, @Ranem97, these are my code suggestions for your solution. I sincerely hope they can help you in some way.

  Keep learning, coding and sharing! 🌟

  Happy coding! 🚀

  Marked as helpful

  0

  ---

  

  Ranem Haffar•30

  @Ranem97Posted 7 months ago

  @alberto-rj Hello Alberto, Thank you very much for your suggestions I will make sure I implement them in future projects 🙏

  1