A custom 404 error page is a webpage that is displayed to a user when they try to access a webpage that does not exist on a website. This page is often used to provide helpful information to the user, such as alternative links to popular pages on the website or a search bar to help them find what they are looking for.
To create a custom 404 error page using HTML & CSS, you will need to have basic knowledge of both languages. First, you will need to create a new HTML file and structure it using the necessary tags, such as the <html>, <head>, and <body> tags. Within the <head> tag, you can add a <title> tag to specify the title of the page, as well as <meta> tags to provide a description and keywords for search engine optimization (SEO).
Next, you can use the <body> tag to add content to the page. This can include text, images, and other elements such as buttons or links. You can use CSS to style the page, including the layout, colors, and fonts. It is important to make the custom 404 error page user-friendly and easy to navigate.
This can help improve the user experience and keep visitors on your website. You may want to include a search bar or links to popular pages on your website to help users find what they are looking for.
Video Tutorial of How To Create Custom 404 Page Using HTML & CSS
To create this program (custom 404 page). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
In the first place, make a HTML document with the name of index.html and paste the given codes in your HTML record. Keep in mind, you’ve to make a document with .html extension.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <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="error-page"> <div class="content"> <div class="header"> <img src="./404 Error.gif" alt=""> </div> <h4 data-text="Opps! Page not found">Opps! Page not found</h4> <p>Sorry, the page you are looking for does not exist. If you think something is broken, report a problem.</p> <div class="btns"> <a href="">Return Home</a> <a href="">Report Problem</a> </div> </div> </div> </body> </html>
Second, make a CSS record with the name of style.css and glue the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.
* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } body{ display: flex; justify-content: center; align-items: center; text-align: center; min-height: 100vh; background: #fff; } #error-page{ position: relative; display: flex; justify-content: center; align-items: center; text-align: center; } #error-page .content{ max-width: 650px; text-align: center; } #error-page .header img{ width: 380px; } #error-page h4{ position: relative; color: #000; font-size: 2em; text-transform: uppercase; margin-bottom: 20px; } #error-page h4::before{ 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; } #error-page p{ font-size: 1.2em; color: #0d0d0d; } #error-page .btns{ margin: 25px 0px; display: inline-flex; } #error-page .btns a{ display: inline-block; text-decoration: none; padding: 10px 25px; border: 2px solid #69a6ce; color: #69a6ce; border-radius: 25px; font-weight: 500; margin: 0px 10px; text-transform: uppercase; transition: all 0.3s ease; } #error-page .btns a:hover{ background: #69a6ce; color: #fff; }
Last, create a htaccess file with the name of .htaccess and paste the given codes in your htaccess file.
RewriteEngine On RewriteCond %{REQUEST_FILENAME}% !-f RewriteCond %{REQUEST_FILENAME}% !-d ErrorDocument 404 /stech04/404.html
That’s all, now you’ve successfully created a program custom 404 page Using Html, CSS. If your code doesn’t work or you’ve faced any error/problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
Click on the following download button to download all source code files.
Make sure that you are using this code on online server or localhost server (xampp server) other wise it’s not working.