Skip to content
Submitted 9 days ago

Qr code page with HTML and CSS

Tanyaradzwa(Tanya)•70
@Tanya-abi
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 are you most proud of, and what would you do differently next time?

I am mostly proud that I completed the project, I was starting to get a bit frustrated and discouraged because I struggle with css flex.

Next time, I will seek help sooner. I tried to do exeuthing from the top of my head but eventually used pintrest to get a cheatsheet for css flex.

What challenges did you encounter, and how did you overcome them?

As I said before, I struggled with positioning the contents correctly using css flex. It took a while to get it right.

What specific areas of your project would you like help with?

When I used css flex I set the content to be set with space-around. However in the figma design I can tell the paragraphs are much closer to each other and I failed to do that.

Community feedback

  • Huy Phan•2,300
    @huyphan2210Posted 8 days ago

    Hi, @Tanya-abi

    I checked out your solution and I have some thoughts:

    • Flexbox on the Card: Your deepest div (the card) doesn’t actually need Flexbox, as its child elements align naturally in a vertical flow. Since two of the three elements are block-level by default, removing display: flex on the card and adding margin directly on the img and the two p tags should help address the spacing issues you mentioned between the paragraphs.
    • HTML Structure: Your current structure has extra div wrappers that can be simplified. Instead of this:
    <body>
  <div>
    <div id="container">
      <div>

      </div>
    </div>
  </div>
</body>

    You could streamline it like this:

    <body>
  <main class="card">

  </main>
</body>

    Replacing div with main makes the HTML more semantic, indicating the primary content of the page.

    • Semantic Elements: Instead of using two p tags (one for the title and one for the paragraph), consider using h1 for the title to enhance readability and improve HTML semantics.

    There are a few other areas for improvement, but good job on completing the challenge! Keep at it, and you’ll keep improving over time.

    Hope this helps!

    Marked as helpful
    1
    Tanyaradzwa(Tanya)•70
    @Tanya-abiPosted 8 days ago

    @huyphan2210 Thank you so much for the feedback. It helped me a lot. I managed to sort out the issues.

    0
  • Account deleted

    Well done! on completing the challenge. Here are my observations on your code.. I checked and noticed your non usage of semantic HTML such as (main, section, article etc) Using divs is quite okay but using semantic HTML best structures your code well for easy readability and understanding. Don't always neglect using semantic HTML to properly define the structure of your web pages/projects. Also, I discovered that your project would have adapted well on mobile screen if you had sized the qr code image down to (probably 240px) and card width to 300px along side max-width to 100% so as to fit in seamlessly on mobile.

    Marked as helpful
    0
    Tanyaradzwa(Tanya)•70
    @Tanya-abiPosted 8 days ago

    @Chijioke-Nwabasili Thank you do much for the feedback. I used the measurements given on the figma document to create the card. I did think of reducing the size but then I thought we are supposed to follow the figma document to the tee. Also when I checked the responsiveness usig developer tool, it seems owk.

    So should I still reduce sizes or follow the figma requirements?

    0
  • Account deleted

    Well, you could reduce the size of the image and probably adjust the width of the card and still follow the figma requirements at the end of which you would still achieve same good result and outcome.

    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