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

Static QR Code with plain HTML and inline CSS

P
Gina Wang 170

@gina-wang-1021

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 replicated the view pretty accurately for the desktop view.

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

I found it hard to decide on when to use padding and when to use margin. I also found it difficult to decide whether to add an additional box for style purposes or not. For example, there are times that I could only figure out how to store my image in the center horizontally by adding a item around it.

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

positioning items horizontally, best practice regarding positioning

Community feedback

P
codigoTin 100

@codigotin

Posted

Does the solution include semantic HTML?

No, it doesn't include semantic HTML. I would recommend reviewing this to improve your code.

Is it accessible, and what improvements could be made?

Yes, it is accessible. In terms of improvements, using REM instead of pixels could be beneficial.

Does the layout look good on a range of screen sizes?

Yes, it looks good on various screens.

Is the code well-structured, readable, and reusable?

It could be improved by using style sheets and variables.

Does the solution differ considerably from the design?

The design is very similar to the original, very well done.

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