QR-Code Component using Flexbox

Community feedback

• 

  P

  Teodor Jenkler•3,740

  @TedJenklerPosted 2 months ago

  Hi @ProgramJones,

  Nice project! Here are a few additional recommendations:

  OG Meta Tags: I strongly recommend using OG (Open Graph) meta tags to improve SEO and the shareability of your site. Proper OG tags can significantly impact how your site appears when shared on social media and can make a difference in search engine ranking, potentially affecting whether your site appears in search results.

  ARIA Labels: When semantic HTML elements aren't applicable, make sure to add aria-label attributes to your <div> elements. This practice enhances accessibility and contributes positively to SEO by helping screen readers understand the content and purpose of these elements.

  Avoid Styling with IDs: Try to avoid using IDs for styling, as it can lead to issues in larger projects. Instead, use classes for better flexibility and maintainability in your CSS.

  Custom QR Code Challenge: As an extra challenge, consider creating your own custom QR code. It can be a fun learning experience and something interesting to share with others.

  Keep up the great work!

  Best, Teodor

  Marked as helpful

  1

  ---

  

  Tai Jones•40

  @ProgramJonesPosted 2 months ago

  @TedJenkler a lot of good advice. I’ll be sure to come back to this later for that extra challenge. Right now I’m working on my blog preview card responsiveness.

  1

  

  Tai Jones•40

  @ProgramJonesPosted 2 months ago

  Hey @TedJenkler, I got really interested in what you were talking about earlier and decided to learn about og tags whenever I had free time today. I added them and it should be good now but I'd appreciate if you let me know what you think when you can.

  0
• 

  MikDra1•6,920

  @MikDra1Posted 2 months ago

  Limited Browser Support for :root Variables:

  • The :root variables might not work correctly in older browsers. Providing fallbacks could improve compatibility. Here is a quick VIDEO about how you can create a fallback to the variable

  Font Sizing and Scaling:

  • If the font size is defined in pixels (px), it could create scaling issues on different devices. Using em or rem would be more flexible. And here is how we use rems:

  html {
  font-size: 62.5% // It means that 1rem = 10px. From this it is easier to use rem
  }
  
  p {
  font-size: 1.6rem; // Here this paragraph font-size will be 16px;
  }
  

  If you don't understand it already here is a VIDEO

  Hope you found this comment helpful 💗

  Good job and keep going 😁😊😉

  Marked as helpful

  0

  ---

  

  Tai Jones•40

  @ProgramJonesPosted 2 months ago

  @MikDra1 I completely forgot to add fallbacks. Thanks for the tips!

  0

  

  MikDra1•6,920

  @MikDra1Posted 2 months ago

  @ProgramJones

  I'm happy I could help 😁

  0
• 

  Om Bhor•400

  @kenzo0pPosted 2 months ago

  its a good platform foor practicing .

  1