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 Social Media Dashboard using Flexbox and CSS Grid

@rontoyhacao

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

Solution retrospective


I'm not really sure if my markup is semantically correct since the cards are supposed to be interactive because of the hover with cursor: pointer and I just used div in making them. Are they supposed to be in an anchor? Also should they be in an unordered list with ul? Please bear with me if I have so much questions. If someone could answer my questions it would be a big help. I added keypress event on the toggle for accessibility. I'm actually happy with my work and this was a fun challenge. Please feel free to leave feedback, I appreciate the effort.

Community feedback

Roc Tanweerβ€’ 2,500

@RocTanweer

Posted

Hello @Ron πŸ˜€

Another cool project here from you..!!

It looks perfect and responsive and there is hardly anything that I could say...I don't know if it's my eyes but your counter container like elements with font-weight bold is not transitioning with the theme color changer (maybe you forgot to put transition on those πŸ˜…) forgive me if I am wrong.

Edited : There should be a tabindex="-1" or something on the label because there should be only one element to switch theme when keyboard users are navigating the site, no? But if you wish two elements to change theme(your personal opinion) then you are not giving an outline to label which makes the user wonder which element is focused when they first tap tab key.

As for the semantic HTML , I would do, div.wrapper -> main.wrapper and main -> section

About putting putting a div tag inside <a> tag read this

That's all I have to say here!!

Hope it helps and happy coding

0

@rontoyhacao

Posted

@RocTanweer I actually didn't include transition on the texts, thank you so much for the feedback. :))

1
Roc Tanweerβ€’ 2,500

@RocTanweer

Posted

@rontoyhacao My pleasure. I am not very sure but you could use article tag at .card-container because each card is independently containing it's own content

0

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