Simple QR Code Card using HTML + CSS

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgo

  Posted about 2 years ago

  Some recommendations regarding your code that could be of interest to you.

  HTML

  In order to fix the accessibility issue:

  • You need to replace <div class="qr-card"> with the <main class="qr-card"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.

  CSS

  • If you want to center it correctly and easily, you can use flexbox in the html in CSS:

  html {
      background-color: hsl(212, 45%, 89%);
      font-family: 'Outfit';
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  Hope I am helpful. :)

  00
• 

  collins•100

  @cbleeze

  Posted about 2 years ago

  I read your code and i want to make a few suggestions, 1.Use comments to explain the purpose of each section of code. While the CSS reset is a well-known and established technique, it's still a good idea to add comments to explain what it does and why it's necessary. Similarly, it would be helpful to add comments to the personal CSS to explain what each class does.

  2.It's great that you're using a CSS reset to remove all the default styling from HTML elements. This helps ensure consistency across browsers and devices.

  3.In your personal CSS, you're setting a background color for the entire HTML document. It's important to remember that the HTML element encompasses everything on the page, including the head and body. It's generally better to set the background color on the body element instead.

  4.You're using the font-family property to set the font for the entire HTML document. This is fine if you're using a custom font that you've imported or downloaded, but if you're using a built-in font, it's better to use the font-family values that are available across all devices and platforms.

  5.In the .qr-card class, you're using the display property to set the flexbox layout. This is a good choice for a card-like layout, but you should also consider adding a fallback for browsers that don't support flexbox. One option is to use float and clearfix techniques.

  6.The .qr-card-image and .qr-card-heading classes have fixed widths set. While this is fine for a specific design, it can cause issues if the content inside these elements is longer or shorter than the specified width. Consider using relative widths or min/max widths instead. You can use flexbox to center your div container and also close your div Overall, your CSS is well-organized and easy to read. With a few small improvements, it can be even better.

  00