Skip to content
Submitted about 2 years ago

QR-Challenge

Alex•100
@AlexDevOp4
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

What did you find difficult while building the project?

  • I found that centering the card in the middle of the screen was the biggest challenge for me.

Which areas of your code are you unsure of?

  • I want to get better with semantic tags, instead of using divs everywhere. Something I need to work on.

Do you have any questions about best practices?

  • Again better uses of semantic tags.

Community feedback

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

    Hi @AlexDevOp4 👋, 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="...">
      <article  class="...">
         . . .
      </article>
   </main>
   <footer class="attribution">
      . . .
   </footer>
<body>
    • The tag <div> is used to defines a section in an website. It is used to have a container styled with CSS, set special alignment or the content needs a special positioning and 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>
    • You can add the following classes to center it: items-center and h-screen:
    <main class="flex items-center justify-center h-screen">

    Reference

    I hope those tips will help you.

    Good Job and happy coding !

    Marked as helpful
    1
    Alex•100
    @AlexDevOp4Posted about 2 years ago

    @MelvinAguilar Thanks! Yeah this is very helpful!

    1

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