Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive notifications page made with Flexbox

#jquery
Danilo 200

@OneBitMance

Desktop design screenshot for the Notifications page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Overall, as a beginner, it was really fun doing this small project, but I kind of found some things very difficult to construct and I had to pay great attention to all kinds of details.

My question is, how can I create the best strategy for constructing a site without having to deal with these brain-frying problems that come out of nowhere? Because I'm sure that somebody who had some type of plan and experience could do this page in 30mins, whereas I finished it in 4 days.

Any tips are welcome! I will gladly accept any kind of code corrections as it helps improve my skills further.

Thank you very much in advance!

Community feedback

Adriano 33,980

@AdrianoEscarabote

Posted

Hi Danilo, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

Images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.

You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

The rest is great!

I hope it helps... 👍

Marked as helpful

1

Danilo 200

@OneBitMance

Posted

@AdrianoEscarabote That is so amazing, i didn't even have the slightest idea of the 'aria-hidden' and empty 'alt' property and how they contribute to the web, let alone <br> tags resembling a problem for screen readers. Thank you so much for this!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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