QR code component

Community feedback

• 

  P

  Andreas Remdt•950

  @andreasremdtPosted over 1 year ago

  Hey @2023course,

  Congrats on solving this challenge and welcome to Frontend Mentor! Your solution looks good already, it's close to the design and only has some minor issues.

  First, you should be able to get the exact colors from the style-guide.md file that's part of the starter code package. It usually contains all colors, font sizes, and more information, depending on the challenge. You are still left to match the correct color to an element, so you either need to be good at guessing or you can use an editing software like Gimp or Photoshop, which contain a color picker. That's what I would do. Same for dimensions, most editing software contains measuring tools.

  Secondly, I've got a few suggestions for your solution:

  • Make sure to add a title to the HTML to make it more accessible and SEO friendly.
  • The HTML is lacking a semantic structure, which makes it harder for screen readers and search engines. A good start would be to wrap the card in a main element instead of a div.
  • You went with an h3 for the title, but an h1 would be more appropriate, as it's the only and therefore most important heading of the page. Headings should always start from the highest level and descend down.
  • You don't really need the div.container, you can apply the same CSS rules to your body and remove the container. One element less ;)
  • Using @import to load fonts is not considered a best practice, as it's render blocking and could lead to decreased performance. Prefer using the <link .../> code from Google Fonts instead.

  That's about it. Let me know if you have any questions, otherwise, keep up the good work!

  0
• 

  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.

  ---

  HTML 🏷️:

  • This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.

  ---

  • 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 resolve the issue by replacing the <div class="container"> element with the proper semantic element <main> in your index.html file to improve accessibility and organization of your page

  ---

  .

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

  Happy coding!

  0