Recipe page using mobile first!

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted 9 months ago

  Hi @andreDosSantosNascimento. That's a good solution. Keep coding. Here are some quick tips for you:

  • You can set the max-width: 736px; for your header and main elements. That's the correct value for their max-width length from the design file.
  • You don't need too many reset declarations. They affect your code in ways that you won't notice. Look at this modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ Check out some other resources and create your own reset file. Don't add too much code to it.
  • You can use the display: block; and max-width: 100% declarations on your img element (as a reset declarations). The display: block; declaration will remove the extra line at the bottom of the image, because the img element has the display: inline; declaration and it creates some an extra line at the bottom of the images.
  • You can also add the box-sizing: border-box; declaration as a reset css. You don't have to give it to every element.

  Marked as helpful

  0
• 

  Rahul Kumar•570

  @rahulkumar215Posted 9 months ago

  Hello @andreDosSantosNascimento 👋

  Congratulations on successfully completing the challenge! 🎉

  I have a suggestion regarding your code that I believe will be of great interest to you.

  • For Nutrition Section in the challenge, You have used ul and li HTML elements

  Here

      <ul>
        <li>
          <p>Calories</p>
          <p>277kcal</p>
        </li>
        <li>
          <p>Carbs</p>
          <p>0g</p>
        </li>
  
        // repeated
        <li>
          <p>Carbs</p>
          <p>0g</p>
        </li>
        <li>
          <p>Protein</p>
          <p>20g</p>
        </li>
        <li>
          <p>Fat</p>
          <p>22g</p>
        </li>
      </ul>
  

  However, the best practice to do is by using the Table HTML tag,

  like this,

      <table>
        <tr>
          <td>Calories</td>
          <td>277kcal</td>
        </tr>
  
        <tr>
          <td>Carbs</td>
          <td>0g</td>
        </tr>
  
        <tr>
          <td>Protein</td>
          <td>20g</td>
        </tr>
  
        <tr>
          <td>Fat</td>
          <td>22g</td>
        </tr>
      </table>
  

  • Also there is no border in last row of the nutrition table,

  so You can do that by

  main > section.nutrition > ul > li:not(:last-child){ border-bottom: 1px solid var(--neutral-light-grey); }

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

  If you need any feedback or suggestions, I am happy to help

  Have Fun Coding!

  0