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

Adjustable QR code

Dalha 90

@dalhaldalha

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 would like to know what more I could do to improve the project. Also, what are some best structuring practices I could implement.

Community feedback

P

@Islandstone89

Posted

HTML:

  • Change .div1 to a <main>.

  • Alt text should also tell where it leads.

  • "Improve your frontend skills" is a heading, not a paragraph.

CSS:

  • Add a CSS Reset at the top - I recommend the one by Andy Bell.

  • Don't use positioning to center the card. Instead, use Flexbox on the body:

display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
  • Don't set fixed width on the card. You can set a max-width, to prevent the card from getting too big at larger screens.

  • Remove margin-bottom: 0px. If you did want something to have 0 margin, you would just write "0".

  • Font-size must never be in px. Use rem instead.

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