Simple QR Code w/ html+css only

Community feedback

• 

  Sajana Wijesinghe•460

  @StormKing969Posted over 2 years ago

  Hi,

  Congratulation on completing this challenge. Overall, you did well especially since you just started. Allow me to give you some tips on improving your code.

  1.Instead of writing your CSS (style section) inside your HTML file, you should create a separate CSS file and link it in your HTML file underneath the title tag inside the head tag. <link rel="stylesheet" href="./public/css/main.css">

  2.I usually start off my styling by remove all the default browser styles and adding my own.

  * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
  } 
  
  body {
      font-family: 'Overpass', sans-serif;
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      scroll-behavior: smooth;
      overflow: hidden;
      background: $very-dark-blue;
  }
  

  3.I also try to stay away from hard coding size (depends on the situation) and instead use rem or em. This way, you can easily have your website responsive.

  4.Use @media to style your website for different devices

  @media screen and (min-width: 370px) {
      .container {
          width: 370px;
      }
  }
  

  5.I'll also learn about display: flex and grid. Here are some links that I look at when I forget some stuff about them. Flexbox, Grid

  6.Finally I learn SCSS/SASS when you have a good understanding of CSS. It's easy and it make styling a lot simpler in my opinion.

  Here's a link to my version of the QR Code Component : QR-Code

  Hope this helps

  Happy coding

  Marked as helpful

  1
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey good job completing this challenge

  Keep up the good work

  Your solution looks great however I think that the content in the card needs some padding.

  Secondly the border radius needs to be increased and the box-shadow needs to be subtle

  I hope this helps

  Cheers Happy coding 👍

  0