hello Bobby
A few suggestions
- 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.
- I also try to give my HTML elements very meaningful and intuitive names like
notification
andnotification__item
. - Designing mobile first makes responsive design easier.
- 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