Submitted over 1 year ago

Second take on Mobile First 3-Column Preview Card Component

Dimitar Radev• 930

@Mitko90

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my second take on this challenge with a few changes.

Here's what I've changed:

Removed the article element from the page after I was told it was being used incorrectly.
Changed my h1 headings to h2 as it can be reused.
Added a visually hidden h1 title so I don't get accessibility warnings.
Changed my <button class="btn"> to <a href="#" class="btn"> as these buttons are supposed to be directing viewers to different parts of the site.
I changed the px value in my @media to em for improved accessibility.

A big Thank you to @vcarames for all the suggested changes on how to improve my coding.

As always all feedback is welcome and I'm grateful to everyone who takes the time to view and correct my code.

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted over 1 year ago

Hi, Mitko! 👋

Nice HTML markup! 👏

Five things that can be done better.

Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.
Remove font-weight: 400 from the <body> styling. It is already the default styling.
Use rem unit for the max-width of the .cards.
Add some padding to the <body> to prevent the cards from touching the edges of the page.
Import the Google Fonts using <link> tags instead of @import for better performance.

I hope this helps. Happy coding! 😄

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord