Responsive page using bootstrap

Community feedback

• 

  beowulf1958•1,890

  @beowulf1958

  Posted 9 days ago

  Congratulations on completing the project. It looks good. Your code is well organized, with the different sections in the html matching up to the section in CSS. The comments in CSS are super important. You made good use of CSS variables and the page is responsive.

  Great job using Bootstrap! I am also learning Bootstrap. It is easy to see you put in a lot of work. Maybe too much work? Bootstrap allows you style the font-size, font-weight, padding, and margins as you are marking up the html, saving a lot of time on the backend when applying your custom styles. Also, it is best practice to give each class a meaningful name: class="ingredients" instead of class="part_4" and then each element would be class="ingredients-title" and class="ingredients-text"

  The next step would be to make your html more semantic. Every page needs an <h1>. So in this case you would have a structure something like:

  <div class="main">
    <section class="heading"></section>
    <section class="preparation"></section>
    <section class="ingredients">
     <section class="ingredients">
       <h2 class="pt-4 mb-3 fw-semibold">Ingredients</h2>
         <ul>
            <li>2-3 large eggs</li>
            <li>Salt, to taste</li>
            <li>Pepper, to taste</li>
            <li>1 tablespoon of butter or oil</li>
            <li>Optional fillings: cheese, diced vegetables, cooked meats, herbs.</li>
          </ul>
      </section></section>
    <section class="instructions"></section>
    <section class="nutrition"></section>
  </div>
  

  which simplifies the CSS somewhat

  /* Style for the ingredients*/
  .ingredients{
    border-bottom: solid 2px rgba(00, 00, 00,0.1);
    background-color: var(--White);
   }
  
   .ingredients-title{
    font-family:'Young Serif'
    color: var(--Brown-800);
    font-size: 175%;
   }
  
   .ingredients-text{
     font-size: 125%;
   }
  

  Again, great job and keep up with Bootstrap. Once you are familiar with it, it will save you a lot of time.

  00