Responsive QR Code using html, CSS and CSS flex-box

Community feedback

• 

  MikDra1•6,920

  @MikDra1Posted about 2 months ago

  Well done, here are some things to review 😊:

  • Overusing div tags: Try using more semantic HTML elements like <section>, <header>, and <article>. It’ll help with both accessibility and SEO.

  • Neglecting responsive design: Make sure you're using media queries and following a mobile-first approach so your site looks great on all devices.

  • Inconsistent class naming: It’s easy to end up with a mess of class names. Consider using a system like BEM for better organization and scalability.

  • Using px for everything: Instead of px for fonts and layouts, try using relative units like rem or em to make your design more adaptable to different screen sizes.

  • Forgetting alt text on images: Don’t skip the alt attribute. It’s essential for accessibility and helps search engines understand what your images are.

  • Using fixed heights for elements: Setting fixed heights can cause overflow issues. Use min-height or allow content to expand naturally to avoid problems.

  • Not using responsive images: Be sure to use srcset or the <picture> element to optimize images for different devices. This improves performance, especially on mobile.

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  Marked as helpful

  0

  ---

  

  Elena•10

  @ElenakathPosted about 2 months ago

  @MikDra1 Thank you this is all super helpful! For Neglecting Responsive Design, could you elaborate? I'm still new to coding and thought I was. Would love to have more information on parts that I missed. Also what is BEM I haven't heard of that before? I also haven't heard of srcset or <picture>, I'll have to look that up! Thanks again lots for me to learn!

  0

  

  MikDra1•6,920

  @MikDra1Posted about 2 months ago

  @Elenakath

  BEM is a methodology that makes writting classes easier. srcset and <pricture> are elements that help create responsive images.

  Marked as helpful

  0

  

  Elena•10

  @ElenakathPosted about 2 months ago

  @MikDra1 Thanks, I'm watching videos on YouTube about BEM, very cool.

  0

  

  MikDra1•6,920

  @MikDra1Posted about 2 months ago

  @Elenakath

  That's good to hear 😊

  0
• 

  Svitlana Suslenkova•5,320

  @SvitlanaSuslenkovaPosted about 2 months ago

  body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

  Marked as helpful

  0

  ---

  

  Elena•10

  @ElenakathPosted about 2 months ago

  @SvitlanaSuslenkova Thank you! This is helpful and I think I need to do a reminder on grid and when to use flex vs grid.

  0
• 

  MikDra1•6,920

  @MikDra1Posted about 2 months ago

  Well done, here are some things to review 😊:

  • Overusing div tags: Try using more semantic HTML elements like <section>, <header>, and <article>. It’ll help with both accessibility and SEO.

  • Neglecting responsive design: Make sure you're using media queries and following a mobile-first approach so your site looks great on all devices.

  • Inconsistent class naming: It’s easy to end up with a mess of class names. Consider using a system like BEM for better organization and scalability.

  • Using px for everything: Instead of px for fonts and layouts, try using relative units like rem or em to make your design more adaptable to different screen sizes.

  • Forgetting alt text on images: Don’t skip the alt attribute. It’s essential for accessibility and helps search engines understand what your images are.

  • Poor use of Flexbox and Grid: Be careful not to mix Flexbox and Grid unnecessarily. Each has its strengths—use the right one based on the layout needs.

  • Not using responsive images: Be sure to use srcset or the <picture> element to optimize images for different devices. This improves performance, especially on mobile.

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  0