Skip to content
Submitted over 3 years ago

3-column

Erick Cernaā€¢60
@erickcerna
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, 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
    @folathecoderPosted over 3 years ago

    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
    @erickcernaPosted over 3 years ago

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

    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