Submitted over 1 year ago

Qr component challenge

Cesar D.•400

@ThatDevDiaz

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I came across a few challenges when creating this.

The images and text within the container are occupying the entire flex box. Every time I tried creating another flex box for the container to be in, it would mess everything up. the reason for doing this is so I can create the gaps between the image/text and the outer border.

Another challenge I faced was making the image stay a static size. It grows with the page so when I coded the original flex box it looked as intended until re-sizing the screen. It's way bigger than originally designed and I can't figure out how to keep it a static size without messing up all the content within the flexbox.

I tried getting the live site via GitHub desktop but the image would not upload in GitHub. Every time I tried adding the image it seems that the img would not actually import into the html even though I've added it to the repository. Maybe it's a directory issue and I didn't add a full directory for the image? Not sure.

Any advice on the code or better practice adjustments would be greatly appreciated.

*Edit

After receiving feedback from a community member, I was able to apply new found knowledge and techniques to get my project to further resemble the original design. This was a great learning experience and I feel like I understand flex box a lot better. This also helped me dive a little bit further into using Github properly and linking things within Github's repository.

Community feedback

p1ktas•30
@p1ktasPosted over 1 year ago
Hey! I've just finished this challenge myself and can help you a bit. In my newbie eyes your HTML is okay-ish, you can fix it by:

Adding a ">" symbol at the of end of style.css link;

Adding QR image to your qr-code directory and linking to your html by using "./" like so: <img src="./image-qr-code.png" alt="QR code">, dont forget to add "alt" info!.

I also recommend using <h1> instead of <h2>, as every page should have an <h1> tag.

As for CSS, this should help you get a better grasp:

Keep your html {} and body {} properties intact, they're ok, everything going down should probably be written from scratch. Also, read into it style-guide.md carefully a few times and fulfill all given tasks!

Import a given font, apply it globally.

Make your .container {} a flex-container and set it's width. I prefer using rem or px.This should fix your image resizing with the page and place it neatly inside your .container {}.

Make your flex-items stack from top to bottom! Read more about it here.

Add backround-color, border-radius and padding on all sides to your .container {}.

Make all the other needed changes as you go.

This should point you into the right direction and hopefully, help you finish your project! :)
Marked as helpful
0
Cesar D.•400
@ThatDevDiazPosted over 1 year ago
@p1ktas This was incredibly helpful. Thank you!
0
Cesar D.•400
@ThatDevDiazPosted over 1 year ago
@p1ktas Went back into VSCode and applied all of these changes. Not only did I better understand the flexbox situation (I had just learned it, so putting it into application was kind of confusing me) but I also got a better understanding of how important it is to not skim over any details on, say, a style sheet. Thanks a lot. It looks way closer to the original and I was able to get the github files to link by just copying the path directly from the repository. I would thumbs up twice if I could.
1

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