First Solution - QR Code Component

Community feedback

• 

  Abdullah Durrani•30

  @bootupAbdullah

  Posted 5 months ago

  Notes on Body/Main Content:

  I beleive this design could beneift from having the following elements grouped in individual divs like so:

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

  Structuring your HTML into logical blocks enhances readability and maintainability, making it easier to style and update the website efficiently as it scales.

  Notes on Footer:

  Your footer's absolute positioning can lead to misalignment across various viewports, affecting responsiveness. Consider using the flexbox property for the footer instead, which allows more adaptive and responsive behavior. Try centering the content within the footer element using flexbox properties to enhance layout consistency across different devices. This approach will help ensure your footer remains visually coherent and functionally robust, no matter the screen size.

  10

  Marked as helpful
• 

  Eman Mustafa•40

  @Eman22000

  Posted 4 months ago

  Hey Musab , good job to complete this challenge put I think the top and bottom padding should be smaller and the card position not on the center

  00

  Marked as helpful
• 

  Eman Mustafa•40

  @Eman22000

  Posted 4 months ago

  nice work

  10
• 

  Luiz•40

  @luizfelipe0413

  Posted 2 months ago

  cool

  00