my first project

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 2 years ago

  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!

  01

  Marked as helpful