QRCode - HTML and CSS (flexbox)

Community feedback

• 

  Jorge Pérez•30

  @jorgepexpPosted 2 months ago

  Hello! I will give you some tips if you like 😄

  HTML

  I would suggest you use more self-explanatory names like qr-container instead of only container, that way you can be used to do that in real projects. Also a good practice is to use semantic elements like section, main... Instead of using only divs.

  CSS

  You have good practices like using the CSS reset with border-box! Still, there are things that can be improved like:

  • Order of the elements: It is interesting to order the CSS in a way that represents the cascading and natural order of the HTML. For example: Main container > QR Image container > Img > Text container... Instead of an arbitrary order. You can also do it when you're done building the component.
  • Responsive: There is no responsiveness of the component, check media querys to help you with that! I would recommend to check some videos and other resources since responsiveness is a big topic.
  • CSS Variables: The use of CSS Variables can help you with the reutilization of your styles.
  • Typography: Consider the use of font-face to define your main/secondary typographys that you may have. There are other minor things but these are the main ones that I see!

  Markdown

  I've noticed that your README.md is minimized or something, so the Markdown doesn't work that way! See your repo page on Github to see what I mean.

  Overall is a nice and working solution, but can be improved! I hope that this helps and as always, don't give up and keep coding 😁 Cheers!

  Marked as helpful

  1

  ---

  

  KeevKK•20

  @KeevKKPosted 2 months ago

  @jorgepexp Thanks a lot for taking your time to write this feedback. It helps a lot and I will definitely take it into account in future projects! :)

  0