daking24 / qr-code-design

Frontend Mentor Challenge 001

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

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• HTML5
• CSS custom properties
• Flexbox
• Desktop-first workflow

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

In this challenge, I learned the art of centralizing cards using flexbox by justifying the content in the parent element and aligning items in the child element.

main {
  display: flex;
  justify-content: center;
}

child-element {
  display: flex;
  align-items: center;
}

Continued development

I would be working on using CSS variables in future projects and challenges.

Useful resources

• Dave Grey Tutorials - This helped me for building basics in CSS, Dave is an amazng tutor. I really liked his breakdown of CSS in his basic course.

Author

• Website - King David Ajayi
• Frontend Mentor - @daking24
• Twitter - @daking3968

Acknowledgments

Gratitude goes to Dave Grey for his tutorials and course outlines.