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

Erick Cernaā€¢ 60

@erickcerna

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


Hi everyone, I did this project to practice my CSS Grid and FlexBox knowledge. I would appreciate if you leave me any comments or suggestions about this project.

Community feedback

Folarin Akinloyeā€¢ 1,240

@folathecoder

Posted

Hi Erick!

Nice submission! Kudos! Your implementation looks nice and it responds well on all devices.

There are some tiny details you missed:

  1. You used the wrong font family for your card headings. It ought to be "Big Shoulders Display".

  2. The buttons are a bit bigger than the sketch, you can solve this by reducing the left-right padding to 30px or so, instead of 50px. As a Frontend Developer, you should always try to recreate a sketch design as it is. (Attention to details!)

  3. You can work on accessibility by using rem instead of pixels.

  4. You can also assign variables to your font family, just like you did for colors. This will make your work more maintainable and avoid repetition.

  5. You can take full advantage of SCSS functionalities by using mixins for your media queries (if you want to!).

Overall, you have done well. Keep it up, Pal!

3

Erick Cernaā€¢ 60

@erickcerna

Posted

@folathecoder Thanks for your comment. šŸ˜ I will continue learning about CSS.

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