Submitted about 2 years ago

QR Code Component (Flexbox + BEM)

#bem

Akiraz14•50

@Akiraz14

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

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
@dxiDavidPosted about 2 years 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
1
Akiraz14•50
@Akiraz14Posted about 2 years ago
@dxiDavid Hello 👋, thank you for your comments, they are very useful to me, I will keep your piece of advice in mind. 🦾
0

Please log in to post a comment

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