Skip to content
Submitted 8 months ago

Four card feature section using grid

plantpirate•170
@plantpirate
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?

Most proud of using grid and placing objects within grid areas. I'm not sure I did it correctly, but the layout looks similar.

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

So many. Most of it came from font sizes at different screen sizes, working with widths for different elements. I just used methods that seemed to work.

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

I feel like I just patched this all together. I was having issues with the grid, plus width and max-widths. If you take the time to look at my code, please give me feedback on best practices for grid placement if this was all wrong, or help with the widths if i was coding incorrectly.

Community feedback

  • Ata Abatay•160
    @ataabatayPosted 8 months ago

    I took a look at your code and I saw a lot of boilerplate copy paste styling you got for things that don't even exist, is there a reason why you're doing that? I liked how you used the colors are variants that's cool, the way you did the grid looks good to me I did it almost identically so overall welldone no need to overthink here :)

    Marked as helpful
    1
    plantpirate•170
    @plantpiratePosted 8 months ago

    @ataabatay yes I overcomplicated the code when I started getting confused, then tried editing things out later. Thank you for the feedback!

    0
  • BT738844•700
    @BT453567Posted 8 months ago

    Hello @planpirate

    Excellent job looks great.

    Couple of small things that could improve the solution.

    1. You could try adding a max-width to your card div (ai-role) as the cards look a bit stretched when in views below 1000px.

    2. You could argue that "Reliable, efficient delivery" should be a p tag rather than a h1 tag as this appears to be more of a descriptive text rather than a heading.

    Regards

    Marked as helpful
    0
    plantpirate•170
    @plantpiratePosted 8 months ago

    @BT453567 oh max-width for small screens is something I hadn’t thought of. I figured a media query was the best way to go to stop too much stretch. Thank you!

    For the h1, I’ve read before that you shouldn’t have other text elements ahead of your h1 tag? But if that’s not the case, then huge if true

    0
    BT738844•700
    @BT453567Posted 8 months ago

    @plantpirate I believe you are right that ideally you should have the first text as your h1 heading, however it is not a strict rule and exceptions can be made such as in this example.

    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