@ApplePieGiraffe
Posted
Hi there, LouiseCW! 👋
Well done on this challenge! 👍 Your solution looks good and is responsive! 😀
One tiny thing I'd like to suggest is that you perhaps use the a heading tag of the same level for all three headings in the card component (since one doesn't seem to be of any more importance than another in this design). 😉
As for styling the buttons, you can simply make set their background-color to transparent when they are hovered over so that the background of each section shows through them and you don't have to mess around with adding individual background-colors to each button upon hover:
button:hover {
background-color: transparent;
}
Hope that is helpful. 🙂
Keep coding (and happy coding, too)! 😁
Marked as helpful
@costelloeward
Posted
@ApplePieGiraffe Hello APG! 👋 Thanks very much, I'm glad you found it responsive.
That's a great point about transparent, I completely forget it can apply to buttons! Cheers 🙂
I started with h2 tags for all the headers and then the accessibility report flagged that there was no h1 tag. I've seen that multiple h1 tags is not best practice, but in this specific design would that be the best option?
@ApplePieGiraffe
Posted
@costelloeward
Glad to help! 😀
That's actually a good point about the <h1> tag (I forgot that the accessibility reporter flags that issue). However, some people have opinions that using multiple <h1> tags is okay and even encouraged in some cases! For now, I might still go with <h2> tags for all of the headings in this card just because it's more of a component that is likely to be used in a webpage (rather than just stand alone by itself, as in this challenge), and that webpage could probably have an <h1> somewhere else. Just a thought, I guess. 🙂
@ApplePieGiraffe
Posted
@costelloeward
Pro tip: the accessibility reporter won't automatically check your solution again when you update it, so you can still change the headings if you want, and as long as you don't hit "Generate New Report", your solution report should remain nice and clear. 😆
@costelloeward
Posted
@ApplePieGiraffe That's a great tip, thanks! 😆
@costelloeward
Posted
@ApplePieGiraffe Thanks, this is really helpful to think about the overall context a design might be placed in.
Cheers! 🙂
