QR Code Component using HTML and CSS

Hey @francoisbillet,

Congrats on solving this challenge! It's great that you want to develop good programming habits, you are definitely on the right track :-)

Let me try to answer your questions:

Is it recommended to use a <div> here or a semantic element like <section> ?

Semantic HTML elements always win. As you can see in your code report, you have some accessibility issues because no main landmark has been found. To fix this, replace <div class="component"> with a <main class="component">. Every webpage should have a main landmark, which marks the most important content for search engines, screen readers, and others. There's no need for a section, but for more complex layouts with more content (like blog posts, sidebars, and more), these sure come in handy.

Is there a good practice for naming classes ?

There's no standard, and different people like different naming methodologies. I like to keep my classes simple, e.g. .container, .button-group, .page-title, etc. With CSS, maintainability and good naming are always issues, especially with larger codebases. That's why there are different approaches, like BEM, Atomic CSS, or RSCSS. Have a look at them (and others) and decide for yourself what you like the most, it's your choice.

• https://ricostacruz.com/rscss/
• https://tailwindcss.com/ (Atomic CSS)
• https://getbem.com/introduction/

Is there a good practice for naming custom properties ?

Same as with CSS, it comes down to preference. I like to prefix my variables, for example color variables are called --color-white or --color-primary, while typography variables start with --ff for font family or --fs for font size. But other than that, it's up to you.

How can I center my <div> vertically without adding a manual margin/padding or using flexbox/grid ?

That's pretty easy nowadays thanks to CSS Grid:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

You can remove the margin that you have on the card div and the body itself, they are no longer needed. min-height is needed to make your page as big as your browser is, so that the component is always nicely centered horizontally. Without that line, the component would be stuck at the top.

I'm a little lost with all the available units out there. Which units (px, rem, %, vh/vw, ch, etc.) should I use for which purposes (spacing such as padding/margin or line-height, sizing blocks or images, sizing fonts, etc.) ?

That's a big topic, and there are countless articles, YouTube videos, and comments trying to explain it :D I can only recommend Kevin Powell's video on YouTube, trying to explain which unit to pick: https://www.youtube.com/watch?v=N5wpD9Ov_To His other content is also amazing if you want to learn more about web development.

In this QR code component, what's the most recommended way to handle spacing around the title and paragraph ? Should I use margin on each one (<h1> and <p>) ? Or padding on each one ? Or rather margin (or padding) on the <div> element englobing these 2 elements ?

Whenever you need some distance between elements, margin is the way to go. padding is useful if you want to give your elements breathing room by making them bigger. In this case, I would apply a margin-top and margin-bottom to the heading and try to balance things out. Since there's no content after the paragraph, you don't need to set any margin on it. But be aware that headings and paragraphs have some default margin, so you might have to reset it in order to see the desired effect.

I hope my answers helped you, feel free to reach out if you have further questions. Happy coding! :-)

👾Hello @francoisbillet, Congratulations on completing this challenge!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

Your solution is great and the code is working, but the HTML structure can be reduced by removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading, and paragraph.

Here’s one example to show can be cleaner this HTML structure:

<body>
<main>
<img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor" >
 <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>

To reduce the CSS you can use the direct selector for each element instead of using class this way you have a code even cleaner, for example, you can select everything using the direct selector for (img, h1, and p, main).

✌️ I hope this helps you and happy coding!