Main page using CSS

Community feedback

• 

  hitmorecode•7,240

  @hitmorecodePosted 4 months ago

  I took a look at what you did. Here are a few thing you can do to improve your page.

  • Let's start with CSS reset. Make it a good habit in applying CSS reset in your page. Here is a simple example of a CSS reset.

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

  • After applying CSS reset you don't have to add margin: 0; or padding: 0;.
  • If you want the page to have 100% height, it's best to do it like this min-height: 100vh;.
  • You don't to add width: 100%' on the body. By default the body is always 100%.
  • Avoid giving classes or id's the same name as elements. Don't use body for a class name.
  • I don't understand why you used position relative.
  • You have justify-content: center; without using flexbox.

  body {
      /* margin: 10px auto; */
      /* justify-content: center; */
      background-color: hsl(30, 54%, 90%);
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  • As you can see the image is not centered, make these changes to fix this.

  img{
      height: 300px;
      /* max-width:600px; */
      border-radius: 15px;
      /* min-width: 375px; */
      width: 100%;
  }
  

  • When you have a font that's going to be used in multiple places, you can just add it on the body.
  • You did not used media query to make the page responsive.
  • Some fonts don't match the design.

  See if you can fix these things and if you need help let me know.

  I hope you find this helpful. Keep it up 👍👌

  0