Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Simple Page QR code component

Ouattara 200

@Kaji17

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@MelvinAguilar

Posted

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

@Kaji17

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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