Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR-Code component solution using semantic HTML and CSS Flexbox

@LuisGonzH94

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@Mr-Funderburk

Posted

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

@LuisGonzH94

Posted

@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

@Mr-Funderburk

Posted

@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

@LuisGonzH94

Posted

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

Log in with GitHub
Discord logo

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