1st attempt - 3 column Preview Card Component

Hi

A few issues you need to address on this

• use interactive elements for interactive behaviour. Not paragraph tags
• once those elements are updated make sure you always give interactive elements a focus-visible style. This is usually a bold outline and it's purpose is to help keyboard users know where they are on the page and be able to interact with the elements
• use min height 100vh not height
• this is unreadably small on mobile. 60% width and tiny rem values is no good for readability. Instead I suggest using max-width in rem on your component and never going smaller font size than equivalent of about 13px. (The style guide actually tells you what size the body font should be on this, and that is for mobile as well)
• it doesn't matter for this one now but next time work mobile first. Code is more performant that way, usually shorter too, and it is an established best practice

Hey!! Cheers 🥂 on completing this challenge.. .

Here are my suggestions..

• You should use <main class="container"> instead of <div class="container">.
• You can wrap your attribution section in a footer tag to avoid accessibility issues.

This should fix most of your accessibility issues

. Regardless you did amazing... hope you find this useful... Happy coding!!!

Hello Sean,

Great job, as well as what Grace and Abdul said also to include the font family in the design file as well as it looks like it’s default font.

Keep on coding you do fine.

Thanks

Jon

That’s great, if you struggle with importing the Google font then you can always message me on slack, couple of people have needed help.

Thanks

Jon