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
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Not Found
Not Found

Submitted

Making QR-Code using Flexbox.

#accessibility
Kiara 130

@kxtara

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Agnik7

Posted

Hi, Congratulations on completing the challenge!!🎉🎉🎉🎉 You have done a wonderful job coding this QR component. However, I have some suggestions which I feel might be helpful for you.

  • Always make sure to give an alt text in the img tag. An alt specifies to the browser what to show if the browser is unable to display the image. <img id="image" src="images/image-qr-code.png" alt="QR Code Image"/>
  • Replace the h4 tag with h1 tag. You don't need to use the br tag. The width of the card will take care of that.
  • Instead of specifying the width of the div with class name card, specify only the max-width, thereby making the card responsive. You don't need to define height of the card, because the card's height will be automatically taken care of by the text and margins and paddings inside the card.
  • The div with class name flex-container is actually unnecessary. Even if you remove it, only with some minor changes in the css file, you will get the same result.
If .flex-container is deleted, then add the following lines to the body selector

body{
display: flex;
justify-content: center;
align-items: center;
}
  • The div with class name card is also unnecessary. After deleting that div, copy its CSS styling and paste it inside the styling for the main tag and you'll get the same result.

Hope this comment helps you. Please feel free to correct me, if I have said anything incorrect.

Have a nice day!!

Marked as helpful

1

Kiara 130

@kxtara

Posted

@Agnik7 Hi! Thank you so much for the feedback! I'm always looking to get some outside perspectives on my projects, and this was really helpful.

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