Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0xabdulkhaliq/qr-code-component
This is solution to the QR code component challenge on Frontend Mentor
https://github.com/0xabdulkhaliq/qr-code-component
css css3 front-end frontend frontend-mentor frontendmentor html html5
Last synced: 3 months ago
JSON representation
This is solution to the QR code component challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/0xabdulkhaliq/qr-code-component
- Owner: 0xabdulkhaliq
- Created: 2022-11-08T02:25:15.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-01T03:27:04.000Z (over 1 year ago)
- Last Synced: 2024-08-14T03:38:15.104Z (6 months ago)
- Topics: css, css3, front-end, frontend, frontend-mentor, frontendmentor, html, html5
- Language: CSS
- Homepage: https://0xabdulkhalid.github.io/qr-code-component/
- Size: 199 KB
- Stars: 1
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## **Preview**
![]()
## **Links**
- Solution URL: [QR Code Component 🎯 [ SEMANTIC MARKUP + VANILLA CSS + BEM ]](https://www.frontendmentor.io/solutions/qr-code-component-but-slightly-tweaked-with-creativity-sG0vtRwcp5)
- Live Site URL: [https://0xabdulkhalid.github.io/qr-code-component/](https://0xabdulkhalid.github.io/qr-code-component/)## **Built With**
- 
- 
## **Tools Used**
- 
- 
- 
- 
## **Outcome**
* Used HTML5 **semantic elements** for better readability and structure
* Used CSS3's **flex** property to manage layout
* Used **Git** and **GitHub** for project management
* Tried to maintain **clean code**
* Used **media queries** for responsive design
* **Cross tested** on Firefox and Chromium based browsers
## **What I learned**
* Learned to set CSS **custom properties**
* Learned to use **Flexbox** effectively
* A lot of minor things
## **Acknowledgment**
* Inspiration by [Frontend Mentor](https://www.frontendmentor.io)
## **Let's Connect 👋**