@Alex-Archer-I
Posted
Hi!
Well, that's cool that you did it and uploaded here, we both could learn that way - you by receiving tips and me with gathering practice by inspecting someone's code =)
So, here is a couple suggestions, if you don't mind =)
You doesn't need a role tag here. At first aria roles have a specific values and there is no card role. At second - every semantic tag has it's own role and you should use role attribute only in rare cases when you can't use semantic tag for some reasons. That doesn't mean that every div should have role though, divs often used as mere wrappers and they doesn't really need one.
Than, speaking about semantic, every page should contain main tag. So you can replace div with it.
About responsive sizing. For width you can use this trick:
main {
max-width: 320px;
width: 95%;
}
That way your card will keep 320px width on big screen but be able to shrink on the small ones. You also can omit width at all and it became 100%.
As for height I suggest you not to explicit it at all. In most cases (it's always an exceptions of course) it's better when the content defines height of the container. You can omit it and it'll be set to auto - default value.
I see you use size property for p. Guess you mistyped the font-size one =) I really recommend you to get familiar with rem values and use them for font sizes. That values depends on user's font settings and provide better UE.
So. Hope that could helps. Welcome. You did cool. Keep doing =)
And totally don't hesitate to upload you new solutions, ask, comment or stuff =)
Marked as helpful
