Skip to content
Submitted 6 months ago

Four Card Feature Section by actuallyWIKKO

ActuallyWIKKO•20
@ActuallyWIKKO
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

First this was pretty smooth. I started with the mobile view and then moved on to the desktop view. It turned out good though. I'm most proud of the fact that I managed to get this in a shape of good to go. I've learned quit a bit.

What challenges did you encounter, and how did you overcome them?

There were a little struggle - especially with the alignment in the desktop view. Miss GPT helped me to get the hang of this and also helped fix a couple of bugs. Turns out the width values in the desktop view for my card components are very specific (23%) and I would have not figured that out without AI help.

What specific areas of your project would you like help with?

I would want to find out a way to work without the negative viewport height value.

Community feedback

  • Linh Nguyen•170
    @auri222Posted 6 months ago

    The text in the cards doesn't align properly (it should be on the left).

    I know this is a little cheat but you can watch this video from Kevin Powell's YouTube channel (here is the link Responsive layout practice for beginners), which is a proper solution for this challenge, he has explained everything clearly so that you can understand better. I also watched this video and approached the flexbox solution on my own instead of the grid solution.

    Marked as helpful
    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