hey 👋
This is my solution to the QR code component challenge on Frontend Mentor.
- Flexbox
- Mobile-first workflow
I was taking a front-end development course when I faced this challenge, and everything felt overwhelming at first. I looked at the design and wondered, "How is this done?" I had this question in my mind but no idea how to solve it. There was a voice inside me that constantly asked, "How do I do this? How do I do that?"
As I continued with my course and learned the basic concepts of HTML and CSS, I began to connect the dots and discover the magic behind web design! I thought to myself,
"Oh💡, so this is how they create a layout for responsive design"
"Oh💡, so this is how I can easily center boxes along the vertical axis."
It felt amazing and now I am much more confident to continue this road.
- The viewport meta tag: Small trick, at first I wasn't aware of this, hence I was confused a lot
- BEM css naming convention: Makes it easier for both code writer and reader
- css custom properties (variables): Pays a huge rule in big and complex designs
- box-sizing property: This one is tricky too if you don't take it in considration when aiming for pixel perfect design