QR code page with HTML and CSS (newbie challenge)

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 📄:

  • The text Improve Your Front-End Skills by Building Projects is considered a heading element.

  • The <br> tag is not a semantic element. If a screen reader user is reading the page, they will hear "line break", which breaks the flow of the content. Instead, use CSS properties like margin and padding to add vertical space between elements.

  • You should not use inline-CSS because it is not a good practice. Instead, you should use an external stylesheet to style your page. By doing this, you will be able to have a better organization of your code and will be able to understand it better.

  • For specificity reasons you should work with classes instead of ids because they are more reusable. You can use ids to work with JavaScript, but you should use classes to style your elements. You can read more about this here 📘.

  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. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.

  • You should use a CSS reset to remove the default browser styles and make your page look the same in all browsers.

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

    body {
        background-color: hsl(212, 45%, 89%);
        /* padding-top: 5%; */
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    

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

  Happy coding!

  Marked as helpful

  1

  ---

  

  Mochimooo•50

  @mochimoooPosted almost 2 years ago

  @MelvinAguilar Thank you so much for the tips! I appreciate your words of encouragement!

  1