Skip to content
Submitted over 2 years ago

Notifications Page

Bobby S•410
@bobbe86
A solution to the Notifications page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The javascript was challenging for me. Also some of the UI was challenging. I really need to work on the responsiveness too. I tried to use SASS but I could not install on my computer successfully. I know the responsiveness is off and the grid layout is not perfect. But I think it turned out ok. I tried using BEM naming conventions which made the class names really long so I stopped along the way. I may try BEM in the future again.

Code

Please log in to post a comment

Log in

Community feedback

  • Muhammad Al-Ameen Abdullahi•280
    @al-ameen36

    hello Bobby

    A few suggestions

    1. I usually use Grids to make complex layouts or when i know the sizes i want my columns to be, else i just use FlexBox to align items horizontally.
    2. I also try to give my HTML elements very meaningful and intuitive names like notification and notification__item.
    3. Designing mobile first makes responsive design easier.
    4. I use semantic HTML elements as much i can.
    <main class="container">
    <header class="notification__header">
        <h1>Notifications
            <span id="notification-count" class="badge">3</span>
        </h1>
        <button id="readAll-btn" class="btn">Mark all as read</button>
    </header>
    <section class="notification">
        <article class="notification__item unread">
            <picture class="user__image"><img src="images/avatar-mark-webber.webp" alt=""></picture>
            <div class="notification__content">
                <h2 class="user__name"><a href="#">Mark Webber</a></h2>
                <p class="notification__text">reacted to your recent post
                    <a href="#">My first tournament today!</a>
                </p><span class="dot"></span>
                <time>1m ago</time>
            </div>
        </article>
    </section>
</main>

    w3shools.com is a great resource i use for learning, it provides you great examples and a try-it editor for practice. Here are some useful links i recommend

    I hope this is helpful, you can always ask for clarification. Good luck

    Marked as helpful

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