Submitted over 2 years ago

Responsive and accessible notification page using flexbox

accessibility

CamronWithrow•120

@CamronWithrow

A solution to the Notifications page challenge

Preview Code

Solution retrospective

I spent quite a bit of time thinking about semantic HTML for this project. I have a couple of questions regarding best practices:

I treated the individual notifications as <li> in an <ol>. For this project, this just leads to a more nested HTML structure, but was it still "correct" to do this, or should I have just treated the notifications as individual <section>'s?
I couldn't figure out a nice tag for the private message. I eventually went with <p tabindex="0"> so that it was still focus-able. Was there a better choice for this element?

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on CamronWithrow's solution.

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