Welcome back! So far, you have learned how to create a reusable layout template and style your Cooking Helper frontend. Now, let’s talk about what happens when a user tries to visit a page that doesn’t exist on your site.

A “404 error” is what users see when they try to visit a page that isn’t found. By default, Flask (and most web servers) shows a plain, unfriendly error message. This can be confusing or frustrating for users. A custom 404 page helps your site look more professional and guides users back to where they want to go.

In this lesson, you’ll learn how to create a custom 404 page for your Cooking Helper site. This will make your site more user-friendly and show that you care about the user experience.

Before we start, let’s quickly remind ourselves how Flask uses HTML templates and handles routes.

• Templates: In Flask, HTML files are stored in a templates folder. You can use template inheritance to keep your pages consistent.
• Routing: Flask uses routes to decide what content to show for each URL. If a user visits a URL that doesn’t match any route, Flask returns a 404 error.

You’ve already used templates and routes in previous lessons. Now, you’ll use these same ideas to handle errors in a friendly way.

Let’s start by creating the HTML file for your custom 404 page.

Inside your templates folder, create a new file called 404.html. This file will be shown whenever a user visits a page that doesn’t exist.

We want our 404 page to look like the rest of the site. To do this, we’ll use template inheritance. This means our 404 page will extend the main layout template you built earlier.

Here’s how you start:

Let’s break this down:

• {% extends "layout.html" %} tells Flask to use your main layout as the base for this page.
• {% block title %} sets the page title in the browser tab.
• {% block content %} is where the main message goes. Here, we show a big “404 - Page Not Found” message, a short explanation, and a link to go back to the home page.

This makes sure your 404 page matches the rest of your site and helps users find their way back.

A good 404 page should look like the rest of your site and be easy to use. Let’s add some style to make it stand out and help users.

You can create a special CSS file just for your 404 page. In your cooking_helper/static/css folder, create a file called 404.css.

Add this line to your 404.html template inside the {% block head %} section:

This tells Flask to load your custom CSS file when showing the 404 page. We will create this file in the next unit.

Now that you have a 404.html template, you need to tell Flask to use it whenever a user visits a page that doesn’t exist.

In your Flask app, you can add a special function called an “error handler.” This function tells Flask what to do when a certain error happens.

Open your cooking_helper/app/routes.py file and add the following code:

Here’s what’s happening:

• @routes.app_errorhandler(404) tells Flask to use this function whenever a 404 error happens.
• def page_not_found(e): defines the function. The e parameter is the error itself (you don’t need to use it here).
• return render_template('404.html'), 404 tells Flask to show your custom 404 page and set the correct status code.

Now, if a user visits a page that doesn’t exist, they’ll see your friendly 404 page instead of a boring default message.

In this lesson, you learned how to create a custom 404 page for your Cooking Helper frontend. You:

• Built a 404.html template that matches your site’s style
• Linked a CSS file to make your 404 page look friendly and helpful
• Added a Flask error handler to show your custom page when a user visits a missing page

A custom 404 page makes your site more professional and helps users find their way if they get lost.

Congratulations! You’ve reached the end of this lesson. Up next, you’ll get to practice what you’ve learned and make your site even better. Great job sticking with it!