Frontend Mentor | Decimo-10's profile

@Decimo-10Submitted over 1 year ago

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.

All comments