Rebecca Padgett• 1,640
@bccpadge
Posted
Hello @illuminasrul. Congratulations on completing this challenge!!!🎉
I have a few suggestions you might be interested in to improve your solution.
HTML 📃:
- Wrap all your content using the
<main>tag - Images that are decorative you can leave the alt text blank and add
aria-hidden: true;so it can be ignored by screen readers - Add alt text to the avatar image: `alt="headshot of Greg Hooper">
- For the published date you can wrap the date using the
<time>tag Example
<p class="metadata">
Publish <time datetime="2023-12-21">21 Dec 2023</time>
</p>
- Your
div.containerhas unnecessary CSS styles
.container{
max-width: 1440px; */
/* height: 100vh; */
/* margin: 0 auto; */
display: grid;
place-content: center;
min-height: 100vh;
}
CSS 🎨:
-
Adding a CSS Reset is good practice to remove all default styles in the browser
-
You don't need to add
font-size:16px;on the<body>because that is the default font size -
When you add
min-height:100vh;your component be placed in the center of the website. -
Be sure to use rem on other CSS properties like
marginandpaddingbecause it better for accessibility.
Here is my solution to this challenge Blog preview card
Hope you find it useful and don't hesitate to reach out to me if you have questions
1
