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

Responsive QR Code

P

@Rohloffmeister

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


What challenges did you encounter, and how did you overcome them?

Centering the whole thing. But with a flexbox it was pretty easy

#body{
      height: 95vh;
      display: flex;
      justify-content: center;
      align-items: center;

    }

Community feedback

Arifin 20

@vynhart

Posted

I'm not a master in front end, just started my journey as well.

However, I have some feedback. Let me use it as an exercise for me when doing code review.

I see that you give id named #body on a div element, this gives a redundant feeling with the body element of the html.

Also HTML semantic is not very well specified because there are three levels of div (not sure what's the significant though, but I heard it's a good practice to use a good semantic for the doc).

There is blank lines on the css #qr-container.

Also, I think using id to give style to the element is not recommended. id should be used to give unique identifier on the element rather than specifying style, class is recommended.

0

P

@Rohloffmeister

Posted

@vynhart Hi , thank you for your feedback. i edited the code based on your feedback.

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