Skip to content
Submitted over 1 year ago

HTML, CSS

Freshta Nazari•80
@Freshtanazari
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

hi everyone! would appreciate any constructive feedback.

Community feedback

  • Tamana•210
    @Tamana123-2Posted over 1 year ago

    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
    2
  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    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
    1
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted over 1 year ago

    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
    1

Please log in to post a comment

Log in with GitHub

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