Skip to content
Submitted over 2 years ago

CSS Grid and Flex QR Component

Zana Hicks•30
@Hickszn
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'm used to adding a link for the font-family with a preconnect to the head section of my index.html but I recently saw that you can just add an import URL to the top of the CSS file. Am I understanding that correctly and is there a best practice?

I'm also used to using html { font-size: 62.5%;} but someone recently told me not to do that. Can anyone explain why? I learned from Mosh Hamedani that it makes calculating the font size easier because this way 1 rem = 10 px.

Code

Please log in to post a comment

Log in

Community feedback

  • Florian Stăncioiu•710
    @florianstancioiu

    Hi Zana,

    I personally like to use the <link> tag in the head section to request the fonts, I don't like my CSS file to trigger any requests instead I want to see them all in one place, in HTML, I think it's more intuitive this way, but there isn't a best practice regarding this, you can do as you like.

    As for rem, I also use html { font-size: 62.5%; }, I recently discovered it on my own (even though I have years of development behind me...). I think it's an awesome way of creating UIs and making them accessible while retaining developer friendliness. Where did you saw that rem shouldn't be used? I want to learn more about this too.

    Kindly, Florian

    Marked as helpful

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