Skip to content
Submitted about 1 year ago

QR code component

Anik Dash Akash•50
@anikakash
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  1. As new so understanding the requirements was mainly difficult.
  2. Most of the codes are clear.
  3. How to follow best practices.

Community feedback

  • P
    Øystein Håberg•13,220
    @Islandstone89Posted about 1 year ago

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Create a <main class="card">, with an image, a heading and a paragraph inside - that is all you need, so you can remove all of the divs.

    • The image has meaning, so it must have proper alt text. 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).

    CSS:

    • Performance-wise, it's better to link fonts in the <head> of the HTML than using @import.

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

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

    • Add justify-content: center; to the body to center the card horizontally. Remove any margins on the card.

    • The max-width on the card should not be in px, but in rem.

    • Remember to have a fallback for fonts, like this: font-family: "Outfit", sans-serif;.

    • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • 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 width to max-width: 100% - the max-width prevents it from overflowing its container.

    Marked as helpful
    2
  • P
    Daniel 🛸•44,780
    @danielmrz-devPosted about 1 year ago

    Hello @anikakash!

    Your solution looks great!

    I have a couple of suggestions for improvement:

    • First: In order to make your HTML code more semantic, use <h1> for the main title instead of <h2>. 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.

    • Second: Still about semantic HTML, use <main> to wrap the main content instead of <div>.

    All these tag changes may have little or no 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!

    2
    Anik Dash Akash•50
    @anikakashPosted about 1 year ago

    @danielmrz-dev Thanks a lot for your suggestion. i will try to maintain this.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord