Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

My QR Code Component Solution using HTML & CSS

@1230fahid

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Are there best practices I could have followed to improve this project? What mistakes do you believe I need to work on the most? Any resources worth mentioning to improve at those mistakes?

Community feedback

@AssadullahADELYAR

Posted

Hello, your design looks great, but you don't need to use too many P tags.

<section class="boldedText">
      <p>Improve your front-end </p>
      <p>skills by building projects</p>
    </section>
    <section class="nonboldedText">
      <p>Scan the QR code to visit Frontend </p>
      <p>Mentor and take your coding skills to</p>
      <p>the next level</p>
    </section>

for boldedText class you should use heading tag and control the size with CSS.

<section class="boldedText">
      <p>Improve your front-end </p>
      <p>skills by building projects</p>
    </section>
<section class="boldedText">
      <h2>Improve your front-end skills by building projects</h2>
    </section>

You can do it with one paraghraph tag.

<section class="nonboldedText">
      <p>Scan the QR code to visit Frontend </p>
      <p>Mentor and take your coding skills to</p>
      <p>the next level</p>
    </section>
<section class="nonboldedText">
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </section>

and you can control the spacing with gap: 15px when you use flex-box.

I hope it was helpful for you

Happy coding,

Marked as helpful

0

@1230fahid

Posted

@AssadullahADELYAR Hi, thank you so much. I realize the p tags is pretty inefficient and shows a lack of understanding on how to set the width properly with respect to its parent. I suppose I tried taking the easy way out but that needs to be fixed if I want to improve here.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord