I can spot some immediate issues with the html on this I'm afraid. I hope this helps for other challenges too.
- learn how and when to write alt text on images. There is a good post in the resources channel on discord about this. The alt you have on the main image in particular is not descriptive.
- this is one card component. It is not a full Web page. That means it would go on a page, likely with other blog cards alongside it. A h1 is a page heading and you can't have multiple on a page. So you know the heading in this cannot be a h1, it would need to be h2.
- it is invalid html to place units inside the width or height attribute in html. They should hold numbers only.
- the purpose of the width and height attributes is to tell the browser what aspect ratio it should save space for while loading the image. That means if using width attribute you need to use height as well.
- Think through the most important part of this component - it's function. How would any user ever access this blog when there is no link included in there??
And now styling feedback:
- never limit the height of elements that contain text, including the body. Use min height instead of height so it can extend beyond the height of the viewport when needed.
- I recommend using flex column for centering a component in the viewport and not grid with place content center. The reason is because with that grid approach if a user has a larger text size and views the component on a smaller screen content can overflow on the left as well as on the right, which you cannot scroll to reveal. With the flexbox approach overflow would only happen on the right meaning users could scroll to reveal that content.
- you should not have a hover style anywhere when you've not got interactive elements (see above point). Hover styles indicate interactivity.
- you don't need to change max width in a media query
- you should be styling mobile first. Always make mobile styles the default.
- Media queries must be defined in rem or em not px
1
matbac85• 600
@matbac85
Posted
@grace-snow
Thank you for your feedback and the various articles you've shared with me. I read the one about the "alt" attribute and I have to say that it's clearer for me. I've adapted my code accordingly and I hope I didn't make a mistake!
As for the rest, I've adapted my code following all your recommendations. That's really nice and it's helped me a lot.
0
