Card Preview with HTML and CSS

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  Hiya @gina-wang-1021,

  Congratulations on your solution, it looks very close to the design!

  A bit of friendly constructive feedback:

  I suggest a change to the styling of your main:

  Before

  main {
      background-color: #F4D04E;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
  }
  

  After

  main {
      background-color: #F4D04E;
      min-height: 100vh;
      display: flex;
      align-items: center;
  }
  

  I removed the width: 100vw. main is already a block element which take up the full width by default. You don't have to set a width on it to make it full width. I changed the height to min-height: 100vh. This makes sure main takes up 100vh as a minimum while still being able to grow. If you just set height: 100vh you'll run into overflow issues when the content gets larger than 100vh.

  I see you use a lot of ID's to style your elements. I recommend trying to style the bulk of your elements using classes as they are more reusable. Also try to give them more descriptive names like .card and .card-title for example. You already made a good start with this, keep it up!

  Try giving your a tag (title) a href so you have the basic link functionality like the correct pointer showing up. You still have to style the link properly then to make it look like the design but this is good exercise.

  I hope you find my feedback helpful and I would appreciate it if you could mark it as helpful if it did!

  Let me know if you have more questions and happy coding!

  Marked as helpful

  1

  ---

  

  P

  Gina Wang•170

  @gina-wang-1021Posted 4 months ago

  @DylandeBruijn Thank you so much for the reply! The suggestions were really helpful as I wanted to include more best practices in my code but precise and easy-to-understand advice from experienced developers is hard to find. Thank you so much!

  1