QR-code-component solution using flexbox

Community feedback

• 

  d8701a•240

  @d8701a

  Posted about 2 years ago

  Hello and congrats on completing this challenge! I checked your code and overall, it looks very good to me. It's clean and precise, also you didn't repeat yourself, so that's also great.

  I noticed two things, so I'll write them here, but they are not mistakes, just maybe little improvements to be made.

  • First: try using semantic HTML elements instead of generic containers. So you could replace <div class = "main"> with simply <main> or add a class to it, for example <main class = "yourclasshere">.

  There are a couple of reasons why this is better and one of them is that <main> already exists in HTML, so you can use it. It improves accessibility of your website, code readability, and can definitely improve SEO ranking for your website as well. Another semantic HTML elements are: <nav>, <article>, <aside>, <section> etc. Try integrating them into your code and give them priority over custom div elements whenever possible.

  • And second thing - try to avoid using absolute units such as pixels. They are acceptable for setting paddings and margins (although some people use rems or ems for them as well), but for font-size try to use rems. They improve mobile responsiveness and overall using absolute units is a bad practice now.

  Other than that, awesome use of flexbox, awesome use of width and max-width on a container and overall, just keep learning, you are on a good path!

  11

  Marked as helpful