Learn how to create an interactive 404 Not Found error page using HTML and CSS. Engage your visitors with custom designs and animation effects.
Table of Contents
When users encounter a "404 Not Found" error page while browsing a website, it indicates that the requested page does not exist. This can happen due to various reasons such as broken links, mistyped URLs, or removed content. While encountering a 404 error can be frustrating for users, you have the opportunity to turn it into a positive experience by creating a custom and engaging error page.
In this tutorial, we will guide you through the process of designing a 404 Not Found animated page using HTML and CSS. By following these steps, you will be able to transform a mundane error page into an interactive and visually appealing element of your website.
Why is it important to create a custom error page? Firstly, it helps maintain a consistent and professional look throughout your website, even in the face of errors. Secondly, it provides an opportunity to engage with your users and guide them back to the main website or other relevant content. A well-designed error page can turn a negative experience into a positive one, leaving a lasting impression on your visitors.
In the upcoming sections, we will cover the planning, HTML structure, CSS styling, animation effects, error messaging, testing and deployment, and SEO optimization for your 404 Not Found animated page. By the end of this tutorial, you will have the knowledge and skills to create a visually appealing and interactive error page that adds value to your website.
Now, let's dive into the details and explore each step in creating an impressive 404 Not Found animated page using HTML and CSS.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML and CSS. 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 error 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.
Let's break down the code step by step:
1. <!DOCTYPE html>: This is the document type declaration and informs the browser that the document is an HTML5 document.
2. <html lang="en">: This is the opening tag of the HTML document. It specifies that the language of the document is English.
3. <head>: This is the head section of the HTML document, which contains meta-information about the page.
4. <title>404 Page Not Found</title>: This line specifies the title of the web page, which will be displayed in the browser's title bar or tab.
5. <meta charset="UTF-8" />: This meta tag defines the character encoding for the document as UTF-8, which supports a wide range of characters and is commonly used for web pages.
6. <meta name="viewport" content="width=device-width" />: This meta tag sets the viewport width to the device width, which ensures that the web page is displayed properly on different devices with varying screen sizes.
7. <link rel="stylesheet" href="styles.css" />: This line imports an external CSS file called "styles.css" to apply styles to the HTML elements in the document.
8. </head>: This is the closing tag for the head section.
9. <body>: This is the body section of the HTML document, which contains the visible content of the web page.
10. <main>: This is the main section of the page, where the main content is placed.
11. <div>: This opening tag defines a division or container element.
12. <svg class="paper" viewBox="0 0 300 300" width="300px" height="300px" role="img" aria-label="A piece of paper torn in half">: This line inserts an SVG (Scalable Vector Graphics) element with a class of "paper". The SVG represents a torn piece of paper and has attributes such as viewbox, width, height, role, and aria-label.
13. The SVG element contains several groups (<g>) and polygons (<polygon>) representing various parts of the torn paper, along with classes that define the styles and positioning.
14. Next, there is another division (<div>) containing an <h1> heading, a <p> paragraph, and an anchor tag (<a>) with a class of "btn-link". These elements represent the content of the page, which is displayed below the SVG element.
15. </main>: This is the closing tag for the main section.
16. </body>: This is the closing tag for the body section.
17. </html>: This is the closing tag for the HTML document.
This is the basic structure of our error 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 error page is in place, the next step is to add styling to the error page using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our error page.
Let's go through the code block by block to understand its purpose and functionality:
1. The first block of code sets some initial styles for all elements on the page. It sets the border to 0, uses the border-box box-sizing model, and resets the margin and padding to 0 for all elements.
2. The :root selector is used to define CSS variables, which can be reused throughout the stylesheet. It sets several variables related to colors and transition durations. Additionally, it calculates the font size based on the viewport width using the calc function.
3. The body selector styles the <body> element. It sets the background color and text color using the defined CSS variables. The display property is set to flex, making the body a flex container. The font is set to 1em/1.5 Nunito, sans-serif, with a height of 100% of the viewport height. The transition property is used to specify the animated transition of background color and text color.
4. The main selector styles the <main> element. It sets it as a grid container with a 3em grid gap between rows and a 1.5em grid gap between columns. The margin is set to auto to center the element horizontally. The max-width is set to 40em (640px), and padding is added to the top and bottom. The text-align is set to center, and the width is calculated to be 100% minus 3em.
5. The h1 selector styles heading elements. It sets the font size to 3em and removes the bottom margin.
6. The p selector styles paragraph elements. It removes the bottom margin.
7. The .btn-link selector styles elements with the class "btn-link". It sets the background color to the primary color defined by the CSS variable. It adds a border-radius of 1.5em, removes the default outline style, sets padding for spacing, and centers the text.
8. The transition property is used to animate the background color on hover or focus.
9. The .btn-link selector also styles visited links to have the same color as the text color.
10. The .btn-link selector styles the element on hover, changing the background color and removing the text decoration.
11. The .paper selector styles elements with the class "paper". It sets the display to block, centers the element horizontally, and sets the maximum width to 224px. The height is set to auto, allowing the element to adjust its height based on its content.
12. The .paper__fill selector styles elements with the class "paper__fill". It sets the fill color to white.
13. The .paper__outline and .paper__lines selectors style elements with the classes "paper__outline" and "paper__lines" respectively. They both set the stroke color of the elements and specify a transition duration for the stroke color.
14. The .paper__shadow selector styles elements with the class "paper__shadow". It sets the fill color to a shade of gray and specifies a transition duration for the fill color.
15. The .paper__top, .paper__bottom, .paper__tear, and .paper__tear-fill selectors define animations for specific elements. These animations control the movement and appearance of paper-like elements on the page. The animations are triggered by adding or removing classes dynamically using JavaScript.
16. The .paper__outline:hover .paper__top and .paper__outline:hover .paper__bottom selectors control the movement of the paper elements when hovering over the .paper__outline element.
17. The @media (prefers-color-scheme: dark) block applies styles specifically for devices that have a dark color scheme preference. It overrides the background and text colors defined in the :root selector to create a dark theme. Additionally, it changes the fill color of the first .paper__shadow element.
18. The @media (min-width: 768px) block applies styles for screens with a minimum width of 768px. It modifies the layout of the page by changing the grid layout of the main element and adjusting the maximum width of .paper elements.
19. The last block defines several keyframe animations using the @keyframes rule. These animations control the movement and appearance of the paper-like elements when certain events occur.
This will give our error 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.
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,90%);
--fg: hsl(var(--hue),10%,10%);
--primary: hsl(var(--hue),90%,45%);
--primary-down: hsl(var(--hue),90%,65%);
--trans-dur: 0.3s;
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
body {
background-color: var(--bg);
color: var(--fg);
display: flex;
font: 1em/1.5 Nunito, sans-serif;
height: 100vh;
transition:
background-color var(--trans-dur),
color var(--trans-dur);
}
main {
display: grid;
grid-gap: 3em 1.5em;
margin: auto;
max-width: 40em;
padding: 3em 0;
text-align: center;
width: calc(100% - 3em);
}
h1 {
font-size: 3em;
line-height: 1;
margin: 0 0 1.5rem;
}
p {
margin: 0 0 1.5em;
}
.btn-link {
background: var(--primary);
border-radius: 1.5em;
display: inline-block;
outline: transparent;
padding: 0.75em 1.5em;
text-align: center;
text-decoration: none;
transition: background-color 0.15s linear;
}
.btn-link,
.btn-link:visited {
color: hsl(0,0%,100%);
}
.btn-link:focus-visible,
.btn-link:hover {
background: var(--primary-down);
}
.btn-link:hover {
text-decoration: none;
}
.paper {
display: block;
margin: auto;
overflow: visible;
width: 100%;
max-width: 224px;
height: auto;
}
.paper__fill {
fill: hsl(0,0%,100%);
}
.paper__outline,
.paper__lines {
transition: stroke var(--trans-dur);
}
.paper__outline {
stroke: hsl(var(--hue),10%,10%);
}
.paper__lines {
stroke: hsl(var(--hue),10%,70%);
}
.paper__shadow {
fill: hsl(var(--hue),10%,70%);
transition: fill var(--trans-dur);
}
.paper__top,
.paper__bottom,
.paper__tear,
.paper__tear-fill {
animation: paperTop 1.25s cubic-bezier(0.77,0,0.18,1);
}
.paper__top,
.paper__bottom {
transform-origin: 0 148px;
transition: transform var(--trans-dur) cubic-bezier(0.77,0,0.18,1);
}
.paper__top {
transform: translate(0,8px);
}
.paper__bottom {
animation-name: paperBottom;
transform: translate(0,42px);
}
.paper__tear,
.paper__tear-fill {
animation-timing-function: cubic-bezier(0.32,0,0.67,0);
}
.paper__tear {
animation-name: paperTear;
stroke-dashoffset: 0;
}
.paper__tear-fill {
animation-name: paperTearFill;
}
.paper__outline:hover .paper__top,
.paper__outline:hover .paper__bottom {
transform: translate(0,25px);
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,25%);
--fg: hsl(var(--hue),10%,90%);
}
.paper__shadow:first-child {
fill: hsl(var(--hue),10%,15%);
}
}
/* Beyond mobile */
@media (min-width: 768px) {
main {
grid-template-columns: 1fr 2fr;
align-items: center;
text-align: left;
}
.paper {
max-width: 300px;
}
}
/* Animations */
@keyframes paperTop {
from,
40% {
animation-timing-function: cubic-bezier(0.32,0,0.67,0);
transform: translate(0,25px) rotate(0);
transform-origin: 61px 148px;
}
70% {
animation-timing-function: cubic-bezier(0.33,1,0.67,1.5);
transform: translate(0,25px) rotate(-5deg);
transform-origin: 61px 148px;
}
to {
transform: translate(0,8px) rotate(0);
transform-origin: 0 148px;
}
}
@keyframes paperBottom {
from,
40% {
animation-timing-function: cubic-bezier(0.32,0,0.67,0);
transform: translate(0,25px) rotate(0);
transform-origin: 61px 148px;
}
70% {
animation-timing-function: cubic-bezier(0.33,1,0.67,1.5);
transform: translate(0,25px) rotate(5deg);
transform-origin: 61px 148px;
}
to {
transform: translate(0,42px) rotate(0);
transform-origin: 0 148px;
}
}
@keyframes paperTear {
from,
40% {
stroke-dashoffset: -198;
}
70%,
to {
stroke-dashoffset: 0;
}
}
@keyframes paperTearFill {
from,
40% {
width: 187px;
}
70%,
to {
width: 0;
}
} Final Output:
Conclusion:
Congratulations! You have successfully learned how to create a 404 Not Found animated page using HTML and CSS. By following the steps outlined in this tutorial, you have gained the knowledge and skills to transform a simple error page into an engaging and visually appealing element of your website.
Remember, a well-designed error page not only provides a consistent user experience but also presents an opportunity to guide your visitors back to your main website or relevant content. By incorporating animation effects, informative error messages, and visually captivating designs, you can leave a lasting impression on your users even when they encounter errors.
Throughout this tutorial, you have learned the importance of planning your error page design, structuring the HTML elements, styling with CSS, adding animation effects, optimizing for SEO, and testing the functionality of your error page. These steps collectively contribute to creating a seamless user experience and reinforcing your website's brand identity.
Now, it's time to put your newly acquired knowledge into practice. Start by brainstorming creative design ideas that align with your website's theme and purpose. Use HTML to structure the elements of your error page and CSS to style them according to your desired visual aesthetics. Consider adding animation effects to make the error page more engaging and interactive.
Don't forget to optimize your error page for search engines by incorporating relevant keywords, meta tags, and descriptive content. This will help improve its visibility in search engine results and ensure that users can easily find their way back to your website.
Finally, thoroughly test your error page to ensure its functionality across different devices and browsers. Integrate it into your website's codebase following the appropriate deployment process.
By investing time and effort into creating a custom 404 Not Found animated page, you are not only enhancing the user experience but also demonstrating your commitment to delivering a seamless and engaging website.
Now, go ahead and apply what you have learned to create an error page that surprises and delights your users while guiding them back to your website's valuable content. Happy coding!
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 😊
