Basic HTML and CSS

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Joseph Haddad, congratulations for your new solution!

  Your solution seems fine, you did a really good work wrapping the content for these 3 cards. Something you can improve here is to use a single class to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.

  About the semantics, you can replace all blocks that you've used <div> and replace with <article> thats a better html markup for this situation.

  Here's a complete guide for HTML semantic TAGS: https://www.w3schools.com/TAgs/default.asp

  You need to fix the container size that is a bit off, this challenge uses the standard container size that is max-width: 1110px.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  romila•3,570

  @romila2003Posted about 2 years ago

  Hi Joseph,

  Congratulations 🎉 for completing this challenge, the card component looks great and is responsive. You've also used the correct semantics which is great for accessibility. However I found some issues I want to address:

  1. I would suggest you change the media queries to have a min-width of 860px as your card looks quite squashed, particularly the buttons, as the screen size changes.
  2. To center the card in the center in desktop, you should use the flex property on the body e.g.

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  

  Overall, your project looks great and wish you the best for your future projects so keep coding 👍.

  Marked as helpful

  0