Frontend Mentor | Qr Component coding challenge solution

@Stroudy

Posted 8 days ago

Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.
Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,
For future project, You could download and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts
Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.
Setting font-size: 62.5% can affect accessibility by reducing the default browser font size, potentially making text harder to read for users with visual impairments. This does make it easier to work out the relative units but at what cost?

You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

Øystein Håberg• 9,790

@Islandstone89

Posted 8 days ago

HTML:

Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section.
All images needs an alt attribute. If the image is decorative, the alt text should be empty:alt="". This image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."
"Improve your" is a heading, not a paragraph. I would make it a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

CSS:

Including a CSS Reset at the top is good practice.
Read this article to understand why you must not set font-size: 62.5% on the html.
I recommend adding 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.
On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.
Remove the width on body - it is a block element, meaning it takes up the full width ny default.
Remove all widths in %.
Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.
Paragraphs have a default value of font-weight: 400, so there is no need to declare it.
Move font-family to the body, and remove it elsewhere. The children of body will inherit the font.
On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.
As the design doesn't change, there is no need for any media queries. When you do need them, they should be in rem or em, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens.

Priince1• 10

@Priince1

Posted 8 days ago

Qr Component

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community