Skip to content
Submitted over 3 years ago

Mobile-first Social Media Dashboard using Flexbox and CSS Grid

Ron Paolo Toyhacao•165
@rontoyhacao
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social media dashboard with theme switcher
  • HTML
  • CSS
  • JS
2junior

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
    @RocTanweerPosted over 3 years ago

    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
    Ron Paolo Toyhacao•165
    @rontoyhacaoPosted over 3 years ago

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

    1
    Roc Tanweer•2,500
    @RocTanweerPosted over 3 years ago

    @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

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