Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 10 months ago

Page for a QR code using CSS flexbox

Jeff Hensley•80
@jeff-hensley
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

So this was technically my first unguided project using HTML and CSS. I am brand spanking new to web development and any type of coding/programming in general and learning HTML and CSS have been my first steps. I have been using freeCodeCamp to learn so far and have applied what I learned to this project. I learned the hard way how hard it is to recall the information I learned when it is unguided like in the lessons.

I am really proud of my self for being able to solve the problems I ran into and actually make what was asked. I have never done anything like that before and it was really satisfying to sit back and look at it and go, "Well damn if that doesn't look like what they asked for". I am excited to keep going.

What challenges did you encounter, and how did you overcome them?

Firstly, figuring out how to parse out the elements neatly was a real challenge for me. I seemed to over use (or maybe under use?) the <div> elements in the HTML. But once I figured out how to make it neater it made the styling part a lot easier.

The CSS was a totally different story. I could not for the life of me figure out what i was doing with the positioning and figuring out how to get the the QR code image to sit in the center relative to the text was tough. The text kept getting in the way and was confusing me and it wasn't until I styled the text that everything snapped to the center (which made me crazy because I was sitting there pulling my hair out trying to figure out why the image was staying to the left). Also, figuring out how to get the white square centered and behind the image was super confusing as well. I need to do more reading up on flexbox and positioning in CSS.

Once I got everything relatively where I wanted it I was able to start styling pretty easily. The way I did it probably could have been done simpler but everything was where I wanted it to be so I was happy.

Also google and chatgpt were my friends :D

What specific areas of your project would you like help with?

To be honest I wouldn't know what to ask. Understanding how to move stuff around the page with flex box and the difference between relative and absolute positioning or how flexbox applies to other elements is what I need to get more information on my self.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Jeff Hensley's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License