Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties (such as variables, I didn't used it before! What a discover!)
• Flexbox
• Mobile-first workflow (well, the design is exactly the same for this project)
• React, nope. NextJs, not yet, maybe soon!

What I learned

I'm so proud about my CSS. For sure, it's not perfect and correctly refactored, but it's a good re-birth!

I forgot that we can calculate directly in CSS.

  width: calc(320px - var(--padding)*2);

It's a game changer for me.

Continued development

It would be great to refactor the CSS or re-organise some HTML tags.

Useful resources

• W3Schools Lessons : It's still a GOLDMINE to find a forgot command.
• [ChatGPT] : I didn't know we could calculate and create variables in modern CSS.

Author

• Website - girone-remi.fr (WIP)
• Frontend Mentor - @gironeremi
• Instagram - [@girone.remi]