In this complete tutorial we will discover how to design a modern and professional “404” error page using HTML and CSS only. The provided source code features a clean UI responsive layout custom typography and smooth hover animations. You will learn how to incorporate engaging visuals like background GIFs a bold 404 headline and a clear call to action button to guide users back to the homepage. All designed to improve user experience and keep visitors engaged even when they land on a missing page.
Introduction
Welcome to this tutorial on building a modern and responsive “404” error page using HTML and CSS only. Whether you are designing a personal portfolio or a professional website having a custom “404” page add a professional touch and keeps users engaged even when something goes wrong.
In this guide we will learn how to design a clean and eye catching layout featuring a large animated graphic bold typography and a call to action button that directs users back to the homepage. We will use Flexbox to structure the content and ensure the page looks great on all screen sizes. we will also add smooth hover effects and styled elements that match the overall design of a professional website.
This project is perfect for developers of all levels who want to improve their sites user experience and leave a good impression even on broken links.
Tools and Technologies Required
Basic Knowledge of HTML & CSS
- nderstanding of semantic HTML tags.
- Understanding CSS selectors, flexbox and media queries.
Code Editor
Any modern code editor like:
- Visual Studio Code.
- Sublime Text
- Brackets
Web Browser
For testing and previewing your 404 page:
- Google Chrome.
- Firefox .
- Safari.
- Edge.
Internet Connection
To load external resources such as:
- Google Fonts.
- Bootstrap CSS.
- Background image or animated GIF.
Project Setup
A simple structure like:
- Project name(404_Page).
- index.html and
- style.css
Html Document
Html structure and Setup
- The code begins with the <!DOCTYPE html> declaration which tells the browser this is an HTML5 document.
- Inside the <head> it includes important meta and title tags Google Fonts Bootstrap CSS and a custom stylesheet style.css.
Page Container and Section
- The main content is wrapped in a <section> with a class page 404 which will be styled in the CSS file.
- A Bootstrap container (<div class=”container”>) is used to center and contain all the page content.
404 Error Display
- A div with the class four_zero_four_bg is responsible for showing a background image or GIF (styled via CSS).
- Inside it, the large “404” heading is placed using an <h1> tag for visual emphasis.
- This is the main element that immediately tells the user they’ve landed on an error page.
Error Message and Description
- The contant_box_404 div contains the text elements for the message below the “404”.
- It includes a heading (<h3 class=”h2″>) that says “Oops! Page Not Found”.
- A paragraph <p> follows explaining that the page may have been moved or does not exist.
Call-to-Action Button
- A styled link <a class=”link_404″> provided to help users navigate back to the homepage.
- The link uses custom styling to appear like a button enhancing user experience.
- It currently leads to an empty string (href=””), but should be updated to point to your home page like(index.html or home.html).
The complete code is waiting for you below—go ahead, copy it, and start building!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>404 page</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="page_404">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-10 col-sm-offset-1 text-center">
<div class="four_zero_four_bg">
<h1 class="text-center">404</h1>
</div>
<div class="contant_box_404">
<h3 class="h2">Oops! Page Not Found</h3>
<p>
The page you're looking for doesn't exist or has been moved.
</p>
<a href="" class="link_404">Go to Home</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS Code
.page_404 {
padding: 40px 0;
background: #fff;
font-family: 'Arvo', serif;
}- Adds vertical spacing above and below the section.
- Sets the background color to white.
- Applies the ‘Arvo’ serif font for a classic look.
.page_404 img {
width: 100%;
}Ensures images are responsive and fill the container.
.four_zero_four_bg {
background-image: url(https://cdn.dribbble.com/
users/285475/screenshots/2083086/dribbble_1.gif);
height: 400px;
background-position: center;
}- Fixes height of the image block.
- Centers the background image.
.four_zero_four_bg h1 {
font-size: 80px;
}Makes the 404 number large and attention-grabbing.
.four_zero_four_bg h3 {
font-size: 80px;
}Same large font size for any secondary headline.
.link_404 {
color: #fff !important;
padding: 10px 20px;
background: #39ac31;
margin: 20px 0;
display: inline-block;
}- Adds spacing inside the button.
- Green background for the button.
- Adds space above and below the button.
- Allows padding and margin to work correctly.
.contant_box_404 {
margin-top: -50px;
}Moves the content box upward slightly for layout effect.
The complete code is waiting for you below—go ahead, copy it, and continue building!
.page_404 {
padding: 80px 0;
background: #fff;
font-family: 'Inter', sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
}
.four_zero_four_bg {
background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
height: 300px;
background-position: center;
background-repeat: no-repeat;
position: relative;
margin-bottom: 30px;
}
.four_zero_four_bg h1 {
font-size: 120px;
font-weight: 700;
color: #343a40;
text-align: center;
margin: 0;
line-height: 1;
}
.contant_box_404 {
text-align: center;
padding: 0 20px;
}
.contant_box_404 h3 {
font-size: 32px;
font-weight: 500;
color: #212529;
margin-bottom: 5px;
}
.contant_box_404 p {
font-size: 18px;
color: #6c757d;
margin-bottom: 30px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.link_404 {
color: #fff !important;
padding: 12px 30px;
background: #4361ee;
margin: 20px 0;
display: inline-block;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
border: none;
box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
}
.link_404:hover {
background: #3a56d4;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
}
.text-center {
text-align: center;
padding-top: 0px;
}
Output
Conclusion
This project is not just about displaying an error message it is about creating a modern and user friendly “404” page that keeps your website professional. Even though is using HTML and CSS only the thoughtful design elements like an animated background or Gif, smooth button hover effects, centered layout and clear typography make it clear.
The main goal is to ensure that when users click on broken link or missing they are not met with a clear message but instead with a visually appealing page that helps guide them back on home with attention to layout, color, spacing and responsiveness this “404” page looks great on both desktop and mobile devices.
If you are learning web development this is a perfect mini project to start with. It helps you practice using Flexbox, custom fonts, external libraries and design principles all while building something that every website needs. Once you have mastered this you will be ready to take on even more creative and useful UI components.
2 comments
[…] Posts Animated Loading Screen with Progress and Smooth Page… Custom 404 Page Design with HTML & CSS… Responsive Contact Form UI with Animation | Pure… Modern Website Footer Design Using HTML and […]
[…] That Revolutionize Productivity, Design… Animated Loading Screen with Progress and Smooth Page… Custom 404 Page Design with HTML & CSS… Responsive Contact Form UI with Animation | Pure… Modern Website Footer Design Using HTML and […]