Submitted 2 months ago

hereisphil QR Code Challenge

Phillip Cantu•30

@hereisphil

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

Honestly, what I learned the most is that I really need to study and practice more on centering and the use of flex box.

For example my solution contains:

<body>
  <div class="wrapper">...</div>
</body>

and I'm uncertain if wrapping the entire page within a <div> element just apply the following CSS:

/* Center Content */
.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

is considered modern best practices. I'd love feedback on this. Secondly, I didn't apply any media queries for responsiveness because I found the site to be quite responsive already. Perhaps I didn't do enough testing? Please let me know.

Overall though, I am proud of my solution, especially with the fact that I didn't use ChatGPT at all 😆 I did have to play around a bit with the CSS and I only had to look up box-shadow properties.

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

Vertical + Horizontal Centering with CSS
CSS Box Shadow properties

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

CSS Please 🙏

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Phillip Cantu'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