Skip to content
OverviewSolutions
11
Comments
2

Ana Milanezi

@anamilaneziBrazil190 points

I'm a curious and creative person that likes to understand how things work :)

I’m currently learning...

JavaScript, NodeJs, advanced CSS, Python and networks.

Latest solutions

View more solutions

Latest comments

  • Ana Milanezi•190
    @anamilanezi

    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
  • Ana Milanezi•190
    @anamilanezi

    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! ⭐