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

Social media dashboard with theme switcher using HTML,SASS and JS

Macarena Alonso• 60

@alonsomacarena

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


Any comment/advice to improve my code is appreciated.

Community feedback

Shashi Lo• 1,345

@shashilo

Posted

Great job with this solution. From a glance, it's pretty darn exact to the design. Roman is right about not setting a fixed widths. You have it set in many places and it's not allowed to be fluid to the viewport of a browser window. If you inspect the .container, you can see that the box-model is incorrect. There's a max-width that is too small for the .container itself. When you resize your browser to <1230px, the fixed width overflows. According to the style guide, the max-width should actually be 1440px. Because you are using CSS Grid, research how to work with fr units instead of fixed px widths.

Some nit picky things:

  • I would like this centered to the browser. It look's off left aligned.
  • The hover state color is off from the design.
  • <article> has some additional grid attributes that are not needed because <aside> already sets up the grid for this group.
1

Macarena Alonso• 60

@alonsomacarena

Posted

@shashilo thank you so much for your input! I'll take everything into consideration to improve on my coding abilities.

0
Roman Filenko• 3,335

@rfilenko

Posted

Hi Macarena, very nice job, but responsive mode needs more work. Probably not a good idea to define absolute width in px inside grid-template-columns, use fr units instead or minmax func. Also try not repeat code in css styles, it gets a little messy.

Roman

1

Macarena Alonso• 60

@alonsomacarena

Posted

Hi Roman! You are right about the responsive mode: when I was checking, it worked on Firefox and Safari but it didn't work in Chrome. So, I think I'll look into it and adjust my code. Thanks so much for your advice! It really helps me to improve !

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