Submitted about 1 year ago

QR-Code component solution using semantic HTML and CSS Flexbox

Luis H. Gonz.•20

@LuisGonzH94

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I started over with the purpose of keep to practice this simple challenge. I still need to learn the measurements such as rem or em, vw and vh. Also, I need to learn when to use min or max-width and min or max-height. The qr-code challenge may not look perfect, but this new updated html and css structure look better.

Community feedback

Stephen Funderburk•180
@Mr-FunderburkPosted about 1 year ago
Good attempt! I see just a couple of things that need to be addressed.

First, and most importantly, your QR code image is broken. This is being caused by your src attribute having a forward slash at the beginning of the URL on line 36: <img src="/images/image-qr-code.png" alt="QR code"> Removing the first forward slash like this should get the image back. <img src="images/image-qr-code.png" alt="QR code">

With this layout, I don't think you need the media query. It was designed to be the size of a mobile from the beginning. By using the query in the way you have it causes unintended effects when viewed full screen.

I like your use of CSS variables to keep your code clean and easier to update!
Marked as helpful
0
Luis H. Gonz.•20
@LuisGonzH94Posted about 1 year ago
@Mr-Funderburk Thank you very much for the feedback.

With these fixes, do I have to resubmit it on the frontend mentor website as a new solution, or will this not be necessary as this will be a learning experience?

as for the media query, I was hesitating whether to implement it or not. It is now clear that I didn't need it.

Again, I sincerely appreciate your comments.
1
Stephen Funderburk•180
@Mr-FunderburkPosted about 1 year ago
@LuisGonzH94 For the experience, I would update your code and re-up it to GitHub. I don't believe you have to resubmit here or anything. There is a button to create a new screenshot, I would do that so you have the QR code in there.

Just remember this is a place of challenge and learning. So ultimately it's what you get out of it that's important. Keep up the good work and looking forward to seeing more of your posts!
Marked as helpful
0
Luis H. Gonz.•20
@LuisGonzH94Posted about 1 year ago
Made the proper modifications thanks to you @Mr-Funderburk ! My solution might not look as center as the design, but I'm okay with my progress on this challenge.

Up to the next one now 😁.
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