Submitted 8 months ago

QR Code Card using basic HTML and CSS

Babyjenx•90

@Babyjenx

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

I'm most proud of getting the QR code as centered as I did. Still not quite sure how to get it perfect but I'm happy with the end result.

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

Not too many challenges here other than centering. I found this to be a really helpful introductory project.

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

Is there a specific way to center divs on a page?

Any tips on how my code could be improved would be much appreciated!

Code

Please log in to post a comment

Community feedback

Asilcan Toper•2,960
@KapteynUniverse
Posted 8 months ago
Hey Babyjenx, nice job.

To center items you can use flex or grid.
```
body {
display: flex;
justify-content: center; /* horizontally*/
align-items: center; /* vertically */
min-height: 100vh; /* Need this for vertical alignment */
}
```
```
body {
display: grid;
place-items: center; /* or place-content: center; */
min-height: 100vh;
}
```
Other than this

Using landmarks and wrapping the content with main is a good practice. Every page needs one main.

Use a modern css reset, it will make your life easier

Avoid using hard coded values like width: 250px; , use max-width: 250px; instead. For better responsiveness using max-width: 15rem; would be better. Use rem especially for font size and media queries.

Images needs a meaningful alt texts, unless they are decorative. For this one something like "QR code to/of/for (idk, english hard :D) frontendmentor.io" might be better.

And for styling use classes instead of ids. Ids must be unique to one item, so you can't use same style on different places with id.
Marked as helpful

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