QR Code Using CSS

Community feedback

• 

  huythonhd1999•50

  @huythonhd1999Posted 5 months ago

  Hi, @Dev-Abhiram

  Congratulations on finishing the first project. Overall, you have done a great job. Here are some problems I found when I looked at your page and your code:

  • Style issues:

  • The background color of the page is not correct (should be #d5e1ef).
  • There is no gray border on the card container.
  • The font size of the description is not correct (should be 22px).
  • The width and the height of the card container are not correct (should be 320x497)
  • Padding issue: the padding of the card should be 16px and you also need to add padding for the "scan" class (24px).

  • CSS file format: I think you should format your CSS file to make it more beautiful (could try some extensions in VS code like Pretier, Stylelint, ...)
  • About grid and flex-box: I think you are doing great when using the flex-box style for this challenge. You could try to use the grid system to finish this challenge as well (it could be a little bit hard when you use it for the first time).

  If there is anything wrong with my review, please leave me a message.

  Best regard,

  Henry

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 5 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your solution is really impressive!

  I've got a couple of ideas (about how to use HTML better) that could make it even stronger:

  📌 First: Think about using <main> to wrap your main content instead of <div>.

  Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.

  📌 Second: Consider employing <h1> to <h6> tags for headings rather than using <p>.

  The <p> tag is primarily intended for paragraphs. When it comes to headings, HTML offers us a range of heading tags: from <h1> to <h6>.

  Here's a quick guide on how to use them:

  • The <h1> to <h6> tags are used to define HTML headings.
  • <h1> is for the most important heading.
  • <h6> is for the least important heading.
  • Stick to just one <h1> per page – it should be the main title for the whole page.
  • And don't skip heading levels – start with <h1>, then use <h2>, and so on.

  It's more than just text size — it's about structuring your content effectively.

  These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.

  Hope that's helpful!

  Keep up the great work!

  0

  ---

  

  Dev-Abhiram•20

  @Dev-AbhiramPosted 5 months ago

  @danielmrz-dev Thanks for your reply. I will certainly improve it in my future projects.

  0
• 

  iSalah-YT•20

  @iSalah-YTPosted 5 months ago

  thank u

  0