ClaudiusAyadi / 01-QR-Code-Component-Frontendmentor

This is my first ever Frontendmentors challenge. It's a simple QR code card component, and I hope to keep doing more of such challenges.

Frontend Mentor - QR code component solution

This is my solution to the QR code component challenge on Frontend Mentor.

Frontend Mentor challenges help you improve your coding skills by building projects with real-world use cases.

Table of contents

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

Overview

The QR Code Component challenge is a beginner-friendly project and the first challenge recommended to me when I joined Frontend Mentor.

Simple as it is, it helps me re-evaluate my flexbox knowledge and the use of box shadow to create elevated-styled cards. It was a fast one filled with much fun too.

Screenshot

Links

• Solution URL: Source code on GitHub
• Live Site URL: See it in action on Netlify

My process

1. I downloaded the project and went through the README.md and style guide.
2. I went to create a directory for the new project inside the master repo.
3. Then laid out the component in HTML with appropriate classes based on the BEM.
4. style.css was next, where I designed the component and its parts using modern CSS properties.
5. I deleted the old README.md and updated the README.md template file to write down the process and other required information.
6. Added untracked files as I work, commit and push everything as needed.
7. Deployed to Netlify, updated the README.md with the project live URL, and submitted to Frontend Mentor.

Built with

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

What I learned

I learned to use the box-shadow property in this project. It was the main game changer for the card to pop out as it is.

Continued development

In the future, I'd love to use a grid instead of flex for the page layout and only use flexbox for the component items.

EDIT: I finally used `grid` for the page layout and `place-items: center` property. However, there's a new issue I'd like to solve. I want the footer to sit at the bottom of the screen. Is there a way I can place the item at the bottom of the grid?

I hope to master the grid and flexbox properties with some CSS animations. Down the road, I'm looking at having enough card components that I can use for different occassions.

Author

• Website - Claudius A.
• Frontend Mentor - @ClaudiusAyadi
• Twitter - @ClaudiusAyadi

Acknowledgments

Many thanks to the Frontend Mentor team for this beginner challenge. A big shoutout to xaviguasch from the #100devs Discord group who made me start this challenge series. Thanks, man!