Hi, on this one I see some problems that definitely need addressing. I hope they are helpful.
- Always update the title in the html head.
- The alt text on this image isn't helpful. I think you mean to treat it as a decorative image, in which case the alt should be empty with no spaces
alt="". - It's extremely important to use headings appropriately. That means use headings for heading content and consider the most suitable level of heading. In this, the learning category is definitely not a heading. It's just a paragraph. The heading is the name of the blog. And similar to your previous challenge, this blog title wouldn't be the main page heading in a card like this so you know it must not be a h1.
- Try to remember that text should never be in a div or span alone. There is always a meaningful element available, even paragraph.
- I question if the author image should be treated as meaningful content if it's alt text is only going to repeat the name that immediately follows it. That seems pointless to me. I recommend you read the posts in the resources channel on discord about how and when to write alt text on images.
- Don't limit the height or elements that contain text, including the main landmark. Min-height is fine to use but height is not. As soon as you set a fixed height the browser will do all it can to try and honour your request, even if the content is taller than a mobile screen and has to overflow at the top the browser is just trying to honour that impossible fixed height.
- the component max width should be in rem, just like in the last challenge.
- the component must not have a min width. That is immediately going to make it fail a reflow test because it will overflow some screens. We have to make our solutions work without unnecessary horizontal scroll down to 320px wide. But the crux of the point here is you don't need a min-width and don't add stuff you don't need.
- The component also doesn't need a min-height. Let the browser do it's job and decide what height is needed based on the content inside.
- you shouldn't need flex shrink or flex wrap in this either. Be careful not to bloat css. Every property you leave in must be there for a good reason.
- The category text also must not have a width or height. All it needs is padding, nothing else for sizing.
- Most important of all on this is that you've missed out the core functionality of this component. Note how there is a hover style included in the design, and how the content clearly implies this card is acting as a signpost to a blog elsewhere on a site. That all means it must include a link, inside the heading, wrapping the heading text.
- Once that missing link has been added its your job to make the whole card clickable, not just the link. You can do that by making the card position relative and giving the link a pseudo element that's sized and positioned to cover the card. That effectively extends the link over the whole card so it's all clickable.
As with any challenge that includes an interactive element, make sure you test it with keyboard as well as mouse.
0
