I hope this feedback helps
- think about the context of where this component would be used on a site. It is not a full Web page, just a single card component, likely to sit alongside other blog cards. That means it must not have a h1. The h1 element is for a page heading. This card would sit lower on a page, likely alongside similar cards, so should be a h2.
- Alt text descriptions should not include words like "image" because it's on an element that already has an image role.
- it's not an important thing for these challenges necessarily but becomes important on large projects much later. HTML head order really matters for performance! Harry Roberts has some recommendations about this but the main gist is that the title should be at the top straight after viewport meta and favicon last. This is a really minor thing but.i figure it doesn't hurt to mention it.
- get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell has a good one you can look up and use.
- Never write font size in px!. Not even once. Very important.
- the card must not have a width. It should have a single max-width in rem. This ensures it can shrink narrower when it needs to and means the layout will work for people who change their default text size.
- you can't have a hover style on a card unless the whole card is clickable. That means the interactive element inside the heading needs to fill the space of the card as explained in the inclusive components site
- learning must not have a % width. Its extremely rare you'll use percentage widths at all to be honest. Instead learning should only use padding and the content to decide it's width.
- there is no need for a media query in this challenge from what I can see. But for future reference media queries must be defined in rem or em not px; and you should almost always be working mobile first. That means mobile/smallest screen styles are the default, then override properties go in a min width media query. I've written a post all about these foundational principles
Marked as helpful
3
Adann Jacinto• 770
@DanCodeCraft
Posted
@grace-snow Hi there! I want to first take a second to thank you very, VERY much for your comment. You have no clue how much this made me learn since then. Let me reply to your points, in case you have the time to re-check my code at some point. :)
- I do agree with the H1-H6 part. I honestly had the code originally with H2, but then I got a warning message from Frontend Mentor saying I was missing it - hence why I manipulated the size of the font. I changed it back to H2 and will ignore the warning message.
- I made a different alt text. I have yet to dive into SEO, I only know the very basics of it.
- I had no idea about the header hierarchy. I checked your recommendation and a few other sources I found online. Lesson learned and applied.
- I didn't know about the modern reset. I didn't apply it yet to this project since it's too small, but it will be there from now on.
- Fixed the font size. I first had the 62.5% method, but checked your link and I understood why it's not correct. Now I had the default size divided by 16. I hope that's the correct way.
- I agree about the hovering state. But I did that way to follow the images provided in the challenge. Would you be able to clarify how I could manipulate the shadow outside the box by hovering the text? I couldn't find an answer to it.
- Width fixed, lesson learned.
- The media query was added because I wasn't able to have space around the card when reducing the size to 375px - which, by the way, is not fixed to min-width and applied in em, instead of px. I want to understand how to fix it because when I go smaller than that, the card fills the sides of the screen.
Again: thank you very much!
0
@DanCodeCraft the site I shared inclusive components card component explains how to make a whole card clickable using a pseudo element.
0
