Simple QR Code using basic HTML and CSS

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello again, James! Well, I know this is my third comment already, so I apologize in advance for being everywhere. lmao. But hey, your project also looks quite similar to the proposed design, which is great.

  I'd like to bring up an observation regarding the font of the title. The font in your solution is black, while in the project, it's a dark blue. But well, that's just a minor detail, nothing that negatively affects your project.

  Here's a tip that I don't think I've mentioned in my previous comments: when you're working on width and size, it's also advisable to use rem units. This way, it adapts to the font size as well, adding an extra touch of accessibility/responsiveness to your project. And font-size too, it's highly recommended to use rem units.

  And well, here's my sixth congratulations of the day to you! Keep up the good work, and I promise I'll try to avoid popping up so often like this. lol.

  Marked as helpful

  0

  ---

  

  Lê Hoàng Long•290

  @JamesWallison1Posted 7 months ago

  @R3ygoski Yes I do agree, the reason for my px frequently using is because I have used to using px when I get started to code html, css or even js. But considering your advice, maybe I will change that habit as soon as possible ;) (By the way, no need to sorry for your third existence on my project, your contributors helped me a lot so feel free to fix my code if possible :)

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

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

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

  ---

  PARAGRAPHS ⚠️:

  • This solution consists incorrect usage of <p> so it can cause severe accessibility errors due to incorrect usage of paragraph <p>

  ---

  • Every site must want only one h1 element identifying and describing the main content of the page.

  ---

  • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

  ---

  • In this solution there's <p> element which is this <p>Improve your...</p>, you can preferably use <h1> instead of <p>. Remember <h1> provides an important navigation point for users of assistive technologies so we want to use it wisely

  ---

  • So we want to add a level-one heading to improve accessibility

  ---

  • Example: <h1>Improve your front-end skills by building projects</h1>

  ---

  • If you have any questions or need further clarification, and feel free to reach out to me.

  ---

  • If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

  ---

  .

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

  Happy coding!

  0
• 

  Sivaprasath•2,520

  @sivaprasath2004Posted 7 months ago

  Hello i`ll wishing for your completion project solution.

  • I will give some suggestion i believe its used for improve your skill.
  • In CSS You will use

  .container{
     padding-left: 10px;
      padding-right: 10px;
      padding-top: 15px;
      padding-bottom: 25px;
  }
  

  • you will be use multiple line simply like use padding:'top ' 'right' 'bottom' 'left' this is one line easy to use.
  • change to

  .container{
     padding: 1.3rem 1rem 2.5rem;
                     //"top"   "right&left" "bottom"
  }
  

  • I will recomand for Using rem values for padding provides a scalable and flexible approach, especially when considering accessibility and responsive design.

  0

  ---

  

  Lê Hoàng Long•290

  @JamesWallison1Posted 7 months ago

  @sivaprasath2004 Thank you really much for spending time reviewing my code! Yes I will fix my code based on your advice as soon as possible. Again, thanks a lot for putting effort on this small project!

  0