HTML and CSS Solution Using flexbox

Community feedback

• 

  P

  Huy Phan•3,420

  @huyphan2210Posted 23 days ago

  Hi @carltonjohnson1,

  I’ve reviewed your solution and wanted to share some thoughts:

  You’ve used too many <div> elements and nested them unnecessarily. Here are my suggestions for improvement:

  Instead of this:

  <main>
    <div class="code-wrapper">
      <div class="white-bg">
          
      </div>
    </div>
  </main>
  

  Do this:

  <main class="code-wrapper white-bg">
    <!-- Content -->
  </main>
  

  Similarly, I noticed this pattern in your code:

  <div>
    <div class="txt-content">
      <h1>Improve your front-end skills by building projects</h1>
      <p>
        Scan the QR code to visit Frontend Mentor and take your  
        coding skills to the next level.
      </p>
    </div>
  </div>
  

  Instead, simplify it like this:

  <h1>Improve your front-end skills by building projects</h1>
  <p>
    Scan the QR code to visit Frontend Mentor and take your  
    coding skills to the next level.
  </p>
  

  Since <h1> and <p> are block-level elements, they don’t need additional <div> wrappers. This approach improves readability, reduces unnecessary elements, and enhances semantic structure.

  Regarding your CSS, while there’s room for improvement, this challenge is quite simple and straightforward, so there’s not much to critique at this stage. We can dive deeper as you progress with other challenges.

  Hope this helps! Let me know if you have any questions.

  0
• 

  Rudra Guduru•30

  @Rudy-275Posted 23 days ago

  I have seen your code, and honestly it's really accurate to what was asked. I would suggest you regarding css that, ( it's something that I follow, my friend thought me this ) in the universal selector * we should also add margin =0; & padding = 0; cause some websites have predefined margin and padding which can affect your styling. In order to avoid that we mention it earlier to set margin and padding ( of the browser ) to zero. I guess it's a good practice.

  0