Styling the 404 Page

Welcome back! In the last lesson, you learned how to create a custom 404 error page for your Cooking Helper frontend. Now, we will take that page and make it look much more inviting and professional by adding some CSS styles.

A 404 page is what users see when they try to visit a page that doesn’t exist. If it looks plain or confusing, users might get frustrated and leave your site. By styling your 404 page, you help users feel comfortable and guide them back to the main parts of your site. This is a small detail, but it makes your Cooking Helper frontend feel polished and user-friendly.

In this lesson, you will learn how to use a CSS file to style your 404 page, making it both attractive and easy to use.

Let’s quickly remember what we did in the previous lesson. You created a custom 404 page using HTML and Flask. This page shows a clear message when someone visits a page that doesn’t exist, and it includes a button to take users back to the homepage.

Now, we want to make this page look better by adding styles. We will do this by creating and editing a CSS file called 404.css and connecting it to our 404 page.

The CSS file for our 404 page is named 404.css. In most web projects, CSS files are stored in a folder called cooking_helper/static/css. This is where browsers look for stylesheets.

Here’s how the file is organized in your project:

cooking-helper/
├── static/
│   └── css/
│       └── 404.css
├── templates/
│   └── 404.html

The 404.css file contains all the styles that will be applied to your 404 page. In your HTML template for the 404 page, you should already have a line that links this CSS file, like this:

<link rel="stylesheet" href="{{ url_for('static', filename='css/404.css') }}">

This line tells the browser to load the styles from 404.css and apply them to the 404 page.

Let’s break down the CSS in 404.css step by step. We’ll look at each part and see how it changes the look of your 404 page.