Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help one improve their coding skills by building real projects.

Table of contents

• Overview
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

• Overall I think this is a pretty interesting project, something a beginner-level developer can use to get their hands dirty with some code, and test how much one really knows and is capable of, this project only requires that you know HTML, CSS, and responsive design (responsive design is basically CSS nothing too serious a quick google search and you'll see).

Links

• Solution URL: Github(QR solution)
• Live Site URL: Qr-Code

My process

• First off I got all the materials I needed i.e (HTML markup, a style.md guide for picking out the same colors and styling, the images, and the design overview of the challenge) from the (https://frontendmentor.io) website, then I uploaded the skeleton materials to a new github repository I'd just opened, afterwards I began to edit the markdown files and customize it to my taste, then I began with the main work, added classes to the HTML, did some styling and voila. (Made a lot of mistakes initially lol, but what is coding without errors, right?). I hope everybody who tries this has as much fun as I did with it (again I'll skip the how much it frustrated me part lol again(crying emoji, laughing emoji) )

Built with

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

What I learned

• It's my first time working with markdown files so this challenge made me understand what markdown files are and why so many developers use it and how to use it.

• The challenge caused me know more about basically ( how to create better and professional looking layouts) i.e flexbox and grid although specifically Grid, because I have above intermediate understanding of flexbox already.

Continued development

• I will improve on my understanding of CSS layouts and see if there are any more fun things I can add to my projects to make it just a little more awesomeeee ( a little Kevin Powell reference here )

Useful resources

• Getting the grasp and basic concept of markdown - This helped me understand what markdown is and how to write pretty interesting markdowns

• Understanding Layouts - This is an amazing resource that I have been using before now to improve my CSS, I'd recommend it to anyone still learning this concept or anything CSS-like. And of course, there are many of them perhaps too many to put in one short markdown write up but I feel this would be more than enough to get started, plus I think Kevin's the best (probably a bit biased judgement but yen yen yen )

Author

• Website - LENI4C