Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3 Column Preview Card

Yuko-code 235

@Yuko-code

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my 2nd challenge. The first challenge took 3 days (!) but this time it took me less time, phew!

Community feedback

@tommynueve

Posted

Hey, really good job overall! Some things that I noticed which require a bit of improvement:

  1. On desktop view, there is too much whitespace between the buttons and the end of the card, and maybe the margin between the button and the text could be slightly shorter. I noticed you used the card height fixed to 70vh, I will advise against setting card heights based on vh as it can make things stretch too much, you can just set them to a specific height and it will make your development resemble the design better.

  2. Buttons increase slightly on size when hover over them, and causes the button to appear as if it is moving down. That is because you are adding border on top of the actual height (In case you don't understand why, I recommend you check on the css box model). A little trick I learned over the years is to add the border to all buttons in their default state, and then on :hover you can just remove the background color (or set it to the same as the card), then they will all still have the same size. Bonus: adding cursor: pointer; to all buttons is normally a good idea.

  3. The contrast between font color and background color in the yellow card is too low, below accesibility guidelines, you need to darken it a bit. What I would do is to initially pick the same color as the card itself (at this point you won't be able to see the text as it will have the same color as the bg) and then with the color picker start moving it towards white, until you reach at least 4.5:1 contrast ratio. You will end up with a "yellowish-white". If you are just learning FE development, don't bother about everything accesibility related yet, but I do suggest paying attention to color contrast as it will grow on you to the point where you will spot it right away ;)

Marked as helpful

0

Yuko-code 235

@Yuko-code

Posted

Thank you for the detailed feedback @tommynueve :) this helps me a lot! I didn't realise that I haven't paid much attention on accessibility. I've just started learning HTML and CSS last week after a long break. I'm really excited to learn more! Thanks again.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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