Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR-Code Challenge Solution

LENI4C 130

@LENI4C

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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.

  • 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).
  • 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) )
  • Semantic HTML5 markup
  • CSS custom properties
  • CSS variables
  • CSS Grid
  • Mobile-first workflow
  • 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.

  • 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 )
  • 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 )

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord