HTML CSS QR component

Community feedback

• 

  dimar hanung•560

  @dimar-hanung

  Posted about 2 years ago

  Hello 👋, Great job on complete the challenge! 🎉

  I have some interest and feedback with your code

  That i like:

  1. I appreciate the similarity of your results with the design, a bit different in position and font because footer, but still good
  2. html is pretty good, not too nested with combination semantic html 👍
  3. CSS Naming is also good, represent what is it for, like <div class="qr-code"> for qr code section
  4. Responsive until galaxy fold screen size 👌

  My Feedback:

  • Maybe you can use tools like prettier to format your code to be more beautiful ( TIP: set prettier configuration to format on save, make it easier )

  • You can make it center using grid, make body styles into this

    body {
      font-family: "Outfit", sans-serif;
      background-color: hsl(212, 45%, 89%);
      margin: auto auto;
      display: grid;
      place-items: center;
      min-height: 100vh;
    }
    

  • you can seperate file by folder to be more structured ( just developer preference, not a rule), for example:

    public/
    ├─ images/
    │  ├─ qr-code-image.png
    ├─ styles/
    │  ├─ main.css
    ├─ favicon.png
    index.html
    
    

  anyways overall is good, nice solution, hope it useful 🙌

  01