Skip to content
Submitted about 1 month ago

QR code - my first frontend mentor challenge.

Victor Elgersma•40
@victorelgersma
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I actually followed a tutorial to do this as I got quite stuck trying to get the card styling to work. So I am most proud of the fact I finished it to begin with. That said, I am most proud of the variables calculation I used to make sure that the relationship between the inner and outer radius is fixed, no matter what the padding is (i.e I set it up so that you can only independently vary the inner radius and the padding -the outer radius is always calculated for you).

Quite happy with the organisation, especially that I am defining variables for the colors at the top of the CSS file.

What challenges did you encounter, and how did you overcome them?

Couldn't figure out the right markup for it. Watched a tutorial to finish it.

What specific areas of your project would you like help with?

Am I following best practices by defining variables on the :root CSS element?

Code

Please log in to post a comment

Log in

Community feedback

  • Elmar Chavez•580
    @CodingWithJiro

    Yes you are following best practices using CSS variables. I use this technique as well since changing one thing to apply to several elements is a big help if working on bigger projects.

    One note though, you can capitalize all the letters in your variable name so its easier for other developers when looking at your code.

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