Skip to content
Submitted almost 2 years ago

3-column-preview-card-component

Luis•30
@Pike1868
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 learned a lot by tackling this challenge,and took a whole course because I was frustrated when I couldn't figure it out before. I learned that I am good at getting the easier parts of css, like colors and fonts, since they're provided. I still struggled with the layout but after taking the Kevin Powell's course when I tried different things I had a bit more understanding of the things I attempted. Adding css grid helped tremendously as I had tried to stay away from it before because I didn't understand it. I finally arrived at a solution I felt good about but I think it could still be better. If any one would like to take a look at my code and provide any feedback I would greatly appreciate it. Lastly I learned that I still have a long way to go with css but I do feel like I made some progress with this challenge.

Community feedback

  • Felipe Salazar•140
    @andressalazar08Posted almost 2 years ago

    @Pike1868 Hi Luis,

    First of all, I congratulate you on your solution. I have addressed this challenge as well and could suggest some things that you can improve.

    • Your design is up at the top in the browser. If you apply the following property on the body min-height: 100vh; You will see that the card is located in the center of the vieport high. this means that it will be located occupying the entire view of the browser. I share an article that complements my observation:

    link to min-height explanation

    -You are mixing px and rem. Try to use relative measures of length (rem) instead of pixels for properties related with length units. These will perform better if you need to make a global change to your design. By default 1rem == 16px

    -It will be very useful in future projects to use the colors and define them as variables. In this way from the root you can manage with a single change the colors of several elements. This is also useful in using fonts if you want to define them in root as well.

    :root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
}

.two {
  background-color: var(--main-bg-color);
}

    I think that for now is what I can contribute to you, I congratulate you, Happy coding!!.

    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