QR code component using HTML and CSS

Community feedback

• 

  Dylan Heslop•1,150

  @dylan-dot-cPosted 7 days ago

  Hey, well done! I can help you!!😅

  You don't need to experiment with colors as this is a free+ challenge and you can get the Figma file for free!

  Try not to use %s in your css code, you'll have less control on different screen size, make sure you download the Figma file and inspect it, you'll see all the paddings, margins and etc

  You also should make the h3 a h1, since you should use them in order h1,h2,h3 if you want a smaller size, just use css it visually change that. Each webpage should only have at most/least 1 h1 tag so that's a good thing to remember generally.

  To center your div, use flex box and make sure your container has a reasonable height, if it's the body it should be 100vh. Use this code

  body {
      ....// Your code you already have
      height: 100vh;
      display: flex;
      justify-content: center; //align it horizontally
      align-items: center; //aligns it vertically
  }
  

  You could also checkout the flex box tutorial at css tricks, it's really good! Css Tricks Flexbox

  Ps. Pleas emake sure you compete the documentation in the readme template file, it helps improve your documentation skills and it helps others that come to your repo see what you've done and what you have learned also show what you know you could have done better, this helps personal reflection and helps you improve on those and not forget about them. I also did this challenge so you can check it out as well

  Marked as helpful

  1

  ---

  

  mamman-naf•40

  @mamman-nafPosted 2 days ago

  @dylan-dot-c Thank you very much for taking the time to review my work. I am delighted on the observations you made and I will ensure to make corrections on the suggestions you made. Please do keep guiding us.

  Much Appreciated.

  1

  

  Dylan Heslop•1,150

  @dylan-dot-cPosted 2 days ago

  @mamman-naf No worries! I'm always delighted to contribute to the community and help others improve. I'm no expert but I try my best as I am still learning as well.

  Take care, continue working hard!

  0

  

  mamman-naf•40

  @mamman-nafPosted 1 day ago

  @dylan-dot-c have worked on the suggestions u made. can u please cross check it and see if there is anything i need to improve. sorry to bother u.

  1

  

  Dylan Heslop•1,150

  @dylan-dot-cPosted 1 day ago

  @mamman-naf It's not a bother bro.

  • You forgot to use the font specified in the style-guide.md file. You can import it from google docs using @import in css or use the @font-face selector and use the file provided(if there is one). You can then use it on the body for all children text(what I normally do) like

  @import url("https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap");
  
  body {
      font-family: "Outfit", sans-serif;
  }
  

  you can also change the color for the h1 text as it's kinda close, just check in the style-guide and you can test the colors there. As always, you can look at my code and see how I did things you aren't certain of.

  Take care bro!

  Marked as helpful

  0

  

  Dylan Heslop•1,150

  @dylan-dot-cPosted 1 day ago

  @mamman-naf also don't forget to generate a new screenshot when you update your code

  0