Well done on the solution.
You don't need to waste time measuring everything, just get these solutions close and that's fine. In a real job you will always have design files and should be given variables anyway.
There are a few points for improvement on this though..I hope these are helpful!
- you don't need a section for the text content inside the card. You're only adding that for a layout purpose. It's fine to use divs for that! This isn't what a section is for and makes the code less reasonable by trying to present the text in the card as its own component.
- When you build single component demos like this try to think about the context of where it would be used in a real site. This is a card, likely to sit on a page somewhere maybe with other cards. It would never be used to serve up the main heading for a page of content, so that tells you it wouldn't ever be a h1. Use a lower importance heading level like h2.
- get into the habit of including a full modern css reset at the start of the styles in every project. What you have now isn't what I mean. Look up Andy Bell's or Josh Comeaus. Both have good explainers.
- I strongly recommend you don't resize the html font size to 62.5%! I've written all about this and encourage you to read it.
- don't give the component an explicit width or it won't be able to adapt when it needs to. Instead, give it a max width in rem (optionally it can have width 100% as well). This let's the card go narrower if it needs to eg on a smaller screen, and using rem means the layout will scale correctly for all users including those who have a different text size setting.
Marked as helpful
@ayx234
Posted
@grace-snow
Hello grace,
Thank you for your detailed reply! I updated my code with your suggestions, and appreciate having professional feedback and your article.
How do I know when it's appropriate to use divs? I try to avoid them for accessibility concerns, but from your feedback I understand they are ok to use for layout purposes? when do they cause accessibility issues?
@ayx234 they dont cause accessibility issues. The sections you're using are actually exactly the same as divs - they are meaningless unless they are labelled. It's only once a section is given an accessible name (e.g. aria-label) that it becomes a landmark and is called out in the accessibility tree.
The point here is more about code readability. This is only one card. It's one section of content and should be treated as one, not two or more.
The important landmarks for accessibility are really the core structural landmarks of a page — header and/or nav, main, and footer.
Marked as helpful
