Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first design using pure html and css

RaffayElahi• 130

@RaffayElahi

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would like having feedback on my code and I will appreciate on betterment of my code

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted

👋Hi RaffayElahi! My name is Vanza!

I have some feedback on this solution:

  • Try to use other tags on your html such as h2, ul, li rather than just div and span.
  • I see that you don't need two markup, one for mobile and the other for desktop. So, what you can do instead, you can just create the markup for the desktop and then just styling it differently base on different breakpoint.
  • It's too early to apply mobile style, flex-direction: column-reverse for the card on @media (max-width:1464px), it's still on desktop.
  • Try to refactor the code, which is try again from scratch, plan your markup and also your styling.

That's it! Hopefully this is helpful!

Happy Coding!

2

RaffayElahi• 130

@RaffayElahi

Posted

@vanzasetia Thanks Vanza! Loved your comment. Actually it was my first project and I didn't do much coding after that. However, I am back. Learning out creating process and improving it day by day. I would post more of solutions so I would love if you take a look at them and improve my coding process. Furthermore, I am gonna refactor it in few days. Thanks, Raffay Elahi

1

Please log in to post a comment

Log in with GitHub
Discord logo

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