QR code card using html and CSS

Community feedback

• 

  Pranjali Sargar•520

  @Psargar616Posted about 1 year ago

  Hey @Dagime-Teshome! Excellent Job on the QR Code Component Challenge! 🌟

  I just had the chance to check out your solution, and I'm impressed! Your attention to detail in getting the card pixel perfect is commendable. Well done!

  I have a couple of suggestions that might elevate your project even further:

  Flex/Grid Centering: Utilizing flexbox or grid layout can make centering your QR card effortless. It ensures your design looks great on all devices and screen sizes.

  Viewport-Centered Container: Make your container class take up the entire viewport height and width. Centering the QR card within this container using flex or grid will give your design a polished, cohesive look.

  Sticky Footer: Consider using position: fixed or min-height: 100vh to keep your footer firmly planted at the bottom of the webpage. It not only looks professional but also adds a nice finishing touch.

  One more thing, instead of directly using image tag use it inside of a div to fit an image inside a div element with a specific height and width to maintaining its aspect ratio. You can use CSS styles. Here's how you can achieve that:

  .container {
      width: 300px; /* Set the desired width */
      height: 200px; /* Set the desired height */
      overflow: hidden; /* Hide the overflowing parts of the image */
  }
  
  .container img {
      width: 100%; /* Make sure the image takes up 100% of the container's width */
      height: auto; /* Maintain the aspect ratio, automatically adjusting the height */
  }
  
  

  Your work is already fantastic, and these suggestions are just meant to help you explore more advanced techniques. Keep up the amazing work, and if you ever need more guidance or ideas, feel free to reach out. You're doing great, and I'm excited to see how you continue to improve and grow!

  Happy coding! If you found this feedback useful, please mark this comment as helpful

  Marked as helpful

  1
• 

  A1ex•500

  @a1excpunkPosted about 1 year ago

  Good start, keep on practising. About suggestions:

  • about media queries, less is better and in this case, you don't need 2, write "main" and go from there to desktop or to mobile screen size (depends on which one you'll make the main one). browsers are doing a good job of making everything responsive so there is less styling code needed from developers regarding that aspect.
  • the fixed width is messing a lot for responsiveness, try relative units like %, rem, em and so on. Also, max-width and min-width can be your friends.
  • lastly, if you have media queries (especially several), don't copy the whole block of code, set initial values and when media queries are needed (on specific width for example) they will override only the part that is different for that width and needs to be changed.

  Marked as helpful

  1
• 

  Kemystra•200

  @KemystraPosted about 1 year ago

  Hey @Dagime-Teshome, congratz on solving this challenge!

  The big thing to improve in making a responsive site is to use relative units rather than fixed ones. px are literally pixels, so that's obviously fixed. Some common relative units are vh, vw, rem, %, etc. Try to experiment with them and look up docs for more.

  Specifically for this site, instead of centering the card with a containerClass and margin: auto (which is an old trick), you can use CSS Flexbox (learn more here).

  A few small tips:

  • Add this snippet to every project that you will ever make:

  * {
      box-sizing: border-box
  }
  

  This ensure that width of an object will also include its padding. Seems insignificant until you start banging your head on how to calculate widths with variable padding.

  • Not every element needs a class. Try to not add them until you need it. Once projects get larger, it will be easier to keep track of used class names. Besides, a big project will usually force you to use more type of CSS selectors anyway.

  CSS is damn weird, but satisfying in a way. Good luck and happy coding!

  Marked as helpful

  1