Notification Banners

Part of the Practical Frontend section of Coddy's HTML journey — lesson 24 of 35.

Notification banners alert users about important information like success messages, warnings, or errors. They typically appear at the top or bottom of a page. You’ve probably seen them used for things like:

Success messages – e.g., “Your profile was updated successfully.”
Error messages – e.g., “Something went wrong, please try again.”
Info alerts – e.g., “We’ve updated our privacy policy.”

Let's create a simple notification banner. Start with a basic container:

<div class="notification">
  This is a notification message!
</div>

Add some styling to make it stand out:

.notification {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

This creates a green notification banner with white text.

Challenge

Easy

You are given the HTML for a notification banner. Your task is to style it so it looks like a real success message.

Your task:

Place the icon and text next to each other by using display: flex and align-items: center.
Add padding inside the banner to make it more readable.
Give the banner a green background (#4CAF50) and make the text white, since it’s a success notification.
Round the corners.
Add a box shadow so the banner has some depth.
Add spacing between the icon and the text using margin-right.
Make the icon slightly bigger with font-size: 18px.

Goal: Your banner should look like a clean success message with a checkmark icon on the left and text on the right.

Cheat sheet

Notification banners alert users about important information like success messages, warnings, or errors. They typically appear at the top or bottom of a page.

Create a basic notification banner:

<div class="notification">
  This is a notification message!
</div>

Style the notification banner:

.notification {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

For banners with icons, use flexbox to align content:

.notification {
  display: flex;
  align-items: center;
}

Add depth with box shadow and spacing between elements:

.notification {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.notification .icon {
  margin-right: 10px;
  font-size: 18px;
}

Try it yourself

<!DOCTYPE html>
<html>
<head>
  <title>Notification Banners</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    
    .notification {
    
    }
    
    .notification_icon {
        
    }
  </style>
</head>
<body>
  <div class="notification notification--success">
    <span class="notification_icon">✓</span>
    <div class="notification_message">Your changes have been saved successfully!</div>
  </div>
</body>
</html>