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

QR Code Component

@Qayyax

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


I am still confused on Box model.

Community feedback

David 8,000

@DavidMorgade

Posted

Hello Abdul, welcome to the community, and congrats on finishing the challenge!

My first and more important advice since you are still having trouble with the box-model, is to also learn positioning using Flex-box, when you get how it works, start working on CSS grid, those are basic tools that you will be using everyday! and they are not that hard to master, you can even learn them using games like flex-box-froggy or grid-garden.

For example, in your component, instead of using a lot of margins to try to get it centered, you could have used flex-box like this on the body:

body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}

Setting the min-height to 100vh will make your body wrap all the screen, and with flex-box you get to center the item on the middle of the screen!

Hope my feedback helps you, if you have any questions don't hesitate to ask!

Marked as helpful

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