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 table and flexbox

Aurore 30

@AuroreLP

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 think my solution looks a lot like the challenge, so for a first time, I believe it's a really good start. Next time, I will write the readme file while working on the solution, to convey the process I used more effectively.

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

At first, I didn't manage to have my card in the center. But I finally understood that I had the 100vh missing, plus a margin was blocking this value. I realised it after checking line by line the CSS file.

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

My biggest struggle is about the padding and margin properties. It's not always clear for me.

Community feedback

@mayank1405

Posted

It is indeed very good for the first time. For the padding and margin part I think it would be advisable to play around with it and find out, for block and inline elements. If it helps maybe add a border to an element you are applying padding to help visualize it better.

0

@FlemmingSch

Posted

Looks good 👍 The fonts and margins/padding and the likes look a bit off but recreating something 1 to 1 isn't always the best. Doing it your own way is better. Code looks good otherwise.

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