HTML AND CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

  I have some recommendations regarding your code that I believe will be of great interest to you.

  HTML 📄:

  • Wrap the page's whole main content in the <main> tag.

  • The text Improve Your Front-End Skills by Building Projects is considered a heading element (h1).

  CSS 🎨:

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Source 📘.

  • Centering an element with position: absolute or position: fixedwould make your element behave strangely on some screen sizes, "there's a chance the content will grow to overflow the parent". You can use Flexbox or Grid to center your element. You can read more about centering in CSS here 📘.

  • Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of 320px or 20rem to make sure that the component will have a maximum width of 320px on any device, also remove the width property with a percentage value.

  • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

    result:

    body {
        background-color: hsl(212, 45%, 89%);
        margin: 0px;
        /* NOTE: Using grid to center the card */
        min-height: 100vh;
        display: grid;
        place-content: center;
    }
    
    .content {
        background-color: hsl(0, 0%, 100%);
        /* NOTE: Remove all position attributes and use max-width instead of width */
        /* width: 18%; */
        max-width: 320px;
        /* margin: auto; */
        /* position: fixed; */
        /* top: 25%; */
        /* left: 38%; */
        border-radius: 20px;
        /* NOTE: Create a padding to prevent the image and text from touching the component's edge. */
        padding: 20px;
    }
    
    .content img {
        /* NOTE:  Only use width: 100% so that it fits the component, the padding will not let the edges touch, and all other styles are unnecessary. */
        width: 100%;
        /* width: 90%; */
        /* height: 50%; */
        /* padding-top: 5%; */
        /* padding-bottom: 5%; */
        /* margin-left: 25%; */
        /* margin-right: 25%; */
        /* position: relative; */
        /* right: 20%; */
        border-radius: 10%;
    }
    

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0