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
  • Useful resources
• Author
• Acknowledgments

Overview

A solution for QR Code Component

Screenshot

Links

My process

This project was developed with HTML5 and CSS basics.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

This exercise was helpful to understand the concepts, use and correct application of flexbox on a nested containers (divs). I also started to learn how to configure the padding for each container to aim at a pixel perfect design.

Continued development

I still have to improve the responsive design, perhaps that is the principal problem of the this solution. And my CSS coding, obviously.

Useful resources

• (https://www.freecodecamp.org/espanol/news/como-centrar-cualquier-cosa-en-css-usando-flexbox-y-grid/) This article help me to better understanding and use of flexbox rules.

Author

• Frontend Mentor - @jcifu
• GitHub - @jcifu

Acknowledgments