Skip to content
Submitted 18 days ago

Responsive web page with CSS grid

Ana Tereza Suzana•20
@ana-suzana
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 challenges did you encounter, and how did you overcome them?

Using CSS grid was a challenge for me. I had never made a web page with CSS grid before, but once I learned how to use it, I found it very useful and easier to work with than I thought.

In addition, another obstacle I encountered during the process was using the different types of positioning of the elements.

At the end of the project, I realized that I learned a lot of new things. I am very proud of myself.

Community feedback

  • P
    Gabe•300
    @gabeiPosted 18 days ago

    Hello!

    A couple of things I notice right off the bat:

    1. The tablet sizing of your site places the cards into a sort of stack that doesn't match the design.

    2. Check the font colors! Yours appear more of a stark black in comparison to the design ( a more grey color) Definitely a little easier when you have access to the design file so no big deal.

    3. Your header text is off-center when sized down to mobile.

    I hope any of this helps! Happy coding!

    Marked as helpful
    1
    Ana Tereza Suzana•20
    @ana-suzanaPosted 18 days ago

    @gabei Hello, Gabe! Thank you for your comments and feedback.

    I was still making some changes and you helped me realize some things that were wrong. I hope they are ok now.

    Thanks!

    1
    P
    Gabe•300
    @gabeiPosted 17 days ago

    @ana-suzana Nice! I should have known it was a work in progress :)

    I think the only thing remaining is the grid stack on tablet sizes. I had the same issue and ended up changing the grid layout for tablet sizes. A bit of a pain to do but it ends up looking real nice.

    EDIT: Actually I just realized that the design I'm referring to is only visible in the figma design file, so ignore that. It looks great!

    Nice job!

    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