Submitted over 1 year ago

Responsive Social Media Dashboard

Decimo-10•120

@Decimo-10

Preview site View code

This is a solution for...Social media dashboard with theme switcher

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

Can every card be a separate <article>? For the follower cards I did this but for the overview part I wrapped them in a <section>.
In the follower cards I put the icons directly into the headings. Is this allowed, and does it create any accessibility concern?
In the cards for the numbers can I use <p>? They are very short, and I don't know if they fit into the paragraph's definition. Should I use <div> instead?
To implement the 2 background colors, I used an extra wrapper element in the <header> and set the max-width on that:

.header-wrapper,
main,
footer{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

With the above, I didn't have to set a max-width and a margin(to center the content) on the <header> and <body>. I set the background-color on these two and this way the colors cover the viewport's width. Is this a good/correct way to implement this? I thought about using linear-gradient but I don't think I can round the corners with that, and also positioning the elements to the background-image would be a nightmare.
Based on the challange description and the design images the cards are interactive elements. Should I make them focusable and tabbable?
I did the color changes with custom properties. I originally wanted a pure CSS solution using the :has() pseudo-class in this selector: :root:has(#checkbox-field:checked) and changing the custom properties' values in this. But after checking the browser support for the has:() I instead used a simple JS script.Would the selector above be valid?

Thank you for the feedback, and if you have any insight or suggestion even if it's not related to my questions I greatly appreciate that too.

Community feedback

Decimo-10•120
@Decimo-10Posted over 1 year ago
I'm going to leave this here if someone is also interested in this. I tested the :root:has(#checkbox-field:checked) selector and it's valid, but it doesn't work properly in Firefox(v112.0.1)("layout.css.has-selector.enabled" was set to true). You have to reload the page for the rules in the selector to apply. It works properly in Microsoft Edge and Chrome.
0

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