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 using Angular. 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 an Angular component called NotFoundComponent. This component displays 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 editing the component-specific CSS file called not-found.component.css and connecting it to our 404 page through Angular’s component system.

The CSS file for our 404 page is named not-found.component.css. In Angular projects, each component can have its own CSS file, which is stored in the same folder as the component’s TypeScript and HTML files.

Here’s how the files are organized in your project:

frontend/
└── src/
    └── app/
        └── pages/
            └── not-found/
                ├── not-found.component.ts
                ├── not-found.component.html
                └── not-found.component.css

The not-found.component.css file contains all the styles that will be applied to your 404 page. In Angular, this CSS file is automatically linked to the NotFoundComponent, so you don’t need to add any extra code to connect the styles.

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