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.
Your challenge is to build out this QR code component and get it looking as close to the design as possible.
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
I learned how to make a custom card component for a qr-code. In the process I worked some more with flexbox to help centering and aligning the components. I also experimented a bit with the box-shadow css component till I was satisfied with the look.
The next small projects I will work on will also be HTML/CSS beginner Challenges from frontendmentor to become more comfortable with writing HTML/CSS. I especially want to learn more about layout. After I learned more about flexbox and grid and collected more html/css knowledge on the way I will move on to learn Bootstrap as a framework for web development and also tackle javascript. After learning the basics of those more challenges will follow. Once I am more confident in my Frontend abilities I will start learning about the Backend. I am in for a long but most likely awesome journey!
- CSS-Tricks Flexbox Guide - This helped me a lot with understanding the basics of using Flexbox layout. Gonna come back to this one for my next projects aswell till I am really good at using it.
- MDN Webdocs - This one is always great to search for things I dont remember anymore or when I dont know how to use a property. The tutorials are pretty good aswell.
- Stackoverflow - We know it, we love it. Always helps you out when you get really stuck on a problem and need a hint on how to progress. When you have a problem, somebody probably had it aswell and asked for help on the internet.
- Frontend Mentor - @DeveloperDwarf