QR-Code-Component only with basics HTML and CSS

Community feedback

• 

  Kamlesh Rajesh Yadav•5,060

  @Kamlesh0007Posted 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. HTML 🏷️:

  This solution lacks semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers For example: The <main> element should include all content directly related to the page's main idea, so there should only be one per page The <footer> typically contains information about the author of the section, copyright data or links to related documents. So fix it by replacing the <div class="container"> element with the semantic element <main> in your index.html file to improve accessibility and organization of your page.

  Marked as helpful

  0
• 

  Dinil Thilakarathne•250

  @Dinil-ThilakarathnePosted over 1 year ago

  Hey there! Great job on completing the challenge! 🎉

  I have some suggestions that could help you improve your code even more. Here are some tips on how to make your CSS code cleaner and easier to read:

  • Use meaningful class names that describe the content or purpose of the element you're styling.
  • Avoid using inline styles and instead use an external stylesheet.
  • Group related styles together and separate them with comments.
  • Use shorthand properties when possible to reduce the amount of code you write.
  • Keep your styles consistent throughout your project.
  • Use CSS variables to keep your code more organized and easier to maintain.

  I hope these tips are helpful for you!

  Here are some suggestions to improve the cleanliness of your code:

  Use consistent indentation: Make sure that all your code is indented consistently. This will make it easier to read and understand.

  • Use meaningful class and ID names: Your class and ID names should describe the content or purpose of the element. Avoid using generic or vague names like "box" or "container".

  • Group related CSS properties: Grouping related CSS properties together can make your code more organized and easier to read. For example, you could group all the background properties together, followed by the font properties, and so on.

  • Use shorthand properties: Shorthand properties can help reduce the amount of code you need to write. For example, you can use "font" instead of "font-family", "font-size", "font-weight", and so on.

  • Remove unnecessary code: Make sure to remove any unnecessary code that is not being used. This can help reduce the size of your CSS file and make it easier to maintain.

  • Add comments: Adding comments to your code can help explain the purpose of certain elements or classes, and make it easier for other developers to understand your code.

  Marked as helpful

  0
• 

  P

  Luciano Lima•1,290

  @LucianoDLimaPosted over 1 year ago

  Well done on finishing this project!

  A few tips and suggestions:

  • You managed to center your application, however there are better ways of accomplishing the same thing, I say that because using position absolute to center the main application will cause issues in your next projects. I don't wanna spoonfeed you as I think the learning process is the best part, so I'll tell you what you can search to learn: Center a div with flexbox, and center a div with grids. Also with margin: auto to center horizontally in some cases

  • When you working with sizes, in most cases using other units is better than pixel. Pixel will always have its uses, but rem, em and percentages will work better, rem for font-size, em for media queries, percentages for images, this was an oversimplification so your best bet is to search why REM is better than PX: Here is a great article talking about that

  • When you're naming your classes, and variables in the future (javascript), it's best to give them meaninful name, so that your corworkers can know what they do without having to look at the code, even if they end up being slightly bigger, bigger and understandable is better than small but hard to understand. For example, instead of whitebox you could'va called it qr-container

  • When you're working with headers, always start from 1 and go from there (don't forget you should only have one <h1>, but you can have multiples of the others)

  Look forward to your next projects! You're doing great, happy coding, pal!

  Marked as helpful

  0