QR code using HTML & CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Vanessa, 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:

  1.The border radius is too much rounded use a value under 30px like 16px:

  main {
      border-radius: 16px;
  }
  

  2.Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. 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 here's the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

  3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images 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

  ---

  

  Vanessa•160

  @VanessaAzPosted about 2 years ago

  @correlucas the units are a big lapse on my part.

  Thanks for all the other advice I will make the changes, as soon as possible :)

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @VanessaAz You're welcome Vanessa! I'm looking forward for your next challenge =)

  0

  

  Vanessa•160

  @VanessaAzPosted about 2 years ago

  @correlucas the extension is awesome! Already added it to my VS.

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Vanessa! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉

  Here are some suggestions for improvements.

  • I recommend using h1 instead of h3. It is recommended for each page to have one h1.
  • Improve the alternative text of the QR code image. Tell the users about the QR code.
  • I recommend adding rel="noopener" to any anchor tags that have target="_blank". It helps protect users of legacy browsers. I suggest reading the web.dev article to learn more about this.
  • Swap the attribution div with footer. Remember that each content should live in a landmark element.
  • Remove the box-shadow from the card. This way, your site will look closer to the original design.

  That's it! I hope this helps!

  Marked as helpful

  0

  ---

  

  Vanessa•160

  @VanessaAzPosted about 2 years ago

  @vanzasetia amazing, already learning, didn't know about rel="noopener". I will make the changes right away. Thanks :)

  1
• 

  Raja Junaid Farooq•390

  @Raja-JunaidPosted about 2 years ago

  Hello Vanessa! how are you?

  Congratulation on completing this challenge! I really love your solution. Let me give you a few tips to improve your design:

  1. When designing your website keep your work decent and lovely looking.

  2. Use a framework because it is easy to use and also increases your speed.

  3. Use decent colors and keep your website neat and clean

  Keep Coding and Keep Practicing.

  Happy Coding!

  Marked as helpful

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Raja-Junaid

  Why do you think using a framework is a good thing for this challenge?

  0

  

  Raja Junaid Farooq•390

  @Raja-JunaidPosted about 2 years ago

  @vanzasetia I'm not asking to use a framework for this challenge. I just asking to use overall.

  0

  

  Vanessa•160

  @VanessaAzPosted about 2 years ago

  @Raja-Junaid thanks for your advice for future coding, I will have this into consideration :)

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Raja-Junaid

  Using a framework isn't always a good thing to do. For example, for a small project using Bootstrap will only slow down the website.

  Also, using a JavaScript framework such as React for a non-javascript website is also useless. (non-javascript websites such as static blogs, etc)

  All your feedback is not specific. It's just buzzwords for me.

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Raja-Junaid

  Please try to provide specific feedback to the solution author. 🙂

  1

  

  Raja Junaid Farooq•390

  @Raja-JunaidPosted about 2 years ago

  @vanzasetia ok

  0

  

  Raja Junaid Farooq•390

  @Raja-JunaidPosted about 2 years ago

  @vanzasetia ok

  0