Submitted over 1 year ago

QR code component with Flexbox

Mounir Dekali• 60

@starman1999

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I had to get back to an easier challenge to master the basics of Flexbox. feel free to comment on anything you find wrong about my solution.

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted over 1 year ago

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

HTML 🏷️:

Wrap the page's whole main content in the <main> tag.

Alt text 📷:

The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

If you want to learn more about the alt attribute, you can read this article. 📘.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

Mounir Dekali• 60

@starman1999

Posted over 1 year ago

@MelvinAguilar Thanks a bunch for taking the time to review the project, it means a lot to me. I just checked the article and learned a lot. I actually underestimated Html a little, as an experienced developer in this field, could you please suggest a solid course that covers all the necessary Html notions? thanks

Hassia Issah• 50,670

@Hassiai

Posted over 1 year ago

Replace <div class="card-container"> with the main tag and <h2> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

Give the img a max-width of 100% for a responsive image.

Give .card-text a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Mounir Dekali• 60

@starman1999

Posted over 1 year ago

@Hassiai thank you so much, but I still don't understand certain stuff:

max-width property seems not to change anything about the responsiveness, is it somehow inheritable from the card-container or something?
the margin value for all sides for .card-text seem redundant? because I already specified *{margin:0} in the css reset file. thanks again for your valuable time.

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