Submitted 11 months ago

QR code component using HTML and CSS

Shree• 10

@Shree20010406

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

Hi my name is Shree(in short) i started practicing some JS projects like the basic one now i want to improve my JS and CSS skill

Mainly i'm weak at building responsive sites i want to learn how to use media queries correctly, please show me a way to improve my JS and responsiveness skills

Community feedback

Øystein Håberg• 9,450

@Islandstone89

Posted 11 months ago

Adding to the previous feedback. here are a few more tips:

HTML:

You're lacking a <main> element, which is important for accessibility. Change the .container from a div to a main.
The image needs alt text. This describes the content of the image for screen readers (as well as if the image doesn't load) and is another vital accessibility requirement. The text should be descriptive, and in this case, it should say where scanning the QR code takes you.
The heading should be a h1. Always do headings in the correct order.

CSS:

It's best practice to link to the fonts in the <head> of the HTML document, instead of importing it in CSS:
Make a habit of starting your stylesheet with a CSS Reset.
Remove all fixed widths and heights. Setting fixed dimensions is rarely a good idea.
Max-width should be in rem. By default, 1 rem equals to 16px.

Hitesh Prajapati• 260

@autistickyrios

Posted 11 months ago

First of all you should check your spacing around the content. The padding/margin around your QR Code is not the same on all four sides, the top side looks smaller than the other sides.

You pushed up the footer content. Simple fix is to move that "Challenge by, Coded by" part below your QR Code part.

The paragraph part of your text-paragraph section needs more padding around it. . And for media queries. Open your dev tools, switch to responsive mode and start lowering the width size, the moment you see your design getting broken, note that width size (in pixels) The best practice would be to use "em" on media queries, that is "XXpx divided by 16" (Example 400px/16 = 25em) set the media queries max-width to the value you get after dividing it and then starting breaking the design until it looks good to you. . All the best! lemme know if you have more confusions. (I am beginner too)

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