Skip to content
Submitted almost 4 years ago

First responsive card

Gustavo "Piá" de Moraes Xavier•25
@piagja
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello!

I need some tips to improve my HTML skills, semantics, CSS styles and, etc. I'm terrible at responsive styles. And I know my solution isn't the best, but I worked nice and hard to the best approach of the original Design.

Thanks in advance =D

Community feedback

  • Grace•31,270
    @grace-snowPosted almost 4 years ago

    Hi Gustavo,

    This looks pretty good I think you should be pleased.

    Only problem with the html is that you have some text only in spans. That needs to be in something like a paragraph tag.

    Looking at the css, it's OK but you are making it longer and more difficult than it needs to be. Eg I don't think you need to lay the list out in a grid, and you can do this without a media query.

    Take a look at my solution and see if that helps you see how to make this simpler. Best if you open and inspect in devtools (open on the side so you can shrink and grow viewport) to understand the reasons for my styles.

    Best of luck with your coding learning

    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