Frontend Mentor - QR code component

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.

The project is hosted live on Netlify

Table of contents

• Overview
• My process
  • Built with
  • What I learned
• Author

Overview

A simple single card component that displays the QR code.

Styles are built using vanilla CSS.

My process

1. Project set up
2. HTML
3. CSS

Built with

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

What I learned

• Centering the elements using CSS Flexbox properties within a container.
• Use 'rem' values instead of harcoded 'px' units
• The exact working of margins and paddings for an element.

Author

• Frontend Mentor profile - @Anand-Theertha
• LinkedIn - @Anand Theertha