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 using HTML, CSS flexbox

@cintiavic

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 like the fact I could solve it in a couple hours and looks pretty much like the provided preview image.

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

I had trouble centering the card vertically. I checked if that had been asked in the Discord channel, and happily it had.

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

I find it hard to establish an standard way to structure the project folders, and in the future, with more complex pages, I would like to learn how to write more modular css code (splitting the code into different files, like one for variables, one for normalize, etc)

Community feedback

Andrey 10

@a-sovetkin

Posted

It looks good. But some improvements need to be made.

  1. Fixed block size with QR code (320px)
  2. The indentation between the blue block and the text should be 24px
  3. Semicircles on the blue block can be made with css styles
  4. The QR code contains squares, but there are none on the layout
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