Skip to content
Submitted almost 2 years ago

Responsive notifications page made with Flexbox

Danilo•200
@OneBitMance
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Notifications page
  • HTML
  • CSS
  • JS
2junior

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•38,250
    @AdrianoEscarabotePosted almost 2 years ago

    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
    @OneBitMancePosted almost 2 years ago

    @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

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