Recipe Page - My Solution

Community feedback

• 

  George Asiedu•780

  @george5-starPosted 9 months ago

  Hey, @marlonszm, once again! Congrats on completing the challenge!

  Before anything else, I have noticed you have not implemented the suggestion I gave on the previous challenge, so I recommend you actually do so to solidify your understanding.

  Now back to these problems:

  The Problem: -> Problems inserting colors in the ordered list (the numbers)

  <div class="list">
     <li id="eggs">2-3 large eggs</li>
     <li id="salt">Salt, to taste</li>
     <li id="pepper">Pepper, to taste</li>
     <li id="butter">1 tablespoon of butter oil</li>
     <li id="optional">Optional fillings: cheese, diced vegetables, cooked meats, herbs</li>
  </div>
  
  // Change the div to ul, like the following:
  
  <ul>
     <li>item 1</li>
  </ul>
  
  That's proper semantic html tag to use instead of the div.
  

  The fix:

  li::marker {
    color: whatever color you like;
  }
  

  The problem: Inserting horizontal lines in the grid

  
  Change the following markup to actually use the table element.
  
  // BEFORE
  <div class="nutrition-table">
    <p id="calories-text">Calories</p>
    <h3 id="kcal">277kcal</h3>
    <p id="carbs-text">Carbs</p>
    <h3>0g</h3>
    <p id="protein-text">Protein</p>
    <h3>20g</h3>
    <p id="fat-text">Fat</p>
    <h3>22</h3>
  </div>
  
  // AFTER
  <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>22</td>
    </tr>
  </table>
  

  Check out the MDN docs on tables if you find them confusing: ---> MDN Docs.

  The fix:

  
  tr {
    border-bottom: 1px solid (and your preferred color here)
  }
  

  0
• 

  P

  Justin Green•2,770

  @jgreen721Posted 9 months ago

  Nice work on this. I did notice you had a fixed width on your recipe card which doesn't always play well with screen responsiveness. Its generally not a bad idea to put a max-width: attribute on their though to prevent it from getting too big though, so max-width:650px would probably work. So far as one of your issues with a borderline on the nutrition portion, I would probably parent each <p> and <h3> up with its own li or div and give that element a little padding and and a borderBottom. You could probably border bottom the 2 elements long as there is no margin. Other ways certainly but just as a starting off suggestion. Hope some of it it helpful and again nice work!

  0