Skip to content
Submitted over 2 years ago

3 column card component

WattsWebDev•0
@WattsWebDev
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

I'm new to web development and would appreciate any feedback on how to improve.

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    Hi WattsWebDev, I took some time to look at your solution and you did a great job!

    Tip of graphic design: With font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading) ... for the designer it's a really awful font!

    • I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.

    Also add main tag and wrap the card for Accessibility

    Overall you did well :)

    Hope this help and happy coding!

    Marked as helpful
    1
    WattsWebDev•0
    @WattsWebDevPosted over 2 years ago

    It helped me out a lot! Thanks a bunch @denielden

    1
  • Abdul•8,540
    @SamadeenPosted over 2 years ago

    Hey Watt! Cheers on completing the challenge . Here are my suggestions..

    1. You should use <main class="container"> instead of <div class="container">
    2. It's okay to stick with the boilerplate for the project . Over all you did very well.. Happy coding!!
    Marked as helpful
    1
  • vcodey•270
    @v-codeyPosted over 2 years ago

    Hello @WattsWebDev ! Congratulations on completing this challenge There are a few suggestions I would like to give you

    • Add main tag inside body
    • Its better not to remove the default code provided by frontend mentor like you have removed the link the a tag . Do not remove it, rather replace the div with footer
    • the body of the html should be like
    <body>
   <main class="container"> 
<-- Your code -->
   </main>
<footer class="attribution">
   Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
   Coded by <a href="Your profile link">your name</a>.
 </footer>
</body>
    Marked as helpful
    1
    WattsWebDev•0
    @WattsWebDevPosted over 2 years ago

    @v-codey I appreciate the suggestions and will us them for better practice :)

    0
  • kelvinhe04•340
    @kelvinhe04Posted over 2 years ago

    Really great work! Keep it up !

    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