Notifications Page

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

• CSS Box Model
• CSS Flexbox
• CSS Grids

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