Social media dashboard with theme switcher

Community feedback

• 

  J.D. Browne•870

  @PeshwariNaanPosted almost 2 years ago

  Hello Barney - Nice work on completing the challenge, it looks pretty good. The css does look like it got way too complex for such a simple layout. There also seems to be some code repetition like defining *, *::before, *::after { box-sizing: border-box; transition: var(--transition); } in the app.css and again in your header component. You also have transition here using your variable and then right under it you have it again in your body tag not using the variable which leads to really confusing code. What is transitioning here?. You have multiple h1 elements in your css to define a single property such as one has h1 { margin-bottom: .4rem; } and the down a ways you have h1 { font-size: 2.2rem; } . These should be grouped together.

  A couple recommendations I would make would be:

  • If you continue learning react, switch to a different styling such as css modules or styled-components. It can really simplify your code and it keeps things modular and much easier to debug. Also much easier to implement things like dark/light mode.

  • Definitely add more media queries to accommodate for tablet, and mobile views. I find it easier to put the breakpoints in a variable that I can access in all my components. I typically apply the media queries per component, I never define them globally like in your app.css. There is a guy on FEM that I found that has been a huge help for me, his name is Deniel Den. Here is a link to his github page and you can get a good idea of just how much you can reduce your css code using styled components and regular css using clean coding practices. Check out some of his repos if you get a chance.

  Good luck on the next one - Happy coding

  Marked as helpful

  1