Develop a custom 404 error page with animations to makeit more engaging.

Hey, I am Ajink, and today in this blog, we’re going to develop a custom 404 error page with engaging animations using HTML, CSS, and JavaScript. A custom 404 page not only informs users that they’ve reached a non-existent page but also provides a visually appealing and engaging experience.

HTML Code: create index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>404 Error - Page Not Found</title>
</head>
<body>
  <div class="error-container">
    <div class="error-content">
      <div class="error-message">
        <h1>404</h1>
        <p>Oops! Page not found.</p>
      </div>
      <div class="animated-bg"></div>
    </div>
  </div>
  <script defer src="script.js"></script>
</body>
</html>

HTML Code Explanation:

  • We have a basic HTML structure with a container and content div containing an error message and an animated background.

CSS Code:

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #3498db;
  overflow: hidden;
}

.error-container {
  text-align: center;
}

.error-content {
  position: relative;
}

.error-message {
  color: #fff;
  z-index: 2;
}

.error-message h1 {
  font-size: 8em;
  margin: 0;
}

.error-message p {
  font-size: 1.5em;
  margin: 10px 0 30px;
}

.animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: slide 3s linear infinite;
}

@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

CSS Code Explanation:

  • The CSS provides styling for the custom 404 error page, including colors, fonts, and animations.
  • The .animated-bg class creates a sliding animation to give a dynamic effect.

Conclusion:

In this blog, we successfully developed a custom 404 error page with engaging animations using HTML, CSS, and JavaScript. A well-designed error page can turn a negative experience into a positive one. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.

Thanks for reading, and if you have any doubts, feel free to comment!

Ajink Gupta
Ajink Gupta

Ajink Gupta is a software developer from Dombivli, Maharashtra, India. He has expertise in a variety of technologies including web development, mobile app development, and blockchain. He works with languages and frameworks like JavaScript, Python, Flutter, React, and Django.

Ajink Gupta is also active on several platforms where he shares his work and engages with the community. You can find his projects and contributions on GitHub and follow his tutorials and updates on his YouTube channel​ . He also has a personal website where he showcases his portfolio and ongoing projects at ajinkgupta.vercel.app

Articles: 60