Skip to content
Submitted over 2 years ago

HTML, CSS

Freshta Nazari•80
@Freshtanazari
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

hi everyone! would appreciate any constructive feedback.

Code

Please log in to post a comment

Log in

Community feedback

  • Tamana•210
    @Tamana123-2

    Hi Freshta Nazari! Great job for completing the project. The height of container is larger than the exact design, plus it is not centered. your background-color has not been set. Not perfect, but you tried hard enough, see your project better next time. Nice time.

    Marked as helpful
  • Vanza Setia•27,715
    @vanzasetia

    Hi, Freshta Nazar! 👋

    You don't need to add type="text/css" to the <link> for the stylesheet.

    Wrap the text with a meaningful element like a paragraph element. There should not be text in <span> and <div> alone.

    You use <span> with heading class name. Why don't use a heading tag?

    Don't use id selectors for styling. There are two reasons for not using ID’s to style content:

    • They mess up specificity because they are too high (the most important reason).
    • They are unique identifiers. So, they are not reusable on the same page.

    Learn more — What the ID attribute is REALLY for

    You should define the font-family and other font stylings on the <body> element. This way, you can prevent yourself from repeating those properties since text elements will inherit the body's font styling.

    You should set a fallback font family—in this case, sans-serif. Otherwise, the default font family will get applied which is not a sans-serif font family.

    I recommend using the forward slash instead of backward slash for the file path. That is the common convention. It should work even though you are using Windows.

    I hope you find this useful. Happy coding! 😄

    Marked as helpful
  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar

    Hello again 👋. Good job on completing the challenge !

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

    HTML 🏷️:

    • You should add an empty alt attribute to images, otherwise some screen readers will read the file name if there is no alt attribute.
    • 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. You can read more about this here 📘.

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

    Happy coding!

    Marked as helpful

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