Frontend Mentor - QR code component solution

Table of contents

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

Overview

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.

Links

• Solution URL: (https://github.com/owocoded/QR-code.git)
• Live Site URL: (https://owocoded.github.io/QR-code/)m)

My process

I complete the solution to the challenge using HTML and CSS, it was initial hard to decode for me majorly when I need the style the QR code using margin or padding to position the image in the div, I use only one div for all the solution, and include the font(Outfit) by adding the link to the google font so that any browser can easily download the font fron font.google.com.

Built with

• Semantic HTML5 markup
• CSS custom properties

What I learned

When creating the solution to this challenge I find out more practical difference between using a margin and padding to position your element in a div, also the different between using a font size in the body and in a paragraph

Continued development

on the use of margin and padding.

Author

• Website - Yusuf Babatunde (Nature)
• Frontend Mentor - @owocoded
• Twitter - @owocoded