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

Responsive CSS-GRID using HTML5 CCS y JS

@juanmavelez

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

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! 🎉

Community feedback

P
Jen 1,230

@En-Jen

Posted

Hey Juan, nice job! Looks close to the design, it's responsive and the theme switcher works nicely 👏 I just have a few suggestions for you.

  1. You're missing the hover states for the cards. The cards should change colors slightly and the cursor should be a pointer.

  2. The Overview - Today heading should be a gray color in light mode

  3. It would be nice to have the cards laid out in two columns for tablet screen widths. You can create two equal width columns like this: grid-template-columns: repeat(2, 1fr);

  4. In your HTML you have <p>F O L L O W E R S</p>. Instead of putting it in all caps and with spaces between the letters in the HTML, it's better practice to style it that way in CSS.

  5. You can keep all your CSS in one file with media queries for different screen widths instead of splitting them into separate files for desktop and mobile.

Happy coding!!

1

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!