Simple Omlette Recipe Page

Community feedback

• 

  Rahul Kumar•570

  @rahulkumar215Posted 8 months ago

  Hello @YugandarNR👋

  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 Part of the solution, We can define a table layout like this

      <div class="Nutrition">
        <h2>Nutrition</h2>
        <p>
          The table below shows nutritional values per serving without the
          additional fillings.
        </p>
                <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>
      </div>
    

  then, to separate the nutrition and amount of nutrition, we can simply give the table a width: 100%. This will separate the nutrition and amount of nutrition with same space in-between.

  then we can style the table as

  table{ border-collapse: collapse;}

  this will remove the border from the table and now we can set the styles for table row like this

  tr:not(:last-child){ border-bottom: 1px solid **table border color** }

  this will give each table row except the last one a border-bottom.

  then we can give some padding-left to the first td of every tr to bring it a little right side of the table as shown in the design tr:first-child{ padding-left: 30px;}.

  and now just apply some styles to the other td of every tr like you have in your solution.

  And there you have it

  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!

  Marked as helpful

  0
• 

  jsimalango•90

  @jsimalangoPosted 8 months ago

  the indent in Instruction part need to be fixed

  0