Frontend Mentor | QR-Code Component with Flexbox coding challenge solution

Solution retrospective

What are you most proud of, and what would you do differently next time?

It was a fun project to complete. I think next time, I would try to practice using a framework possibly.

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

I didn't encounter too many challenges on this assignment.

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

Getting the sizes (like the width of the card) correct.

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted almost 2 years ago

Hi, DNel!

Congratulations on completing this challenge!

Nice alternative text for the QR code! It is rare to see people that can write good alternative text. Amazing! 👏

I recommend removing all commented code. If other developers or yourself in the future work with the same code base, they can get confused about whether the commented code should be used or deleted.

I recommend making the body as a flex container to place the card in the center of the page. Then, there is no need for a wrapper to have margin-top: 15%. Be aware that using percentage unit for margin and padding can lead to unexpected results on some screen sizes. It is because the value (computed value) is relative. So, it is better to use a static unit (rem) to make sure it is consistent across screen sizes.

I suggest using a CSS reset whenever you start a new project. This can help you set the styling foundation easily.

QR-Code Component with Flexbox

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community