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.

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>