Submitted 11 months ago

QR code component with HTML and CSS

julian• 220

@lspacka

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

I must say, CSS and especially responsive design are still my weakest points. any feedback on improving on these areas would be most appreciated, or just any feedback in general. Thanks!

Community feedback

_nehal💎• 6,710

@NehalSahu8055

Posted 11 months ago

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

Remove margins and add min-height:100vh to your .qr-container to dynamically center the card.
Every site must have one h1 element describing the main content of the page.
So, Add a level-one heading
<h1>Improve you frontend skills by building projects</h1>
Use Semantics for the proper design of your code.

<body>
<main>... main content goes here ...</main>
<footer>... .attribution div goes here ... </footer>
</body>

For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".
Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

I hope you find this helpful.

Happy coding😄

Marked as helpful

julian• 220

@lspacka

Posted 11 months ago

@NehalSahu8055

Hey thanks for your help! good pointers on semantic html, I often overlook its importance.

Øystein Håberg• 9,450

@Islandstone89

Posted 11 months ago

Some good suggestions above, here are a few more:

HTML

The alt text should tell where the QR code leads, as this is important information. Also, don't use the word "image", as screen readers will automatically announce the <img> as an image.

CSS:

You need a bigger CSS Reset, I recommend this one from Andy Bell.
Performance-wise, it's best to link the fonts in the <head> of your HTML, instead of importing it in CSS.
Font-size should be in rem instead of px.
Max-width on the card should also be in rem.
Remove the margin: 0 auto on the main, and add justify-content: center on the body. The result will be the same as it was, but it's more efficient to let Flexbox do the centering vertically AND horizontally.

Good luck :)

Marked as helpful

julian• 220

@lspacka

Posted 11 months ago

@Islandstone89

Thank you! really appreciate it 🙏

Øystein Håberg• 9,450

@Islandstone89

Posted 11 months ago

@lspacka my pleasure 🙂

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