Notifications Page

Community feedback

• 

  Muhammad Al-Ameen Abdullahi•260

  @al-ameen36Posted almost 2 years ago

  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

  Marked as helpful

  0