Skip to content
Submitted about 2 years ago

Simple Page QR code component

Ouattara•200
@Kaji17
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

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,160
    @MelvinAguilarPosted about 2 years ago

    Hi @Kaji17 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

    Here are some suggestions to improve your code:

    With semantic tags:

    <body>
   <main class="main-content">
      . . .
   </main>
   . . .
<body>

    • Don't use <br>, the <br> tag is not semantic. It should never be used to add vertical spacing, it is only used in specific cases (e.g. poem or an address) also when a screen-reader reads the text it will break the text at the <br /> tag and break the flow of reading, You could use padding or margin styling via CSS to avoid them. More Information here.

    • Add a <h1> tag in your solution, The <h1> element is the main heading in a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; always start from <h1>, followed by <h2> and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

    Solution:

    <h1>Improve your front-end skills by building projects</h1>
    • Use max-width: 324px to .main-content selector instead of width.
    • Use min-height: 500px to .main-content selector instead of height.

    I hope those tips will help you.

    Good Job and happy coding !

    1
    Ouattara•200
    @Kaji17Posted about 2 years ago

    @MelvinAguilar thanks, i follow all your advice sensei :)

    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