Responsive qr-code-component

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  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!

  Marked as helpful

  0
• 

  Lord Robins•550

  @ZenitsuAgPosted almost 2 years ago

  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 :)

  Marked as helpful

  0
• 

  Saulius K.•560

  @TH3RIVPosted almost 2 years ago

  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!

  Marked as helpful

  0