Frontend Mentor | QR code page using css flexbox coding challenge solution

@SabineEmden

Posted about 2 months ago

Hello there!👋 Good job on completing the challenge.

Here are some suggestions how you could improve your code:

HTLM: Major Issues

Add a <main> element to your code. This is very important for web accessibility. It allows users who use assistive technology to access the main content of the page faster. You don’t need an extra HTML element for this, simply replace <div class=“card”> with <main>.
Add an alt attribute with a descriptive text to the img element. This is very important for web accessibility. It provides fallback (alternate) text that is displayed if the image is not loaded. Most importantly, it is used by screen readers and other assistive technology for blind or visually impaired users.
Remove the <br> elements in the <h1> and <p> elements. The line break element is useful in a poem or an address, where the division of lines is significant. The problem you are trying to solve here is that the width of the heading and the paragraph doesn’t reach all the way to the padding of the card. That’s best solved with margins in your CSS.

HTML: Minor Improvements

Wrap <div class=“attribution”> in a <footer> element. The attribution does not belong inside <main>. It needs its own semantic HTML element.
Add a URL to <a href="#">Khamri Oussama</a>. If you don’t have a personal website, add a link to your Frontend Mentor profile.
Check the link to request the font from the Google Font API: <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Outfit:[email protected]&display=swap" rel="stylesheet">. It looks like you are requesting more than just the Outfit variable font.

CSS: Major Issues

Convert all values for font-size from px to rem. This is very important for web accessibility. It allows users who have selected a larger font size in the settings for their browser or their operating system to view your page with a larger font size.
Add max-width in rem to <div class=“white”>. This is needed for the design to work with larger fonts sizes.
Remove the width and hight from the <img> element. The image needs max-width: 100%. If you use a CSS reset (see below), that’s already included there.
Add color attributes to the <body> and <h1> elements to change the font to the colors that are specified in the style guide. This is important for following the provided design.
Add the margins I mentioned above to the <h1> and <p> elements.

CSS: Minor Improvements

Move the CSS code to a separate style sheet.
Add a modern CSS reset to the top of your style sheet. I like the one by Josh Comeau. Andy Bell has another good one.
Move the style rules for the attribution in the footer of the page to the end of your CSS code. In your style sheet, start with the style rules that apply to the whole page. (That includes the CSS reset.) Then work your way from the top to the bottom on the page.
Move font-family, font-size, and font-weight from the <p> element to the <body> element and remove font-family from the <h1> element.
Choose one color format - hexadecimal or hsl() - and use it consistently in your code.
Add some padding to the <body> element.
Check whether you really need display: flex; with flex-direction, justify-content, and align-items on <div class=“white”>. The <div> contains an image, a heading, and a paragraph. All three are block elements and should stack in a column by default.
Use px or rem for border-radius.
Move text-align: center to <div class=“white"> to reduce repetition in your code.
Use selectors with a higher specificity for the <h1> and <p> elements, like .white h1 and .white p. This will make it easier to use the component within a larger project.

I hope this helps. Let me know if you have any questions.

Happy coding! 😎

QR code page using css flexbox