Creating a 404 Error Page
The dreaded 404 "page not found" error is one of the most common errors encountered by website visitors. While it's virtually impossible to prevent all 404 errors, it's easy to create a custom 404 page that actually helps users find what they're looking for.
A 404 page is shown when a visitor lands on a URL that doesn't exist. This could be for any number of reasons. For example, they may have followed an old link, mistyped a URL, or you moved a page.
A default server-generated 404 page is pretty much a dead end. It simply tells the user that the page wasn't found. No help offered. No navigation links or search box to help the user on their way. Suffice to say, these pages can appear uninviting and unhelpful. A good custom 404 page can turn a potentially frustrating moment into an opportunity to keep the user engaged.
What Makes a Good 404 Page?
A well-designed custom 404 page should:
- Acknowledge the error clearly: Don't make the user wonder if the page is still loading. State that the page wasn't found.
- Offer a way out: A prominent "Back to Home" button gives the user a clear escape route with a single click.
- Provide a search box: If a user came looking for something specific, let them search for it directly from the error page.
- Show key navigation links: A small set of links to your most important pages can help the user find what they may have been looking for.
- Stay on-brand: Use your own colours, fonts, and logo so the user knows they are still on your website and hasn't gone somewhere unexpected.
Full-Page Centering with CSS Grid
Many 404 pages center all their content in the middle of the viewport. This is a good way to make the page look clean and organized. The simplest way to do this is to use display: grid with place-items: center on the body, combined with min-height: 100vh to ensure the page fills the full screen height regardless of content size:
Full Working Example
Below is a stylish, fully functional 404 page featuring a large gradient error number, a helpful search box, navigation links to key pages, and a clear "Back to Homepage" button: