Submitted about 2 years ago

Responsive Social Media Dashboard

Decimo-10•120

@Decimo-10

A solution to the Social media dashboard with theme switcher challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

Decimo-10•120
@Decimo-10
Posted about 2 years 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.

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