Notifications Page

Notifications page design.

Table of contents

• Notifications Page
  • Table of contents
  • Overview
    • The challenge
    • Links
  • My process
    • Built with
    • What I learned
  • Author

Overview

The challenge

The challenge is to build out this notifications page and get it looking as close to the design as possible.

Users should be able to:

• Distinguish between "unread" and "read" notifications.
• Select "Mark all as read" to toggle the visual state of the unread notifications and set the number of unread messages to zero.
• View the optimal layout for the interface depending on their device's screen size.
• See hover and focus states for all interactive elements on the page.

Links

• Solution URL: Github
• Live Site URL: Vercel Deploy

My process

Built with

• Semantic HTML5 markup
• TailwindCSS
• Svelte
• TypeScript
• Mobile-first workflow

What I learned

• Creating components in Svelte
• Object reactivity when using component props.

Author

Uchechukwu Prince Nwulu a.k.a UcheDotPhp