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 version 2 semantic HTML

P
beowulf1958 1,170

@beowulf1958

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?

learning to use Sass variables

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

I had a bit of trouble with centering the card at first; check on solutions to other challenges by other people and was able to finally get it centered

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

my h1 breaks the line differently than the design jpg

Community feedback

_nehal💎 6,710

@NehalSahu8055

Posted

Hello Coder 👋

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

  • Use min-height:100vh instead of height:100vh To dynamically center the card

  • For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

I hope you find this helpful.

Happy coding😄

Marked as helpful

1

@lisztomania23

Posted

Hello, I made a few tweaks and created a pull request to your GitHub repo; merge it if you like.

1

@lisztomania23

Posted

Hello, I used the Pixel Perfect extension to try to match it with the given design, but I think my screen dimensions were set differently. As a result, it was showing as pixel perfect for that configuration. Now, upon reviewing the screenshot, I see that it is not. I simulated the given dimension of 1440px, made some tweaks, and submitted a revised pull request.

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