QR-Code-page

Community feedback

• 

  P

  Øystein Håberg•10,490

  @Islandstone89Posted 9 months ago

  Hi. The favicon is included in the index.html from the beginning: <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">. It appears left of the title on your browser tab.

  Additional feedback:

  HTML:

  • Move the .attribution styles to the CSS file.

  • Remove the <figure>, it is not needed here.

  • The alt text should be written naturally, without using - between the words. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor.io).

  • Never have text in divs alone. "Improve your" is a heading, and "Scan the QR code" and the footer text are paragraphs.

  • A footer should never be inside a main, as they are separate landmarks. Move the footer outside of the main.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • Use the style guide to find the correct font-family.

  • Use the style guide to find the correct background-color.

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • Remove the properties on main. To center the card horizontally and vertically, use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  

  And also add gap: 2rem to create space between the main and the footer.

  • max-width on the card should be in rem. Around 20rem works well.

  • Remove height and max-height.

  • Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

  • On the image, add display: block and change max-width to 100% - the max-width prevents it from overflowing its container.

  • To create the space between the image and the edge of the card, set padding on all 4 sides of the card.

  Hope this helps! :)

  Marked as helpful

  1

  ---

  

  Bright-Anyawe•30

  @Bright-AnyawePosted 9 months ago

  Thanks, 😊😊@Islandstone89

  1
• 

  Hassan Moataz•1,860

  @hassanmoaaPosted 9 months ago

  Hello @Bright-Anyawe!

  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: small;

  • i see you using pixels for many elements, never use pixels or small/large 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.

  ➖➖➖➖➖➖➖

  You can’t put text in a plain div that’s semantically not approved and HTML-wise wrong:

  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>

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

  3

  ---

  

  Bright-Anyawe•30

  @Bright-AnyawePosted 9 months ago

  Thanks, 👍😊😊😊😊 I appreciate it @hassanmoaa

  0