QR-code-component-main

Hey @wallace-bc,

You did a great job on your first coding project. One step closer to getting better at coding. That is a giant step and I applaud you for that.

First and foremost you can keep for hsl colors the root pseudo-class

Here's an example:

:root {
    --white: hsl(0, 0%, 100%);
    --light-gray: hsl(212, 45%, 89%);
    --grayish-blue: hsl(220, 15%, 55%);
    --dark-blue: hsl(218, 44%, 22%);
}

You can even keep your fonts organized with @font-face

@font-face {
     font-family: "Outfit", sans-serif;
     src: url(./assets/fonts/Outfit.ttf);
}

Here are some links to help you understand the root pseudo-class and font-face class

Root Pseudo Class Link

Font-Face Link

Hope this helps

Happy Coding*

Hi, @wallace-bc

Congrats for completing this challenge🎉 and Great work👏

Always recommend to use rem, what problem happens in pixels is, like your browser define px=14 and different users have different pixel value has set by default in his/her browser. For example, if you give width of any element: 20px. In your device that element width will be displaying okay, others users will see your element width in different size because they define different pixels by default in their browser, that's why pixel is not recommendable to use and it also gives absolute sizing, like when you go from larger screen to smaller screen, your size of element will shown as same as in the larger screen, So you can say it is static also.. In the case of rem, it is relative to the documents root element, like somebody give it's root element value 16px and somebody give root element value 14px. So, in both cases rem will be 1, so according root element rem will adjust it's sizing and because of that, when you go from larger to smaller screen or vice versa, it's size will automatically changed, it changes it's behaviour according to screen sizes and due to its dynamic behaviour, giving flexibility of the font size of element in different screen sizes, that's why many developer, designer is recommend rem.

And percentage can be used, to scale your elements relative to the parent container. Like, if you given 8 rem to your Heading and you want your subheading will be half or quarter size, so in that case you percentage will play great role or can be said significant role. It is choiceable, but I would recommend to use mainly rem(or em in child element). So, percentage should be used very less in development. But, it also play a important role in responsiveness.

Hope, very much things will be clear to you, and if you practically implement then things will be clear to you, just have to regular work, practice on it. Basics always play a crucial role.

Welcome to Frontend Mentor, wishing you a joyful journey ahead and happy coding ❤️