qr code component frontend mentor challenge

Community feedback

• 

  Exequiel Arco•390

  @quielLovesLasagnaPosted 11 months ago

  Nice work @muhibkhan2005!

  Your output is looking good but here are some suggestions to improve it:

  • I see that you did:

   <div class="container">
      <div class="container-main">
        <div class="container-img">
          <img class="qrimg" src="./images/image-qr-code.png" alt="qrimg">
        </div>
        <div class="title-heading">
          Improve your front-end skills by building projects
        </div>
        <p class="title-para">
          Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
        </p>
      </div>
    </div>
  

  Instead of using a <div> to contain your main content, use the <main> element to give it semantic meaning, <div> does not have a semantic meaning which is not accessible. You can read more about the main element here

  • Setting a min-height for the body and not the div with the class=" container it's good that you are using CSS flex-box to center your content but setting the height to the first container is not ideal (this is just a personal preference) but most developers set this property to the body when doing small projects like this, using min-height for the body makes it more responsive especially in cases where your content is bigger than the actual container while height specifies a fixed dimension to an element in general.

  • Use the font and colors required for the project. You can see the instructions inside STYLE-GUIDE.md I think.

  • You are using both internal and external CSS. You did not remove this part and transferred the CSS declaration in your external CSS.

  I hope this will help you improve...

  0