QR code card using flexbox

Community feedback

• 

  Jenna•230

  @NandiniCooppenPosted over 1 year ago

  Hello Nabil,

  Congrats on completing the QR- code challenge 👏

  Here are some improvements that I would like to suggest :

  1. Using Semantic HTML5

  You may use semantic HTML, instead of <div>. some examples of semantic HTML : <main> , <section> , <header>,<nav>, <footer>

  You may read more about semantics here

  2. Using CSS variables

  For example, using the style guide provided, you may create your CSS colors variables as follow :

  root {
  --white: hsl(0, 0%, 100%);
  --light-gray: hsl(212, 45%, 89%);
  }
  

  Read more about CSS custom properties here

  3. Min-height instead of height

  Instead of height:100vh; replace it with min-height: 100vh; for the body.

  body {min-height: 100vh;}

  You may read more about min-height here

  4. Remove the space on line 14 and fix the font size value units. (style.css)

  I notice that there is a space between background-color: hsl(212, 45%, 89%); and font-size: Also, it seems like you forgot to specify the unit of the font size. font-size:15;--> is an invalid property. You should mention a unit such as px, em, or rem.

  5. For the img , replace height: 50% with height:auto;

  If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.

  I hope these will be helpful to you 😉

  Good luck going forward and happy coding 🙂

  Marked as helpful

  1

  ---

  

  Sherif-Nabil•90

  @Sherif-NabilPosted over 1 year ago

  @NandiniCooppen Thank you for taking the time to review my code. Your suggestions were very helpful and I was able to make some significant improvements. I'm really happy with the results and I really appreciate your time and effort. 🙏

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  QR iMAGE ALT TEXT 📸:

  • The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.

  ---

  • The alt with the QR code image is not even explaining for what the QR image need to be used.

  ---

  • So update the alt with meaningful text which explains like QR code to frontendmentor.io

  ---

  • Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0
• 

  Kamlesh Rajesh Yadav•5,060

  @Kamlesh0007Posted over 1 year ago

  Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. You need to add Semantic HTML tags

  The HTML structure should be semantically correct. The current structure doesn't provide any semantic information about the content. A better approach would be to use appropriate HTML tags such as <header>, <main>, <section>, <article>, etc. to define the sections of the page

  here is the code that u need to add to add semantic tags in ur page

  <main class="container">
  <img src="images/image-qr-code.png" alt="the QR code image">
  <div class="text">
  <h1>Improve your front-end skills by building projects</h1>
  <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
  </main>
  

  1