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 Solution // HTML & CSS

ron-nobi 20

@ron-nobi

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


Absolute beginner here. Not so sure about the width sizes I set for the div 'container' and image but it kinda worked so.. Feedback is highly appreciated. Thanks.

Community feedback

Joachim 840

@Thewatcher13

Posted

Actually a good solution!! Congrats!

A few things:

  • Why should you have a height from 100vh on the body?

  • Be sure that you be consistent with the use of rem for font-sizes

  • Consider the use of the newer margins/padding declaration. In this example the write direction is from left to right. Margin-inline-start (left) Margin-inline-end (right) Margin-block-start (top) Margin-block-end (bottom

  • use a css reset ( look on Andy's Bell his website for a clear and good one)

I have written a solution with an explanation for beginners.

I gave feedback to a few people and saw that they do the same things wrong, so I decide to write this solution.

So you can read my solution with explanation here:

https://www.frontendmentor.io/solutions/qrcode-solution-with-explanation-0LCmcOmbrj

Marked as helpful

1

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