qr-code-component building solution

Community feedback

• 

  P

  Teodor Jenkler•3,760

  @TedJenklerPosted 2 months ago

  Hi @rawatdinesh10,

  Nice project! Here are a few suggestions to enhance it:

  Global Box-Sizing: Consider adding

  • { box-sizing: border-box; } to all your projects.

  This ensures that padding and border are included in the element's total width and height, making layout and sizing more predictable.

  Also, set HTML, body { margin: 0; } to remove default margins and avoid unexpected layout shifts.

  Using <div> for Layout: Use <div> elements to contain and organize your content. Start by outlining the layers you see and style them accordingly. For example, a <div> can be used as a card container, and adding an aria-label can significantly improve accessibility by describing the content for screen readers.

  Extra Challenge: For a fun challenge, consider creating your own custom QR code. You can generate one that links to a website or a secret message. It’s a great way to learn more about QR codes and can be a fun addition to your projects.

  Hope these tips help!

  Best, Teodor

  Marked as helpful

  1

  ---

  

  rawatdinesh10•30

  @rawatdinesh10Posted 2 months ago

  @TedJenkler thank you so much for your valuable feedback.

  1

  

  T

  Gwenaël Magnenat•1,270

  @gmagnenatPosted 2 months ago

  Hi @rawatdinesh10, to help with box-sizing, correct image sizes, reset margins, and more, you should add a modern CSS reset at the top of the stylesheet in all of your projects. Look up Andy Bell's Modern CSS reset and use that one. It will help you deal with browser inconsistencies and make your life easier.

  0
• 

  MikDra1•6,920

  @MikDra1Posted 2 months ago

  To make the image the size that you want I encourage you to use this technique to make the card responsive with ease:

  .card {
  width: 90%;
  max-width: 600px;
  }
  

  On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 600px it will lock with this size.

  Also to put the card in the center I advise you to use this code snippet:

  .container {
  display: grid;
  place-items: center;
  }
  

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  Marked as helpful

  1

  ---

  

  rawatdinesh10•30

  @rawatdinesh10Posted 2 months ago

  @MikDra1 thank you much for your valuable feedback.

  0

  

  MikDra1•6,920

  @MikDra1Posted 2 months ago

  @rawatdinesh10

  I'm happy I could help 😉

  0

  

  T

  Gwenaël Magnenat•1,270

  @gmagnenatPosted 2 months ago

  @rawatdinesh10 you don't need this on the image. The card itself should take a max-width. The image takes 100% of its container (this is done in the CSS reset) and you just add a padding to the card to add a bit of space.

  0
• 

  Mina Hany•150

  @Mina546845414h55gPosted 2 months ago

  Hello , you want to give the body bg-color as in style giude and after this give the card a white color and give the imge margin 20px and after this edit the content and thanks

  Marked as helpful

  1
• 

  T

  Gwenaël Magnenat•1,270

  @gmagnenatPosted 2 months ago

  Hi, with the different feedback you received, here is a list of the important points you should study.

  Semantic HTML and Accessibility

  • Add a <main> element: This helps show where the main content of your page is.
  • Use <footer> for attribution: Put the attribution inside a <footer> element.

  CSS and Layout

  • Start your stylesheet with a modern CSS reset in all your projects. This helps handle browser defaults and gives you a clean starting point. Look up for Andy Bell Modern CSS Reset.
  • The recommanded way to center a card like this is with flexbox on your body or parent container. You'll need to add a min-height:100vh on this container for it to work properly.
  • You don’t need to wrap everything in <div> tags. Instead, add classes directly to the elements you want to style. This makes your HTML simpler.
  • Instead of a fixed width, use max-width so the card can adjust to different screen sizes.
  • Don’t set a fixed width for images. Use width: 100% so the image fits its container properly.
  • Use units like em, rem, or percentages for font sizes. This helps text adjust based on user settings.
  • Instead of fixed pixel widths for text, use the ch unit to limit the number of characters. This makes the text fit better.
  • For this challenge, you don’t need media queries. Just make sure your layout works well as it is.

  I hope these tips help you improve your code. If you have any questions or need more details, just ask.

  Happy coding!

  0