QR code component using HTML and CSS

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @StivenZ!

  Your solution looks great!

  I have a couple of suggestions (about semantic HTML) for improvement:

  📌 First: Use <main> to wrap the main content instead of <div>.

  Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.

  📌 Second: use <h1> for the main title instead of <p>.

  The tag <p> is meant for paragraphs. For titles, we have the HTML headings (the tags <h1> to <h6>).

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

  Unlike what most people think, it's not just about the size and weight of the text.

  • The <h1> to <h6> tags are used to define HTML headings.
  • <h1> defines the most important heading.
  • <h6> defines the least important heading.
  • Only use one <h1> per page - this should represent the main heading/title for the whole page. And don't skip heading levels - start with <h1>, then use <h2>, and so on.

  All these tag changes may have little or any visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1
• 

  Hassan Moataz•1,860

  @hassanmoaaPosted 10 months ago

  Hello @StivenZ!

  Great Job solving the challenge mate *congrats * 🎉

  Some suggestions for improvements.

  For the font-size it's is better to use rems and ems but px for this project is no big deal.

  font-size: 13px;

  • i see you using pixels for many elements, never use pixels for font-sizes in any element, here's why:

  • Certain font-related CSS properties will render your site completely inaccessible if their value is declared using pixels even once.

  Which properties are affected?

  All of these properties must never ever be declared in pixels:

  • font-size
  • line-height
  • letter-spacing

  If you've used pixels to define any of the above style properties, these will not respect the user's font size preferences!

  • You should use ems, and rems for font-sizes would be better

  This article may help:

  https://fedmentor.dev/posts/font-size-px/

  ➖➖➖➖➖➖➖➖

  Use <main> to wrap the main content instead of <div>. * 📌 Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page. This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

  ➖➖➖➖➖➖➖

  Heading is defined with <h1> to <h6> tags. It is important to use headings to show the HTML document structure.

  <h1> headings should be used for main headings, followed by <h2> headings, then <h3>, and so on up to <h6>

  ➖➖➖➖➖➖

  Consider zooming in the card element by adjusting your width/height that will look better or adjust the margin on it.

  Other than that you're good, keep up the good work!

  Marked as helpful

  1
• 

  P

  Asish Patnaik•160

  @asishPatnaik2000Posted 10 months ago

  Hi @StivenZ! for this How can you host several "builds" in GitHub pages?

  A way to do this is just put different challenges in different folders under same repository.

  After you host the repository you can just use /<folder name> to see your project

  for Example you can check my repository I have created for newbie challenges :

  https://github.com/asishPatnaik2000/FrontendMentorNewbiePractice

  After repository is hosted I just have to access it using folder name: example 1: https://asishpatnaik2000.github.io/FrontendMentorNewbiePractice/product-preview-card-component-main/

  Similarly just change file name another challenge solution should show up.

  Hope this helps

  1