Responsive qr-code-component

Hello Sankalp, You have done a good work! 😁

Some little tips to improve your code:

• add main tag and wrap the card for improve the Accessibility
• also you can use article tag instead of a simple div to the container card for improve the Accessibility
• img element must have an alt attribute, it's very important!
• add descriptive text in the alt attribute of the images
• remove all margin from card class
• use flexbox to the body to center the card. Read here -> best flex guide
• after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
• use h1 for the title of card and not a simple div
• instead of using px use relative units of measurement like rem -> read here

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!

Hello Sankalp, you have done a great job. Here are a few tips that can help you to improve your code.

• It's better to create a CSS file and link it in the head of your HTML as opposed to styling in the HTML file.
• It's better to wrap your entire code in a main tag
• In the .card class, the font-family should be within quotation marks " " i.e font-family: "Outfit", serif; the serif is the fallback font.
• You should also add the alt value for the img tag.
• Also, in this scenario, I don't think that there's need for the word-spacing property.
• Finally, if you want to center your work (which is already in the main tag) you can use flex. body{display: flex; justify-content: center; align-items: center}

I hope this is not too much.

Happy Coding :)

Hi, @sankalp414!

Your page looks pretty nice, but I have a few suggestions for you:

• Your page should contain landmarks, so it makes your code easier to read on what content is what and also helps screen-readers to figure out what is what. In this case your card should be wrapped withing main tags and your attribution should be wrapped within footer tags.
• You are writing your CSS within the HTML, I would suggest making a separate file for CSS. Imagine this was a big website with a lot of styling and markup.
• |For centering your card I would suggest looking up "Flexbox".
• Try to avoid using px values as much as possible and use rem instead.
• Try to start using "custom CSS properties". While this is not essential in this project, it is a good habit to develop.

Hope this helps!