Improve user experience and SEO by creating a responsive 404 error page. Follow our step-by-step HTML, CSS, and JavaScript tutorial for designing a user-friendly 404 page.
Table of Contents
A 404 not found page is typically one that displays when a user tries to access an address that no longer exists. It commonly shows the main content of the website, with a note telling users that it can't be found on this particular domain.
The 404 not found page is an important part of any website, especially if you're running a blog or online store. In this article, we'll walk through the process of creating a responsive 404 not found page with HTML, CSS, and JavaScript.
Let's start making a responsive 404 not found page using HTML, Pure CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our 404 not found page.
The code includes several elements, such as a header and a section with an error message, as well as an image and a link to the home page.
The error message section is labeled with the class "error" and includes a heading with the class "error__title" displaying the number "404" and a subheading with the class "error__type" displaying the message "Page not found". The section also includes a paragraph with the class "error__cta" providing information about the error and suggesting some solutions.
The image of an astronaut is contained in a div with the class "astronaut" and is labeled with the "src" class.
Finally, the code includes a reference to an external JavaScript file named "script.js" that could be used to add interactivity to the web page.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our 404 not found page using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the 404 not found page is in place, the next step is to add styling to the 404 not found page using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our 404 not found page.
The CSS code sets the margin and padding of the body element to zero and sets the height to 100% of the viewport height. It also sets the background image using a linear gradient of several colors. The display is set to flex, and the elements are centered both horizontally and vertically.
The "center" class is defined with properties that center the elements inside it both horizontally and vertically, set a maximum width of 50em, and set a height of 100%.
The "error" class is defined with properties that center the text within it. The "error__title" class is defined with a gradient background and sets the font size, weight, and style of the text. The "error__type" class sets the color, font weight, size, and spacing of the text, and the "error__cta" class sets the font family, size, and weight of the text. The "error__link" class sets the color, padding, and text decoration of the link, and two sub-classes set the background color of the link.
The "star" class sets the properties of a small star that will be displayed on the page. The position is set to absolute, and the animation property is used to create a twinkling effect.
The "astronaut" class positions an image of an astronaut on the page and animates it to simulate movement across the page.
The "@keyframes" rule is used to define the animation sequences for the star and astronaut. The "astronautFly" keyframe sequence defines the movement of the astronaut across the page, and the "starTwinkle" keyframe sequence defines the twinkle effect of the star.
The "@media" rule applies styles to the elements within certain screen sizes. In this case, it modifies the font size of some of the text elements for screens with a maximum width of 40em.
This will give our 404 not found page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
margin:0;
padding:0;
height:100vh;
background-image: linear-gradient(to top, #2e1753, #1f1746, #131537, #0d1028, #050819);
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}
.center {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
max-width: 50em;
margin: 0 auto;
}
.error {
text-align: center;
}
.error__title {
background: linear-gradient(#00bcd4, #9575cd);
-webkit-background-clip: text;
background-clip: text;
font-family: "Montserrat";
font-size: 18rem;
font-weight: 200;
margin: 0;
-webkit-text-fill-color: transparent;
}
.error__type {
color: #fff;
font-weight: 600;
font-size: 2.75rem;
letter-spacing: 0.125em;
margin: 0;
text-transform: uppercase;
}
.error__cta {
color: #fff;
font-family: "Source Sans Pro";
font-size: 1.25rem;
font-weight: 300;
line-height: 2;
}
.error__link {
color: #fff;
padding: 0.25em 0.5em;
text-decoration: none;
white-space: nowrap;
}
.error__link--purple {
background: #9575cd;
}
.error__link--blue {
background: #00bcd4;
}
.star{
position:absolute;
width:2px;
height:2px;
background:#fff;
right:0;
animation:starTwinkle 3s infinite linear;
}
.astronaut img{
width:100px;
position:absolute;
top:55%;
animation:astronautFly 6s infinite linear;
}
@keyframes astronautFly{
0%{
left:-100px;
}
25%{
top:50%;
transform:rotate(30deg);
}
50%{
transform:rotate(45deg);
top:55%;
}
75%{
top:60%;
transform:rotate(30deg);
}
100%{
left:110%;
transform:rotate(45deg);
}
}
@keyframes starTwinkle{
0%{
background:rgba(255,255,255,0.4);
}
25%{
background:rgba(255,255,255,0.8);
}
50%{
background:rgba(255,255,255,1);
}
75%{
background:rgba(255,255,255,0.8);
}
100%{
background:rgba(255,255,255,0.4);
}
}
@media (max-width: 40em) {
.error__title {
font-size: 10rem;
}
.error__type {
font-size: 1.25rem;
}
.error__cta {
font-size: 1rem;
}
} Step 3 (JavaScript Code):
Finally, we need to create a function for stars in JavaScript.
The JavaScript code block uses the DOM (Document Object Model) to create an animation of stars twinkling across the screen.
The document.addEventListener function waits for the HTML document to load and become ready. Once it's ready, the function creates an anonymous function that creates a new variable called body, which refers to the body element of the HTML document.
The function then sets an interval of 100 milliseconds and calls the createStar function. This creates a star by creating a new div element using the createElement method and then setting the CSS class of that element to star.
Next, the div element is appended as a child to the body element of the HTML document using the appendChild method.
A new interval is set to run the runStar function every 10 milliseconds. This function animates the star's movement from right to left on the screen by updating its position using the style attribute and the right and top CSS properties.
Finally, the createStar function is called to set up another star. The process continues, adding more stars to the screen, each with its own interval running the runStar function, until the user closes the web page or stops the animation.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
document.addEventListener("DOMContentLoaded",function(){
var body=document.body;
setInterval(createStar,100);
function createStar(){
var right=Math.random()*500;
var top=Math.random()*screen.height;
var star=document.createElement("div");
star.classList.add("star")
body.appendChild(star);
setInterval(runStar,10);
star.style.top=top+"px";
function runStar(){
if(right>=screen.width){
star.remove();
}
right+=3;
star.style.right=right+"px";
}
}
})Final Output:
Conclusion:
Creating a responsive 404 error page is an important part of providing a good user experience on your website. By following the tips and best practices in this article, you can create a user-friendly 404 page that helps your users find what they are looking for and improves your SEO. Remember to test and optimize your 404 page to ensure that it works well and provides a good user experience.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
