my first project

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

HTML 🏷️:

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

• It's not necessary to wrap each element inside a div tag, you can use the element directly.

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

CSS 🎨:

• Use more descriptive class names to improve readability of front-end code. You can learn BEM naming convention to improve your class names.

• 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. Resource 📘.

• For better readability, consider changing the color of the paragraph element to a darker hue, such as hsl(220deg, 15%, 55%). This will increase contrast and make the text more legible against the background.

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

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

• 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.

.contanier {
    background-color: white;
    font-size: 15px; /* NOTE: Convert to rem o em*/
    /* margin: 100px auto; */
    word-wrap: break-word;
    /* width: 20%; */
    max-width: 320px;
    border-radius: 4%;
    /* max-width: fit-content; */
    /* height: fit-content; */
}

• 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.

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

Happy coding!