https://github.com/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.
https://github.com/claudiusayadi/01-qr-code-component-frontendmentor
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/claudiusayadi/01-qr-code-component-frontendmentor
- Owner: ClaudiusAyadi
- Created: 2023-02-28T13:31:38.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-04-24T14:58:15.000Z (about 2 years ago)
- Last Synced: 2024-12-31T03:27:55.706Z (5 months ago)
- Language: CSS
- Homepage: https://qr-code-dovely.netlify.app/
- Size: 452 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - QR code component solution
This is my solution to the [QR code component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H).
Frontend Mentor challenges help you improve your coding skills by building projects with real-world use cases.
## Table of contents
- [Overview](#overview)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Author](#author)
- [Acknowledgments](#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](https://github.com/ClaudiusAyadi/01.-QR-Code-Component)
- Live Site URL: [See it in action on Netlify](https://qr-code-dovely.netlify.app/)
## 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.](https://github.com/ClaudiusAyadi)
- Frontend Mentor - [@ClaudiusAyadi](https://www.frontendmentor.io/profile/ClaudiusAyadi)
- Twitter - [@ClaudiusAyadi](https://twitter.com/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!