Hi
I'm afraid the html needs re-writing on this. It's inaccessible and it doesn't work on mobile at all (when mobile styling should be the default)
This is actually a much more complex challenge than it looks at first glance and should not be one of the first you do.
I recommend pausing this one for now and focusing on simpler single component challenges. Make sure you get quality feedback and then come back to this later
General tips
- Meaningful html first. That includes headings, interactive elements, thinking through what images need accessible descriptions, ensuring list semantics are maintained for screenreaders when list style is set to none in css... I've written a post about translating designs to html that you may find helpful
- This particular challenge will need screenreader-only headings in addition to ones on the design (look up visually hidden / Sr-only css)
- Think through where interactivity is needed. If someone would expect to be able to click something it needs to have an interactive element there. Anchor elements if clicking would navigate somewhere, buttons if clicking would do an action like toggle content or open a modal
- For the mobile nav toggle in this it would need to follow an accessible disclosure pattern. That means a button, inside the nav, directly before the content it's toggling, with a name/label of what it does, and with an aria-expanded and aria-controls attribute.
- There is no reason ever to use decimal values within fractions when using css grid. 0.1fr should never exist and indicates there is likely a problem in your understanding of css grid
- Always use landmarks in the html. All content should be contained within landmark elements like header, main, or footer. This challenge has all of those but if you do single component challenges you may only need a main for the component and a footer for the attribution
0
