QR Code Components

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 10 months ago

  Hello

  There are some important principles to learn in this challenge

  1. Content should always be contained within landmarks. That means you need a main at least on every page so it's good to get into that habit now. Place the attribution content in a footer landmark outside of main too.
  2. Learn about image alt text, what it is and how to use that attribute in meaningful vs decorative images. There is a good post in the discord resources channel about how to write good alt text. In this, you must Change the alt text you have written so far. It is not code, it is content. It needs to say what the image is (QR code) and where it goes (to FrontendMentor.io)
  3. Keep html as simple as possible. Think about this. Do you need a text div at all in this?
  4. Always use a modern css reset at the start of the styles. Andy Bell has a good one you can look up and use.
  5. The component max width should be in rem not px. This avoids a horrible narrow card for users who enlarge their font size.
  6. IMPORTANT - never write font size in px! Use rem.
  7. Keep css selectors as low specificity as possible. Use single class selectors not nested selectors if at all possible

  Marked as helpful

  1
• 

  P

  solvman•1,650

  @solvmanPosted 10 months ago

  Hi @TariCodes,

  Great job completing this project! 🎉

  I have a couple of suggestions:

  📌 First: You should swap colors for the body background and paragraph text.

  📌 Second: You should always start with <h1> element, not <h2>. In HTML, <h1> through <h6> tags are used to define headings, with <h1> being the highest level. Using them in order helps maintain the semantic structure of the document. It is important for SEO, accessibility, and semantic correctness. When you think of an h-tag, think not of style and size but more of the semantic structure of the document.

  📌 Third: wrap the main content of your HTML in the <main> element, which is also a semantic element representing the document's main content. Remember, <div> is not a semantic element and does not provide any meaning for SEO and accessibility. Instead of <div class="card-wrapper"> you should do <main class="card-wrapper">.

  Otherwise, very well done! 🎉🚀❤️

  Marked as helpful

  0

  ---

  

  Godbless Ikadoi•100

  @TariCodesPosted 10 months ago

  @solvman Thanks for your preview, I'll make changes to it as you've specified

  1

  

  T

  Grace•31,270

  @grace-snowPosted 10 months ago

  @solvman this is a card component, not a full Web page so h2 is the correct choice of heading level in this case.

  It's true that headings must always go in order and that's a great principle to share. But a h1 only applies to full web pages.

  Part of planning html is thinking about the context of where this "thing" you're building will be placed. If it's a whole page design you have to consider where the h1 is in the design (sometimes it is absent from the visible design so you have to add a visually-hidden h1 for example) then plan ea h subsequent heading level. But in a single card component it is almost always going to be lower heading levels like h2 or h3.

  If in doubt, choose the higher level (h2)

  I hope this clarification is helpful

  1

  

  P

  solvman•1,650

  @solvmanPosted 10 months ago

  @grace-snow, Thank you 🙏 for very helpful clarification 🎉

  0

  

  P

  solvman•1,650

  @solvmanPosted 10 months ago

  @grace-snow Can multiple <h1> be used if they are within the context of <article> (one per article), with multiple <article> elements per page? What confuses me is that according to HTML5 specifications, each article, section, and nav element can have its hierarchy of headings, starting with h1. For example:

  <article>
    <h1>Article Title 1</h1>
    <p>Content for article 1...</p>
  </article>
  
  <article>
    <h1>Article Title 2</h1>
    <p>Content for article 2...</p>
  </article>
  

  Do you know if this is valid?

  0

  

  T

  Grace•31,270

  @grace-snowPosted 10 months ago

  @solvman the html spec has never been fully followed, so although this is technically valid, in practice having multipe h1s on a page is not recommended as it creates a load of confusion for assistive tech users.

  It is much better for articles and sections to be labelled with h2s.

  1
• 

  Mariusz•120

  @MariusG1991Posted 10 months ago

  Hi,

  Good job, one thing I would change is text color in the description paragraph, use darker one for better readability, u can use coolors site for checking contrast ratio between text and background color.

  1