https://github.com/blordeus/qr-code-component
An introductory coding challenge that involves basic HTML and responsive web design using CSS Flexbox. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
https://github.com/blordeus/qr-code-component
Last synced: about 1 month ago
JSON representation
An introductory coding challenge that involves basic HTML and responsive web design using CSS Flexbox. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Host: GitHub
- URL: https://github.com/blordeus/qr-code-component
- Owner: blordeus
- Created: 2023-05-15T02:16:02.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-16T01:37:30.000Z (about 3 years ago)
- Last Synced: 2025-02-27T07:59:25.936Z (over 1 year ago)
- Language: CSS
- Size: 372 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 a 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 realistic projects.
## 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)
* [Useful resources](#useful-resources)
* [Author](#author)
## Overview
### Screenshot
### Links
* Solution URL: [Add solution URL here](https://your-solution-url.com)
* Live Site URL: [Add live site URL here](https://your-live-site-url.com)
## My process
### Built with
* Semantic HTML5 markup
* CSS
* CSS Flexbox
### What I learned
I learned how to better implement CSS Flexbox into my projects. This helped organize the parent and child elements.
``` css
.qrsection {
background-color: white;
display: flex;
padding: 4% 2%;
flex-direction: column;
flex-wrap: wrap;
border-radius: 10px;
margin: auto;
justify-content: center;
align-items: center;
}
```
### Continued development
I want to continue developing my JavaScript skills and frameworks such as React and Vue. I also want to refine my HTML and CSS skills so I can continue to grow as a front-end developer.
### Useful resources
* [CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) \- This website helped me better understand how CSS flexbox works and provided examples on how to use it in certain situations\.
## Author
* Frontend Mentor - [@blordeus](https://www.frontendmentor.io/profile/blordeus)
* Twitter - [@bryancreates](https://www.twitter.com/bryancreates)