Design comparison
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
- @Islandstone89Posted about 1 year 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.
1 -
- @autistickyriosPosted about 1 year 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)
1
Please log in to post a comment
Log in with GitHub
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