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

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

Screenshot

Links

• Solution URL: (https://www.frontendmentor.io/solutions/qr-code-component-uGr2VDqteK)
• Live Site URL: (https://dz-qr-code-component.vercel.app/)

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Logical properties

What I learned

With this challenge I refresh my knowledge with:

• CSS Custom Properties how to use and naming them;
• Flexbox;
• how to use element;
• how to use @import to import the font from Google Fonts;
• work with modern CSS Logical Properties and Relative Units;
• Fluid Typography.

  .card {
      display: flex;
      flex-direction: column;
      max-width: 20rem;
      margin-inline: auto;
      background: var(--clr-cardBG);
      padding: 1em;
      border-radius: 20px;
      text-align: center;
  }

Continued development

For the future projects I want to continue focusing on CSS Grid, Container Queries, JavaScript and HTML/CSS in general to become more confident with my knowledge

Author

• Frontend Mentor - @dedo-dev
• Linkedin - @daniele-zeppieri