As a website owner, you know how important it is to have a well-designed and functional website. One aspect of this is the 404 error page. A 404 error page appears when a user tries to access a page that doesn’t exist. Instead of showing a generic and unhelpful message, you can create a custom 404 error page that is both informative and visually appealing. In this blog, we’ll go over how to create a custom 404 error page using HTML and CSS.
Steps to Create Custom 404 Error Page
Step 1: Create an HTML file
The first step is to create an HTML file for your custom 404 error page. You can do this by opening a new file in your text editor and saving it as “404.html”. This will ensure that the page is recognized as the 404 error page by your website’s server.
Step 2: Add content to the HTML file
Next, you’ll need to add content to your HTML file. This should include a message letting the user know that the page they were looking for can’t be found, and possibly some links to other pages on your website. Here’s an example:
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>404 Error Page | CodingNepal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="error-page">
<div class="content">
<h2 class="header" data-text="404">
404
</h2>
<h4 data-text="Opps! Page not found">
Opps! Page not found
</h4>
<p>
Sorry, the page you're looking for doesn't exist. If you think something is broken, report a problem.
</p>
<div class="btns">
<a href="https://www.deepdeveloper.in/">Home</a>
<a href="https://www.deepdeveloper.in/">About Us</a>
</div>
</div>
</div>
</body>
</html>Step 3: Style the page with CSS
Now that you have your HTML content in place, it’s time to style the page using CSS. You can create a separate CSS file and link to it in your HTML file, like we did in the previous step. Here’s an example of some CSS styles you could use:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ce, #9b59b6);
background-size: 400%;
}
#error-page{
position: absolute;
top: 10%;
left: 15%;
right: 15%;
bottom: 10%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
#error-page .content{
max-width: 600px;
text-align: center;
}
.content h2.header{
font-size: 18vw;
line-height: 1em;
position: relative;
}
.content h2.header:after{
position: absolute;
content: attr(data-text);
top: 0;
left: 0;
right: 0;
background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ce, #9b59b6);
background-size: 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 1px 1px 2px rgba(255,255,255,0.25);
animation: animate 10s ease-in-out infinite;
}
@keyframes animate {
0%{
background-position: 0 0;
}
25%{
background-position: 100% 0;
}
50%{
background-position: 100% 100%;
}
75%{
background-position: 0% 100%;
}
100%{
background-position: 0% 0%;
}
}
.content h4{
font-size: 1.5em;
margin-bottom: 20px;
text-transform: uppercase;
color: #000;
font-size: 2em;
max-width: 600px;
position: relative;
}
.content h4:after{
position: absolute;
content: attr(data-text);
top: 0;
left: 0;
right: 0;
text-shadow: 1px 1px 2px rgba(255,255,255,0.4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content p{
font-size: 1.2em;
color: #0d0d0d;
}
.content .btns{
margin: 25px 0;
display: inline-flex;
}
.content .btns a{
display: inline-block;
margin: 0 10px;
text-decoration: none;
border: 2px solid #69a6ce;
color: #69a6ce;
font-weight: 500;
padding: 10px 25px;
border-radius: 25px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.content .btns a:hover{
background: #69a6ce;
color: #fff;
}These styles will center the content on the page, make the header and text stand out, and create a list of links that are easy to read and click on.
Here is the Preview of 404 Error Page
Step 4: Test the page
Once you’ve created your custom 404 error page and styled it with CSS, it’s important to test it to make sure it’s working properly. You can do this by intentionally trying to access a page on your website that doesn’t exist and seeing if your custom 404 error page appears.
Tips for Designing Custom 404 Error Page
Keep it simple: Avoid cluttering the page with too much information or too many links. Stick to the essential information and make sure the page is easy to navigate.
Be creative: Your custom 404 error page doesn’t have to be boring. You can incorporate your website’s branding and use creative graphics or illustrations to make the page more visually appealing.
Provide a search bar: Adding a search bar to your custom 404 error page can help users find the content they were looking for more easily.
Avoid redirecting immediately: While it may be tempting to immediately redirect users to your homepage or another page on your website, it’s better to give them a chance to understand why they landed on the 404 error page first.
By following these tips and using HTML and CSS to create a custom 404 error page, you can improve the overall user experience on your website and reduce the chances of users leaving due to a frustrating error message.
Conclusion
In conclusion, creating a custom 404 error page using HTML and CSS is a simple but important step in improving your website’s user experience. By providing helpful information and links, you can keep users on your website even when they encounter a 404 error.
Additionally, a custom 404 error page can also help with search engine optimization (SEO) as search engines look for informative and user-friendly pages. By providing a custom 404 error page, you can reduce the chances of users leaving your website and improve the overall user experience.