Submitted over 3 years ago

Social Media dashboard using SASS & Flexbox

Mathieu• 295

@mathcrln

Preview site View code

This is a solution for...

Social media dashboard with theme switcher

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I just have to questions :

I struggled to make the top border with the gradient for Instagram. Is there an easy way to do it?
Could you give me some basic feedbacks on ways I could improve my code (cleaner, more readable, etc)?

Community feedback

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 3 years ago

Hey, Mathieu Céraline! 👋

Great job on this challenge! Your solution looks good, responds well, and the light/dark themes work great! 👍

I only suggest,

Switching to a one-column layout for the statistics cards just a wee bit sooner than 395px so that the content inside the boxes doesn't look too squeezed and none of the text overflows its container.

Keep coding (and happy coding, too)! 😁

Mathieu• 295

@mathcrln

Posted over 3 years ago

@ApplePieGiraffe Hello, thank you very much for your feedback, it definitely motivates me to continue working hard! 😁

And I'll keep that in mind, I always wonder what is the right breakpoint so that it doesn't seem neither too squeezed or too loose.

Thank you, and good luck to you as well!

Account Deleted

.instagram {
  border-top: 4px solid;
  border-image-source: linear-gradient(
    to right,
    hsl(37, 97%, 70%),
    hsl(329, 70%, 58%)
  );
  border-image-slice: 1;
}

This is what I did for the top border for the Instagram box.

Mathieu• 295

@mathcrln

Posted over 3 years ago

Hello! Ohhh, thank you 🙏🏾 I've been wondering how to do it since then! Thank you so much.

Gerben Dol• 3,115

@GerbenDol

Posted about 4 years ago

Hi Mathieu. I think your solution for the top borders is solid, so don't worry about that. If you had issues with making it like this, try practicing with pseudo-elements more in your future solutions! 😁

I think you CSS is also looking good! The way you put every bit in their own section makes it very readable and easy to navigate. Keep it up! 🙌🏻

Mathieu• 295

@mathcrln

Posted about 4 years ago

@GerbenDol Thank you for your feedbacks! Really appreciate it. I didn’t have much issue with the pseudo-elements in themselves, but i thought it didn’t exactly look like the design and I felt like this was “a hack” haha.

Thank you so much, makes me want to keep practicing more and more 🙏🏾

Please log in to post a comment

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