Designing a Custom 404 Page with CSS

Photo by Erik Mclean on Unsplash

Creating a custom 404 page is an essential part of website design. It not only helps in retaining visitors who might have stumbled upon a broken link or mistyped a URL but also provides an opportunity to showcase creativity and brand personality. Using HTML and CSS, you can design a visually appealing and user-friendly 404 page. In this guide, we will explore how to create such a page and discuss the benefits of incorporating CSS and JavaScript (JS) for implementing a dark mode on your site.

Why Customize Your 404 Page?

A customized 404 page enhances user experience by guiding lost visitors back to relevant sections of your site, potentially reducing bounce rates. It also allows for a creative expression that can make an otherwise frustrating experience somewhat enjoyable.

Step 1: Basic HTML Structure

Start by creating the basic structure of your 404 page with HTML. Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Not Found</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="not-found-container">
        <h1>404: Page Not Found</h1>
        <p>Oops! The page you are looking for does not exist.</p>
        <a href="/">Go Home</a>
    </div>
</body>
</html>

This code lays the foundation for your custom 404 page, including a header for the error code, a message explaining the issue, and a link to return to the homepage.

Step 2: Styling with CSS

Next, add CSS to style your 404 page. You can include the CSS directly in your HTML file within <style> tags or link to an external CSS file. Here’s an example of how you might style the page:

body {
    background-color: #f0f0f0;
    font-family: 'Arial', sans-serif;
    text-align: center;
    padding: 50px;
}

#not-found-container {
    background-color: #fff;
    border-radius: 8px;
    display: inline-block;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1 {
    color: #ff6347;
    font-size: 48px;
}

p {
    color: #333;
}

a {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 20px;
}

This CSS code gives your 404 page a clean and modern look, with a light background, shadow effects, and a standout button to guide users back to the homepage.

Step 3: Adding Dark Mode with CSS and JavaScript

Dark mode is a popular feature that reduces eye strain in low-light conditions. You can implement it on your 404 page (and site-wide) using CSS and JavaScript. Here’s how:

1. CSS for Dark Mode: First, define a set of CSS variables for both light and dark themes:

:root {
    --background-color: #fff;
    --text-color: #333;
    --button-background-color: #007bff;
    --button-text-color: #fff;
}

[data-theme="dark"] {
    --background-color: #333;
    --text-color: #f0f0f0;
    --button-background-color: #0056b3;
    --button-text-color: #ccc;
}

1. Applying the Theme: Use these variables in your CSS:

body {
    background-color: var(--background-color);
    color: var(--text-color);
}
a {
    background-color: var(--button-background-color);
    color: var(--button-text-color);
}

1. JavaScript to Toggle Dark Mode: Use a simple JavaScript function to toggle the dark mode based on user preference or system settings:

<script>
function toggleDarkMode() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', newTheme);
}
</script>

You can trigger this function with a button or automatically apply it based on the user’s system preferences.

Benefits of Using CSS and JS for Dark Mode

Implementing dark mode with CSS and JavaScript enhances user experience by offering visual comfort and personalization. CSS variables make theme management straightforward, allowing for easy switches between modes. JavaScript enables dynamic changes without needing to reload the page, making the transition seamless for the user.

Convenient hosting for your WordPress sites

Looking for good hosting for your WordPress sites? Pay attention to Host4Biz. It is a reliable hosting with modern servers in Europe and a Ukrainian team.

Get Volodymyr Zhyliaev’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

And with the promo code MYHOST10 you will get a 10% discount on your first payment. To do this, register here and enter the code before paying.

Conclusion

Designing a custom 404 page with a dark mode option is a great way to improve your website’s user experience and accessibility. By following the steps outlined in this guide, you can create a visually appealing, functional, and user-friendly 404 page that keeps visitors engaged and reduces bounce rates. Incorporating dark mode further enhances the usability and personalization of your site, catering to users’ preferences and comfort.

Note: There are affiliate links in the link given above and if you buy something, I’ll get a commission at no extra cost to you.