Submitted 6 months ago

QR Code Component Exercise HTML/CSS

Wuffskyarts•60

@Wuffskyarts

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

During this challenge, I learned that a parent flex box could not be centred. However, I also learned that you could center a child flex box inside a parent flexbox to create a centred box along the vw/vh.

I enjoyed the simplicity yet the challenge of figuring out this exercise.

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

It took about three hours of playing with Bootstrap and CSS before I realized I needed a flex-parent and then a flex-child to center.

I also never knew I could 100vh the parent and justify/align the flex-child.

I also wanted to try to do this in Bootstrap but couldn't. I'm finding HTML/CSS easier than Bootstrap.

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

I'd love to learn more about Bootstrap! While it's great for certain areas of a website, I also find CSS easier in other areas. If possible, I'd love to figure out a way to combine the two, as Bootstrap buttons are easier to configure.

Community feedback

midnightwebstudios•40
@midnightwebstudiosPosted 6 months ago
Honestly, you did a pretty fantastic job. The only constructive criticism I have is to look closely at design specs including font colors. I think that's the only thing you missed. I can't really help much with bootstrap as I'm not familiar with it yet, but I can make a suggestion: Udemy.com has some great inexpensive options for video courses for bootstrap. Many are very specific. You may be able to find what you're looking for there and creating an account is free. If you see a course that you consider too expensive, add it to your wishlist and let it sit for a few days. They have sales all the time where they dramatically reduce prices for their courses. Hope this helps.
Marked as helpful
1
Wuffskyarts•60
@WuffskyartsPosted 6 months ago
@midnightwebstudios Thank you very much! I noticed after submitting that I forgot to add the colour styles. I made an update, but Github was being weird.

I recently went to a Graphic Design Industry night to network with some people in the industry. They mentioned looking at Tailwind and a backend language, as Bootstrap seems to be going out of style. I will look into some e-courses on Tailwind!

Thank you for the kind feedback :)
0

Please log in to post a comment

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