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

Screenshot

Links

• Solution URL: Github repo
• Live Site URL: Vercel deployment

My process

• First examined the design images to understand the layout and the pieces of the card. I concluded it was a very basic page requiring just HTML and CSS, no need of Javascript or a framework
• I added all necessary content to the HTML file
• Finally started styling, starting from the root with resets, then body with the given font family, background color and font size then finally the card itself

Built with

• Semantic HTML5 markup
• SASS
• CSS Grid
• Mobile-first workflow

What I learned

• I better understood how to calculate inner border radius with this challenge.

Continued development

• The box shadow

Author

• Website - Obaloluwa Olusoji
• Frontend Mentor - @obah