Submitted 10 months ago

3-column preview card component

Mulugeta• 360

@MrDevM

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

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

give an feedback thanks

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted 10 months ago

Hello there 👋. Good job on completing the challenge !

I have other suggestions about your code that might interest you.

Use only one <h1> tag per page; use <h2> for section headings. Learn more here 📘.
You should use the <a> tag instead of the <button> tag because the Learn More button is a link to another page. Use buttons to perform actions like submitting a form or closing a modal and use links to navigate to another page. Read more here 📘.
For decorative car icons, leave the alt attribute empty to hide from screen-readers. More details here 📘.
Use relative units (em or rem) instead of pixels for font-size. Learn why here 📘.
Omit max-width: 100% in the body tag, as it's unnecessary for block elements.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

Øystein Håberg• 9,450

@Islandstone89

Posted 10 months ago

Hello, here is some feedback.

HTML:

The icons are decorative, so the alt text needs to be emtpy: alt="".
You should never have more than one <h1> - change the headings into <h2>.
"Learn More" would navigate to another page, so it must be a link, not a button.

CSS:

Performance-wise, it's better to link fonts in the <head> of the HTML then using @import.
It's good practice to include a CSS Reset at the top.
Font-size must never be in px. Use rem instead. Also, line-height should be unitless, or in percentages.
Remove max-width: 100% on body.
Delete the fixed width on .main - generally, you rarely want to set fixed dimensions.
Ideally, you want to do mobile styling as the default, then use media queries for larger screens. The media query should also be in rem instead of px.

Marked as helpful

Daniel 🛸• 44,230

@danielmrz-dev

Posted 10 months ago

Hello, @domxss!

You project looks great!

If you change your background-color to #F2F2F2, it will look even closer to the original design!

Other than that, great job!

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