QR code card using HTML, CSS, flexbox, and SASS.

Community feedback

• 

  P

  Koda👹•3,830

  @kodan96Posted 6 months ago

  hi there! 👋

  a couple of things I packed up for you after looking at your code:

  HTML:

  • for SEO and accessibility manners all HTML files should contain an h1 tag (one and only one)
  • header tags are not about font-size or font-weight (you modified the font size on the h2 tag anyway), but they supposed to give semantic meaning for the page, giving structure to the page (mostly this followed along with visual hierarchy asw)

  CSS:

  • use relative units instead of pixels, it helps with responsive design, and also gives the chance for users with bad eyesight to increase the font size of the page.

  • your .main__container CSS selector doesn't do anything in the sense that you could apply all these to the body itself.

  • don't apply fixed width or height to your elements, let their child elements determine these dimensions. if you really want to determine dimensions for your elements use max-width or min-width

  • you used all these:

  .main-container .info-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  

  but they can be replaced by a text-align property and some padding. Flexbox and Grid are powerful tools indeed, but over-relying on them is not good either, sometimes you can just use padding and margin to do the same.

  Hope this was helpful 🙏

  Good luck and happy coding! 💪

  Marked as helpful

  0

  ---

  

  P

  Carlos Pizarro•130

  @IncorrigibleSpiritPosted 6 months ago

  @kodan96 Hi, Koda! Thank you so much for your feedback. I highly appreciate all the details and explanations you offer me. I will fix these little details ASAP. 🙏

  Happy coding!

  1