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.

Table of contents

• Frontend Mentor - QR code component solution
  • Table of contents
  • Overview
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author

Overview

Screenshot

Links

• Solution URL: QR-code-component
• Live Site URL: QR-code-component

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS at-rules
• CSS flex shorthand property

What I learned

A bit of semantics, I guess.

<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>

Probably wasn't necessary, but I'd assume it'd be quite handy when working on bigger projects in the future.

:root {
  --clr-div: hsl(0, 0%, 100%);
  --clr-body: hsl(212, 45%, 89%);
  --clr-paragraph: hsl(216, 15%, 48%);
  --clr-header: hsl(218, 44%, 22%);
}

Wasn't sure wether or not to use, but found out about this specific at-rule when looking up how to work with fonts and found it really neat.

@font-face {
  font-family: 'Outfit';
  src: url(font/Outfit-VariableFont_wght.woff2) format('woff2-variations');
  font-weight: 100 900;
}

Continued development

Just a general improvement of the basics for now.

Focus more on HTML semantics in the future. Not only to help search engines and screen readers, but also myself - it's just so much more pleasent to look at than staring at 10 layers of divs.

Just learn more about CSS intricacies, its best practices.

Useful resources

• MDN - The best free resource to learn about basics out there
• stackoverflow - A bunch of solutions to your problems have already been implemented (shouldn't rely on it too much, I guess)

Author

• Frontend Mentor - @maneki-kakutasu
• Twitter - @maneki_kakutasu