Really nice execution!! It looks very close to the design, is responsive, and the theme switcher works great. The hover states on the cards also look really nice. The only things I would really suggest would be to vertically-center the dashboard within the viewport height. Also the design shows that when on the light theme when you hover over the switcher, the pill-shaped part of it should turn to the linear-gradient. The design also shows that the 'Overview - Today' heading should be a gray color on the light theme. Keep up the great work!!
Hey there, nice job on your 2nd FM challenge!! It looks really nice on both desktop and mobile and the theme switcher works really well. I just have a few minor suggestions for you.
It would be nice if on tablet screen widths if the cards were laid out in two columns instead of having the columns jump from four to one at 1220px.
In the design it shows that when you hover over the switcher in light mode, the pill-shaped part of the switcher should change to the linear-gradient.
The design also shows that on hover all the cards should show a pointer cursor and change their background color slightly.
Hey David, well done on this challenge π It looks pretty close to the design, is responsive, the theme switcher works, and you included hover states on the cards. Your CSS is also organized nicely. I just have a few suggestions for you:
It would be nice if the switcher worked if the user clicked on any part of it, not just the circle part of it.
The design shows a hover state in light mode for when the user hovers over the switcher. The pill-shaped part of it should turn to the linear-gradient.
The layout starts to get a little wonky between 1000px and 1200px screen width because the large cards aren't centered with the small cards.
It would look nice if at tablet screen widths you had the cards laid out in two columns instead of jumping from four columns to one column at 1000px.
Hey Jeet, if you're looking for a tutorial on how to make light theme/dark theme switchers, check out this YouTube video. It's not for this exact challenge, but I was able to use the methods from this video in my solution π
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.
You're missing the hover states for the cards. The cards should change colors slightly and the cursor should be a pointer.
The Overview - Today heading should be a gray color in light mode
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);
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.
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.
Latest Comments
RE: Giovanni Ranzato's "React Js Css Html" solution
Really nice execution!! It looks very close to the design, is responsive, and the theme switcher works great. The hover states on the cards also look really nice. The only things I would really suggest would be to vertically-center the dashboard within the viewport height. Also the design shows that when on the light theme when you hover over the switcher, the pill-shaped part of it should turn to the linear-gradient. The design also shows that the 'Overview - Today' heading should be a gray color on the light theme. Keep up the great work!!
RE: Bitbyte's "Social Media Dashboard with Vue.js" solution
Hey there, nice job on your 2nd FM challenge!! It looks really nice on both desktop and mobile and the theme switcher works really well. I just have a few minor suggestions for you.
It would be nice if on tablet screen widths if the cards were laid out in two columns instead of having the columns jump from four to one at 1220px.
In the design it shows that when you hover over the switcher in light mode, the pill-shaped part of the switcher should change to the linear-gradient.
The design also shows that on hover all the cards should show a pointer cursor and change their background color slightly.
Other than that everything looks great!
RE: David Parsons's "Social media dashboard built with HTML, CSS & Javascript" solution
Hey David, well done on this challenge π It looks pretty close to the design, is responsive, the theme switcher works, and you included hover states on the cards. Your CSS is also organized nicely. I just have a few suggestions for you:
It would be nice if the switcher worked if the user clicked on any part of it, not just the circle part of it.
The design shows a hover state in light mode for when the user hovers over the switcher. The pill-shaped part of it should turn to the linear-gradient.
The layout starts to get a little wonky between 1000px and 1200px screen width because the large cards aren't centered with the small cards.
It would look nice if at tablet screen widths you had the cards laid out in two columns instead of jumping from four columns to one column at 1000px.
RE: Jeet Viramgama's "Social Media Dashboard using html,css.js" solution
Hey Jeet, if you're looking for a tutorial on how to make light theme/dark theme switchers, check out this YouTube video. It's not for this exact challenge, but I was able to use the methods from this video in my solution π
https://www.youtube.com/watch?v=D1yg4T37qYo&list=LLKDQrHVty6w7L57Hy56PXRA&index=1&ab_channel=WEBCIFAR
RE: Juan Manuel Velez's "Responsive CSS-GRID using HTML5 CCS y JS" solution
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.
You're missing the hover states for the cards. The cards should change colors slightly and the cursor should be a pointer.
The Overview - Today heading should be a gray color in light mode
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);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.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!!