Social Dashboard ( Vanilla JS Dark theme )

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojek

  Posted over 4 years ago

  Hi Mustafa,

  Good job!

  A few tips from me:

  • remove comments from the head, people should know what the content is about;
  • in your code are many divs. Divs are semantically inert elements — elements that don’t really do or say anything. The term "semantic" refers to the meaning of a word or a thing, so "semantic elements" are elements designed to mark up the structure of a document in a more meaningful way, a way that makes it clear what they're for, what purpose they serve in the document. Please, check the MDN documentation. Therefore, it will be amazing to use semantics tags like main, section, article, header etc.
  • also, a few times you have used the span tag. IMO SPAN (and DIV) elements by themselves are generally considered to be semantically neutral. A good approach is to use semantic markup as much as appropriately possible, so instead of it you can use paragraphs, ul/li but of course, it all depends on the context. Sometimes I use the span but before it, I try to think about the other semantic tags;
  • accessibility: there is no any important attributes for icons, links, toggles like an aria, role etc. This is a huge topic but very valuable and it is important to read about.

  CSS:

  • it is good practice to reset the styles at the beginning of your CSS file, for example:

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

  Design

  • check your main heading h1, on mobile size, it is too big. You can make it more responsive to different devices;
  • the line after "total followers" could have more opacity so it will be more "smooth", at the moment it looks like a LINE that strongly divides the space between headings and sections below;
  • icon arrow up and down should be close to the centre of the text (it will look nicer);
  • you did not consider other devices in your breakpoints: there is a big gap between mobile and desktop. RWD on mobile seems to work well but try to include the tablets etc. What do you think about it?
  • you can add hover to the cards when is a dark mode and smooth transitio;

  That's it from me. Ps. don't forget to upvote any comments on here that you find helpful.

  Many greetings :D

  30
• 

  Szymon Rojek•4,540

  @SzymonRojek

  Posted over 4 years ago

  @Mostafa-T

  I have forgotten to mention that you can fix the accessibility issues in your HTML report. Accessibility - in this instance, I can recommend an article from the Smashing Magazine: Building Inclusive Toggle Buttons. Let me know what do you think about this article.

  Have a good reading :D

  00
• 

  Mustafa•415

  @Mostafa-T

  Posted over 4 years ago

  Thank you so much!! Really I can't be more grateful and for sure will improve this project. ❤️❤️

  01