Skip to content
OverviewSolutions
11
Comments
2
Ana Milanezi
@anamilanezi

All comments

  • Jesse Negrete•50
    @JesNegreteSubmitted over 1 year ago

    This project was done using HTML & CSS. If I could have done anything differently please let me know. I'm always curious to see what other people came up with for their solution.

    Qr Code Component using HTML & CSS

    2
    Ana Milanezi•190
    @anamilaneziPosted over 1 year ago

    Hi Jesse, congratulations on completing this challenge!

    A simple improve can be achieved by simply defining a text-align: center for your <h1>.

    Other thing I've noticed is that you used a <div> to the wrapper container instead of the <main> which is a semantic HTML tag, and also left the alt attribute empty on your image. This are all related with the page accessibility, and are some details that I've actually started to pay attention thanks to the Frontend Mentor community and their feedbacks.

    Hope this can help you somehow! Congratulations again and keep going! 💪

    Marked as helpful
    0
  • slovak82•10
    @slovak82Submitted over 1 year ago

    I am not sure about html semantic structure and want learn a better approach of css use for this simple page. Additionally, want to know how to better create "wrapper" for the body to make it 100% width and height

    qr-code-component-main

    2
    Ana Milanezi•190
    @anamilaneziPosted over 1 year ago

    Hi Slovak! Congratulations on completing this challenge 🥳

    I'm not sure if this answer your question about the body wrapper, but you could use the universal selector to do a basic reset on the page, removing default padding and margin and also box sizing to border-box, like this:

    * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

    Then you could set the body display to flex to make the content centered in the page, and use the viewport height unity to take the full height of the page:

    body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

    This is a boilerplate for CSS that I like to use when starting my projects.

    There is a nice explanation for this concept here in this freeCodeCamp post

    As a second note, I would suggest to you consider using <h1> for the heading instead of a <p>.

    Hope this is helpful for you, happy coding! ⭐

    0