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

Social Media Dashboard With CSS Grid And Light/Dark Theme Transition

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Desktop design screenshot for the Social media dashboard with theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! πŸŽ‰

ApplePieGiraffe’s questions for the community

Hey, everybody! πŸ‘‹

This was an awesome challenge that was a little trickier than I initially thought! πŸ˜…

This was my first time creating a site with light/dark themes but I'm pretty happy with the result. I added this cool transition that ripples over the cards when the theme is changed! πŸ˜†

As usual, feedback is welcome and appreciated! 😊

And as always, happy coding! 😁

Community feedback

@Octagon-King

Posted

That's really cool.. A question how to make the icons fixed to the cards.. in my solution when I try to change the resolution, it changes positions.

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@Octagon-King

Thanks! πŸ˜€

I used flexbox to lay out the elements in the first row of cards on the page and CSS grid to lay out the elements in the the rest of the cards. I think keeping the icons in place when the size of the screen changes is a matter of making sure the icons are correctly placed within their container (which you can do with properties like justify-content or align-items for flexbox and align-self and justify-self) and that the size of the card itself is large enough for the items inside it (so that they don't get squished or start being pushed around). πŸ˜‰ Feel free to use the dev tools to inspect the code for this solution and poke around. Doing that often helps me learn a lot from other people's solutions. πŸ˜…

1

@Octagon-King

Posted

@ApplePieGiraffe Thanks! I did it and I was using flexbox for the second small cards too but when I start using grid it made it easier and less code.

Thanks again. πŸ˜‰ for a Helping a Newbie

1

@Octagon-King

Posted

@ApplePieGiraffe Here you can see what i have done: https://distracted-noether-27fb8c.netlify.app

0

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@Octagon-King

No problem! πŸ‘

The layout of the cards in your site is looking pretty good, right now! πŸ˜€

0

@Octagon-King

Posted

@ApplePieGiraffe Thanks man

0

P
Anna Leighβ€’ 5,135

@brasspetals

Posted

Can't believe I missed this! I haven't done this challenge yet, but had to drop in to let you know that theme switch transition is fantastic! πŸ™Œ Definitely bookmarked for when I get around to this one.

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@brasspetals

Thanks, Anna! 😊

0

BerylBucketβ€’ 280

@BerylBucket

Posted

This is so good!

P.S. Your profile says you're a newbie, but I don't believe it. :)

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@BerylBucket

Haha, thanks! I still have much to learn... but I guess I'm becoming a little more familiar with a few things. 😊

Happy coding!

1

Arturo Simonβ€’ 1,695

@artimys

Posted

Very cool. Nice touch on the ripple animation for the items.

Keep it up, waiting for your next solution πŸ‘

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@artimys

Thanks artimys! 😁

1

tedikoβ€’ 6,170

@tediko

Posted

Hello, ApplePieGiraffe!

Great job as always! I came to see your solution to learn something new. The only thing that caught my eye in this great project was the lack of toggle button animation. What I could suggest is:

  • Maybe instead of adding .toggle-switch__btn--inactive class to your #toggle-switch button and change justify-content to flex-end you should add this inactive class to your .toggle-switch__circle and set transform: translate() on it. Combining this with transition on your circle element you'll get nice and smooth animation. I hope that what I wrote makes sense.

Good luck, have fun coding :)!

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@tediko

I was actually thinking of doing something like that but I just got lazy and went with using flexbox to quickly change the position of the circle element. πŸ˜† But as you suggested, I think the tiny bit of extra effort would be worth it, though! 😁

Thanks for the feedback! 😊

0

Seck Mamadouβ€’ 325

@doums85

Posted

Waouh Just amazing PERFECT πŸ‘πŸ‘πŸ‘

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@doums85

Thank you!

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!