Skip to content
Submitted 9 months ago

Qr code component

Ghosk04ā€¢30
@Ghosk04
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

The most difficult for me was to position items on the website, cause my items were not align like they would be. I'm perfectly of what i wrote in my code. I just want to know if is it a way to do this challenge easier than mine. Thank you!

Community feedback

  • Daniel šŸ›øā€¢44,250
    @danielmrz-devPosted 9 months ago

    Hello @Ghosk04!

    Your solution looks great!

    I have a suggestion for improvement:

    • Use <main> to wrap the main content instead of <div>.

    šŸ“Œ Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.

    This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

    I hope it helps!

    Other than that, great job!

    Marked as helpful
    0
    Ghosk04ā€¢30
    @Ghosk04Posted 9 months ago

    Thanks for your feedbacks @danielmrz-dev , i will try my best on the next challenge

    0
  • Nnoruka Maryjane .Cā€¢120
    @emjayrukaPosted 9 months ago

    Hey Ghosk04. I can see that you've put a lot of effort and dedication into this. I'd like to offer some constructive feedback that may enhance the overall structure and functionality of your work. It seems the project relies heavily on generic <div> tags rather than utilizing semantic HTML elements such as <main>, <nav>, and <footer>. Incorporating these elements can significantly improve the document's structure, making it more accessible and easier to understand. For example, the <div.main> could be replaced with a <main> tag, while the <div.attribute> could be replaced with a <footer> tag.

    Also, to position your "<div.big-box>," I would suggest:

    height: 100vh; justify-content: center; align-items: center; max-width: 375px (the recommended width by the design)

    I believe these adjustments will benefit your future projects and also contribute to their overall accessibility and maintainability.

    I hope I was of help.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
    0
    Ghosk04ā€¢30
    @Ghosk04Posted 9 months ago

    Thanks for your feedbacks @emjayruka, i will try to do so

    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