TailwindCSS qr-code-component solution

Community feedback

• 

  cacosted•570

  @cacostedPosted about 2 years ago

  Hello @NiklausRupail, congrats on your solution, looks great.

  I don't know too much about tailwind yet, but I notice some rare behavior with the card's width and the breakpoints, at some point the width between mobile and desktop the width goes big -> small -> big.

  This challenge is simple and you don't need to set breakpoints, you can set a max-width on the card and mx-auto and that should do the trick for the card sizing.

  Marked as helpful

  1

  ---

  

  Niklaus•160

  @NiklausRupailPosted about 2 years ago

  @cacosted Thanks a lot

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Niklaus, congratulations for your new solution!

  👉 You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code to improve the html markup/semantic:

  1.Improve your html markup using meaningful tags and replace the important blocks of content with better tags, for example the main div that takes all the content can be wrapped with <main> or section, the cards you can be replaced the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Don’t use div for the important blocks, ever prefer some tag that shows what its containing the block.

  Here's a complete guide for HTML semantic TAGS: https://www.w3schools.com/TAgs/default.asp

  2.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  ✌️ I hope this helps you and happy coding!

  0