QR Code Component - CSS / HTML

Community feedback

• 

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted about 2 years ago

  Hello, Cristian Rincon Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • add the below code to the body. It will center everything

  body {
      justify-content: center;
      align-items: center;
      display: flex;
      height: 100vh;
      flex-direction: column;
      background-color: var(--backgroundColor);
  }
  

  • remove the below styles from.main

  .main {
      /* background-color: var(--backgroundColor); */
      /* min-height: 100vh; */
      /* display: flex; */
  }
  

  • remove all of this element <a href="https://www.frontendmentor.io/profile/crisanrimor" class="card__link"> </a>

  • This is my solution for this project live, repo

  I hope it will work. Happy coding.

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @crisanrimor, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

  The main heading has the tag <h2>, in this case, you should replace it with <h1> since this heading is the main title on this page. Remember that every page should have one <h1> to declare which is the most important title and that you should follow the hierarchy using the heading sequence (h1, h2, h3, h4, h5) and never jump a level.

  Use relative units like rem or em instead of px to have a better performance when your page content resizes on different screens and devices. REM and EM does not just apply to font size, but all sizes as well. To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

  Save your time using a CSS RESET to remove all default settings that are annoying as the margins, paddings, and decorations and optimize it making it 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!

  Marked as helpful

  0