Submitted almost 2 years ago

responsive qr-code-component-main using css flex

Matheus Moreno• 220

@matheusmorenocf

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 would like to know if my code for this project could be cleaner

Community feedback

Lucas 👾• 104,420

@correlucas

Posted almost 2 years ago

👾Hi @matheusmorenocf, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

1.Replace the <h2> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.

2.Add the alt text to improve accessibility.The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of a slow connection, an error in the src attribute, or if the user uses a screen reader). ---> <img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor">

3.Add the box shadow to stylize the card: box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);

4.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

5.Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.

✌️ I hope this helps you and happy coding!

Kawsar Ahmed Fahad• 2,680

@faha1999

Posted almost 2 years ago

Hello, Matheus Moreno Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

You might want to use semantic tags like the <main> to wrap your code, instead of div. like

<main>
<div class="container-card"></div>
<div class="attribution"></div>
</main>

This would help improve accessibility.

Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem
add min-height: 100vh; to the body

I hope it will work. Happy coding.

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

Hey @matheusmorenocf, great job on this project!

Some suggestions to improve you code:

For accessibility purposes, it’s best to use rem/em instead of px for your CSS property values.
To make your content fully responsive, change your height to min-height in your <body> element>.

Happy Coding!

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