Skip to content
Submitted almost 3 years ago

Responsive 3-column challenge

Taylor•50
@TaylorC19
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

Hello again. This is my second attempt at this challenge. My first attempt was completed shortly after learning basic CSS, so it lacked any responsive elements. Since then, I started learning bootstrap, so I decided to try this challenge again. I believe I did well on the visual side of this website, but I wonder how well I did on the responsive side of the page. Question:

  1. I used @media to do the transition for the border corners. It "seems" to have worked, but I wonder if it is efficient.
  2. I had to use many classes to do the fine-tuning. Could you give me some tips for how to consolidate the use of classes?

Thank you!

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi Taylor, great job! Congratulations on completing the challenge.

    I have a few advice for you:

    • add main tag and wrap the card for Accessibility
    • remove all margin from .container class
    • use flexbox to the body for center the card. Read here -> flex guide
    • after set heigth of body to 100vh because Flexbox aligns to the size of the parent container.
    • try to add a little transition on the element with hover effect

    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.

    Overall you did well :)

    Hope this help and happy coding!

    Marked as helpful
    1
  • Taylor•50
    @TaylorC19Posted almost 3 years ago

    Thank you for the response. I quickly changed the family to sans-serif. I must not have noticed that. I didn't realize until I just opened my local index.html file and spammed refresh to see the switch. It looks so weird.

    One quick question. What is flexbox? I quickly google search it and looked at the link you gave, and I still wasn't sure. Is it like a library, similar to bootstrap, or something else entirely?

    0

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