Submitted 2 months ago

QR SCAN

bassdesigns• 10

@bassdesigns

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

This is my first time doing this, I have been teaching myself code for a couple months now. I watched lots of tutorials, read articles and even used platforms like codecademy and coddy. However, I realized that despite learning css and html properties , I did not know how to utilize what I have learnt to build something. So I decided to make my learning more practical, less theory. I downloaded visual studio code and followed this challenge instructions step by step. If I did not know why something was not working or how to fix errors I asked chat gpt to tell me what I was doing wrong and how to improve. When I was reading about css and html there were some confusing things , but think I understand flexbox and div containers better now that I practiced this challenge .

My key insight is this: you want to get learn code and get better at it then simply open visual studio code or whatever platform you are familiar went , get a prompt , sketch the visuals you want it to have , then try to bring that to life. As you try out stuff, research , ask ai , watch relevant tutorials on specific problems you encounter (instead of cramming information you have no idea what to do with ) share with people for insight and just be on your computer/laptop as much as you can. In short: Code to learn code.

Community feedback

Dylan de Bruijn• 3,190

@DylandeBruijn

Posted 2 months ago

@bassdesigns

Hiya! 👋

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

Things you could improve ✍️

I suggest adding a bit of padding to your body element so the card has some space around it on smaller viewports.
You could add a min-height: 100vh to your body element instead of height: 100% so it takes up the full height of the viewport while still being able to grow when the content inside it grows.
Try experimenting with CSS variables, they help you make your CSS values more reusable across your code.
I suggest using clear descriptive CSS classes like .card, .card-title and .card-description.
Try using using relative CSS units like rem and em they make your layout more adaptable.
Be careful with setting a fixed width and height on your elements. If the content in these elements grows beyond these restrictions you’ll run into overflow issues. Keeping the height at auto - which block elements are by default - will be fine in most cases.
You don’t need to put width: 100% on block elements, they already take up the full width of their parents by default.
You have the following CSS rule on your container:

align-items: space-between;

This is not a valid value for the align-items property.

Try making your solution more responsive.

I hope you find my feedback helpful! 🌟

Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

Happy coding! 😎

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