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 site using flexbox

wey song 130

@teuthix

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 are you most proud of, and what would you do differently next time?

I was most proud of figuring out how to get the qr code centered in the middle of the page. I think it gave me a better understanding of justify-content versus align-items and how to use them.

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

Figuring out how to center the qr code vertically was challenging. It involved some googling and rereading how flexboxes work.

What specific areas of your project would you like help with?

If any of my code doesn't follow best practices, I would love to know how to improve my code in that way.

Community feedback

Daniel 240

@Flashdaniel

Posted

Hi, Wey! Great work. Going through your project code I saw that you used a media query. I think it was not necessary if you had used responsive length units (eg. rem, em ). You should also avoid using responsive units like percent (%) in places like border and border-radius. instead, use fixed units. take a look at my version of the same solution on Github account to see how I achieve mobile and desktop design with just the use of responsive units. All the same, I think you did great work. Check out this link https://medium.com/@dixita0607/css-units-for-font-size-px-em-rem-79f7e592bb97 to get a better understanding of responsive unit.

Marked as helpful

0
P

@MichelleP1

Posted

Nice job. One thing I noticed is that you have .attribution and .atribution a separated. If you want, you could combine them like this:

.attribution { a { color: hsl(228, 45%, 44%); } }

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