QR code usinig html and css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 🏷️:

  • "Document should have one main landmark" + "All page content should be contained by landmarks" :

    Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

    • Use <main class="main-object"> instead of <div class="main-object">

    • Use <footer class="attribution"> instead of <div class="attribution">

  • "Page should contain a level-one heading":

    Always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>).

    • Use h1 instead of h2.

  • The <br> tag is often used to create line breaks, but it doesn't convey any semantic meaning. When a screen-reader reads the text, it will break the flow of reading at the line break tag, which can be confusing for users. More information here.

  Alt text 📷:

  • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

    If you want to learn more about the alt attribute, you can read this article. 📘.

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

  • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

  CSS Reset 🔄:

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0

  ---

  

  mohamed nasr•160

  @stitch-606Posted almost 2 years ago

  @MelvinAguilar Thx I will do my best 😄

  0