Frontend Mentor | QR Code Component (Flexbox + BEM) coding challenge solution

Solution retrospective

Hello there, I’m Akiraz 🐺

This solution really took me a while (longer than I expected), I wanted to do it myself but also review other people's code to make sure my approach was correct and my HTML and CSS code was clean, scalable and maintainable. It was a very fun and educational process.

Any feedback on how I can improve my coding skills is welcome!

Thank you. ✌️😎

Community feedback

David Gichuru• 360

@dxiDavid

Posted about 1 year ago

Hello there @Akiraz14 👋🏾

I have a suggestion that will help you write better code

when setting custom properties, try giving them descriptive names like --primary-font-color instead of --color-1st. It will make your CSS easier to read and understand. Also, try to set custom properties for styles such as font-size, font-weight, (basically things you see in the style guide)border-radius since they will most likely be used on more than one occasion.
Limit the use of pixels to things like box-shadow and border-radius, otherwise use relative units.
only look for references when you are absolutely stuck and cannot find a way out. don't waste time doubting yourself. If you have a working solution then good. come back and refactor later

The attention to detail in your solution is impressive💪🏾

Keep Going, happy coding🥂

Marked as helpful

Akiraz14• 50

@Akiraz14

Posted about 1 year ago

@dxiDavid Hello 👋, thank you for your comments, they are very useful to me, I will keep your piece of advice in mind. 🦾

QR Code Component (Flexbox + BEM)

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community