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

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!

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!