Skip to content
Submitted almost 2 years ago

Social Media Dashboard with Theme Switcher | HTML | SCSS | JavaScript

Sarah 🦉💻•200
@velvetrose
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

Feedback is more than welcome! ^-^

Wanted to ask these questions,

-> What is your go-to method to center the body of page to the center along both axis? I use flexbox mostly.

-> Best approach for theme switching? I passed CSS variables to SCSS variables and then changed the values in the root for changing the theme. I'm new to the concept of theme changing and would love to learn more about it. Useful resources are also welcome!

Thank you in advance! Have a nice day! (^-^)/

Community feedback

  • Account deleted

    Hi SARAH'S, congrats on completing this challenge. 🥳🥳🎉

    Here are some tips to improve your code 💯.

    HTML: 🧱

    • If you can see in the reports that Frontend Mentor gives you, it says that all your content must be contained by reference points. To avoid these accessibility problems, make sure that your content is within a reference region with HTML5 elements 🙃.

      Example:

      <html lang="en">
 <head>
     ...
 </head>
 <body>
     <header>
         ...
     </header>
     <nav>
         ...
     </nav>
     <main>
         ...
     </main>
     <footer>
         ...
     </footer>
 </body>
</html>

    • Your img tags must carry an alternative text, (the alt tag), except in some cases. More info here

    CSS: 🎨

    Your reset is good 🙃, but you can improve it by using some popular resets like the following 🚀:

    Regarding your first question, there are many ways to center elements, but my favorite is to use display: flex. and if i just want to center it horizontally i use the following code:

    .container {
    width: 90%;
    margin: 0 auto;
}

    And about your approach to change the subject, it seems very good to me, I have nothing to say about that 🙃💯.

    Your solution is very good!! 🥳

    Happy coding!. ✌️

    Marked as helpful
    0
    Sarah 🦉💻•200
    @velvetrosePosted almost 2 years ago

    @FLCHRIS Thank you so much for your feedback, Christian! I appreciate it very much! Have a wonderful day ahead! (^_^)/

    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