blog-preview-card-main, Desktop view HTML5 and CSS

Community feedback

• 

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 10 months ago

  Hello there 👋. Good job on completing the challenge!

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

  CSS and Styling:

  • Implement CSS custom properties to define and utilize project colors more easily.
  • Instead of fixed widths, employ max-width and min-width for flexible and responsive design. For exmaple replace the width: 20rem from the .card for a max-width: 21.75rem
  • Let the content decide the height of the elements. Use padding and margins strategically for this purpose.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".
  • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Greg Hooper".
  • Maintain semantic HTML structure by using appropriate elements for their intended purposes.

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  Marked as helpful

  1
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 10 months ago

  Hello @orpd0523!

  Your project looks great!

  I noticed that you used margin to place the card in the middle of the page. Since you used a lot of margin, a vertical scrollbar is appearing. Here's two very efficient ways to center the card (without unnecessary scrollbars):

  • You can apply this to the body (in order to work properly, you can't use position or margins):

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

  • Or you can apply this to the element you wanna center (works well with projects with only one centered element, like this one):

  .element {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  

  I hope it helps!

  Other than that, you did an excellent job!

  Marked as helpful

  1