Submitted 3 months ago

QR Challenge

RKennedyy• 100

@RKennedyy

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?

The main thing I struggled with was making sure the design was responsive and making the div remain in the centre. From researching this I found this can be done by using margin: auto; in CSS.

Since I haven't covered flexbox yet im sure there are better ways to achieve this.

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

The main thing I struggled with was making sure the design was responsive and making the div remain in the centre.

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

Any detailed guides on CSS styling would be appreciated!

Community feedback

Vishal D.• 570

@Hummingcoder

Posted 3 months ago

give container display grid and place-content center to center the card

Dylan de Bruijn• 3,190

@DylandeBruijn

Posted 3 months ago

Hiya @RKennedyy,

Congratulations on completing this project. Your solution looks great! Being able to do research to achieve the result you want is a good skill.

A bit of friendly constructive feedback:

Try using more descriptive classes for your HTML elements, like .card and .card-title for example. This makes it easier for you to understand and style your elements and for other developers to read your code!
To get the card to sit in the middle it's indeed easier to do with Flexbox. I suggest reading about it to understand it more. This is a great resource.
Try using a main as your main element in the body. This wraps all your other elements.
You could make your color and font values more reusable by using CSS variables / custom properties.

If you have any specific questions let me know and I will be happy to answer them. If you find my feedback helpful I would greatly appreciate it if you could mark my comment as helpful!

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