404 Error Page Not Found
The 404 error page is what a browser displays when a page doesn’t exist on a website.
The HTTP 404 status code, “Not Found” error, indicates that the web server cannot find a requested page.
This error code is triggered when a user tries to access a page that’s been deleted or moved. You can also trigger this error when accessing an incorrect URL.
Importance of having a custom 404 page
If your website doesn’t have an error page, the browser displays a generic black-and-white page from the server containing very little information.
Here are some reasons why you should have a custom 404 error page:
- Web design consistency: Having the same branding as the rest of your website on your error page will improve user experience.
- More information: This will reduce the likelihood of users leaving your site immediately after encountering an error page.
- SEO: Relevant links on an error page will help search engines index the page, improving your search ranking.
- Analytics: You can track the 404 error page to record and analyze the number of errors on your site. This will help you find and fix broken links and any other issues.
Common components of a 404 page
Here is what you’re likely to find on an error page:
- Error message: You must tell the user what went wrong. There are several other errors they can encounter when visiting your site. Other errors include 401 Unauthorized, 403 Forbidden, 500 Internal Server Error, 502 Bad Gateway, and 503 Service Unavailable.
- Navigation: You should have links to the homepage and other relevant pages to help redirect the user.
- Search bar: This will help users find exactly what they want.
- Friendly message: You can have an apology message or some lighthearted humor.
Creating the error 404 page
To create a 404 Error Page Not Found️ using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:
Steps for Creating a 404 Error Page Not Found️
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css - Create a
script.jsfile. The file name must be script and its extension .js - Download the background image and put this image inside the project folder. This is the website background image.
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download all the source code files of the Website with the SHIFT Media, by clicking on the given download button.
First, paste the following codes into your index.html file.
HTML CODE </>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Responsive Coding Created By Shift Media Solutions| https://shiftmediaegy.blogspot.com -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page Not Found">
<meta name="author" content="Shift Media">
<title>Page Not Found</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
</style>
</head>
<body>
<section>
<div class="container">
<div class="text">
<h1>Page Not Found</h1>
<p>We can't seem to find the page you're looking for. Please check the URL for any typos.</p>
<div class="input-box">
<input type="text" id="input-box" placeholder="Search..." autocomplete="off">
</div>
<!-- Responsive Html Coding Created By Shift Media Solutions| SMS -->
<div class="result-box"></div>
<ul class="menu">
<li><a href="#">Go to Homepage</a></li>
<li><a href="#">Visit our Blog</a></li>
<li><a href="#">Contact support</a></li>
</ul>
</div>
<div><img class="image" src="https://omjsblog.files.wordpress.com/2023/07/errorimg.png" alt=""></div>
</div>
</section>
<script src="script.js">
</script>
</body>
</html>Second, paste the following codes into your style.css file.
CSS CODE </>
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #22232e;
}
/* Responsive Css Coding Created By Shift Media Solutions| SMS */
a {
text-decoration: none;
}
ul {
list-style: disc;
color: #e0ffff;
}
section {
width: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
column-gap: 20px;
}
.container img {
width: 420px;
}
.text {
display: block;
padding: 40px 40px;
width: 450px;
}
.text h1 {
color: #00c2cb;
font-size: 35px;
font-weight: 700;
margin-bottom: 15px;
}
.text p {
font-size: 15px;
color: #e0ffff;
margin-bottom: 15px;
line-height: 1.5rem;
margin-bottom: 15px;
}
.text .input-box {
position: relative;
display: flex;
width: 100%;
}
.input-box input {
width: 85%;
height: 40px;
padding: 5px 15px;
font-size: 16px;
color: #22232e;
border-radius: 5px 5px 0px 0px;
border: none;
outline: none;
}
/* Responsive Css Coding Created By Shift Media Solutions| SMS */
.menu {
display: flex;
flex-direction: column;
margin-top: 15px;
margin-left: 30px;
}
.menu li a {
display: flex;
font-size: 1rem;
color: #00c2cb;
transition: 0.1s;
}
.result-box {
width: 85%;
}
.result-box ul {
border-top: 2px solid #42455a;
padding: 10px 5px;
background: #fff;
}
.result-box ul li {
list-style: none;
border-radius: 3px;
padding: 10px 5px;
cursor: pointer;
color: #22232e;
}
.result-box ul li:hover {
background-color: #e0ffff;
}
.result-box {
max-height: 100px;
overflow: scroll;
border-radius: 0px 0px 5px 5px;
}
.result-box li a {
color: #22232e;
}
.result-box li:focus a {
color: #e0ffff;
}
/* Responsive Css Coding Created By Shift Media Solutions| SMS */
@media screen and (max-width: 600px) {
.container {
display: flex;
flex-direction: column-reverse;
}
.text,
.image {
width: 100%;
}
.container {
min-width: 200px;
padding: 40px 0px;
}
.text {
display: block;
width: 100%;
padding: 20px 40px;
}
.image {
display: flex;
width: 200px;
align-self: center;
justify-content: center;
margin: auto;
}
}Third, paste the following codes into your script.js file.
JAVASCRIPT CODE </>
const resultsBox = document.querySelector(".result-box");
const inputBox = document.getElementById("input-box");
// Responsive Js Coding Created By Shift Media Solutions| SMS
const links = [{
href: "www.example.com/faqs",
text: "Frequently asked questions"
},
{
href: "www.example.com/blog/article",
text: "Article Title"
},
{
href: "www.example.com/contact",
text: "Contact"
}
];
inputBox.onkeyup = function() {
let result = [];
let input = inputBox.value;
if (input.length) {
result = links.filter((link) => {
return link.text.toLowerCase().includes(input.toLowerCase());
});
}
display(result);
};
// Responsive Js Coding Created By Shift Media Solutions| SMS
function display(result) {
if (result.length) {
const content = result.map((list, index) => {
const href = list.href;
return `<li><a href="${href}">${list.text}</a></li>`;
});
resultsBox.innerHTML = `<ul>${content.join("")}</ul>`;
} else {
resultsBox.innerHTML = "";
}
}CLICK ON SAVE, button to save your work.
That’s all, now you’ve successfully created a Website with a Shift Media Solutions®️. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.
| This Design | 404 Error Page Not Found |
| Developed By: Shift Media Solutions®️(SMS) | Demo/Source Code |
| Owner: Shift Media | Responsive: No SMS14 |