@correlucas
Posted
👾Hello Ron, Congratulations on completing this challenge!
I’ve few suggestions to you that you can consider to add to your code:
1.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.
2.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.
3.To maintain the card responsive use max-width instead of width this way you allow the content to be flexible. The difference between max-width and width is that width is fixed and max-width have a maximum size but can shrink to fit the content.
4.Your html code is not optimized yet, since its too long and have some unnecessary elements. To make it clean you start by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.
<body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>
✌️ I hope this helps you and happy coding!
Marked as helpful
@ron-wollschlaeger
Posted
@correlucas Thanks a lot for your quick response. It feels like you are just waiting behind the corner for people to help. Thanks a lot.
-
Do you use em rem for everything or just for fonts? When do you use px? Only for things like margin or paddings? And how about the other units?
-
That's a good idea. I will do this for my next challenge.
-
Good explanation, I will keep that in mind.
-
Ok, so I overcomplicated things again. When do you think it makes sense to wrap something in a div?
Last thing from me: What do you think about my question about commenting?
Thank you
@correlucas
Posted
@pxMahio I often code my whole solution using px and the convert in the end to rem. I select all my code and then use a plugin in VSCODE to convert, https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem
I don't use much other units, few times I use percentage, but when I need to divide some elements in equal parts I prefer to build it with GRID
You can use divs when by force you need a group of elements with a different alignment or position for the other elements, for example using flexbox with flex-direction: column. In the next challenges you'll situations like that.
About commenting a think is an amazing idea, in special when you have a huge amount of sections this way you can separate the code visually with the comments
Marked as helpful
@ron-wollschlaeger
Posted
@correlucas This px - rem plugin is awesome! I will give it a try on my next challenge. Thanks for your input! :)
