Recipe page using html css

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 5 months ago

  Hiya @mayank1405,

  Great job on another successfully completed project, you are on a roll!

  I'll be glad to give you some friendly constructive feedback:

  • Try to give your elements more descriptive classnames:

  <div class="b">
        <h2>Ingredients</h2>
        <ul>
          <li class="li">2-3 large eggs</li>
          <li class="li">Salt, to taste</li>
          <li class="li">Pepper, to taste</li>
          <li class="li">1 tablespoon of butter or oil</li>
          <li class="li">optional fillings; cheese, diced vegetables, cooked meats, herbs</li>
        </ul>
  </div>
  

  When someone is reading through your code it's hard to understand what class="b" means exactly. Try something like this as an example:

  <div class="ingredients">
        <h2 class="ingredients-title">Ingredients</h2>
        <ul class="ingredients-list">
          <li class="ingredients-list-item">2-3 large eggs</li>
          <li class="ingredients-list-item">Salt, to taste</li>
          <li class="ingredients-list-item">Pepper, to taste</li>
          <li class="ingredients-list-item">1 tablespoon of butter or oil</li>
          <li class="ingredients-list-item">optional fillings; cheese, diced vegetables, cooked meats, herbs</li>
        </ul>
  </div>
  

  This will make it easier for you to make sense of your code and to style it, as well as other developers to read it. Very important if you work in a team.

  • At the moment your card scales with the viewport and from my understanding you don't want this. You want the card to stay centered and shrink when the viewport gets to small. So I suggest the following changes:

  .whitebox {
      max-width: 450px;
      width: 100%;
      background-color: hsl(0, 0%, 100%);
      display: flex;
      flex-direction: column;
      border-radius: 20px;
      padding: 2rem;
  }
  

  I removed some properties and added some properties, make sure to compare your code and this code. This code makes sure you card has a max-width while still allowing it to shrink when it gets to small. On block elements you don't need to set height: auto they already have this by default. I also removed justify-content: center and align-items: center. These are not needed. I suggest you read up about the properties and what they do exactly, it's important to know what properties do before applying them! Also I would not use percentages for margin and padding in this example.

  • I suggest adding min-height: 100vh to the body so it's always 100vh at a minimum while still being able to grow. Also try adding some padding at the top and bottom of the body so the card has some space to breath.

  • At the moment the card is not responsive, I recommend reading up on media queries on how to achieve this. Try experimenting with them. The max-width and width set on the card in combination with media queries should be enough to make it responsive. Try to compare the screenshots for desktop and mobile to check exactly what's happening.

  I hope you find my feedback helpful, as always I would appreciate it if you could mark my comment as helpful when it was!

  Let me know if you have more questions and I'll try to answer them.

  Marked as helpful

  0
• 

  Omlan•110

  @omlan99Posted 5 months ago

  Your code looks great. You did an awesome job. Your paragraph color can be changed to hsl(30, 10%, 34%); to match the design.

  Marked as helpful

  0