HTTP Errors: 404

Codecademy Team
An introduction to the Web's most popular error

Background:

There are five types of HTTP status codes that report on communications between the client and server. The 400-level codes denote a client-side error, meaning an error that originated from an action taken by the user of a web app. Sometimes you’ll see a 404 error if you incorrectly type the URL to a web page you want to visit, and instead of being taken there, you’re rerouted to a page that reads something like, “404 Error - File Not Found.” The 404 error is telling you that the request you sent did in fact make it to the server, but the server could not find the specific file you were requesting.

Other actions that will set off a 404 error:

  • Clicking a link to a file that has been deleted or renamed

Using Your Browser’s Developer Tools to Check Status Codes:

Many modern browsers have a “developer tools” mode that allows you to access loads of meta-data about web pages. Here’s how to use Google Chrome’s Developer Tools to check the status codes of files on the web. (Other browsers’ developer tools have this feature too, but you’ll have to google those to learn more.)

Instructions:

  1. If on a Mac, go to a web page of your choosing and press down the control button while you click anywhere on the document. If you’re on a PC, just right-click anywhere in the document. A menu will pop up next to where you clicked. Click the “Inspect Element” option.
  2. The developer tools panel will show up in the bottom third of your screen. Don’t be afraid! It will go away if you click the small “x” at the top far-right of the panel.
  3. To check status codes of the files listed on the web page, click on the “Network” tab (the second tab from the right, directly after “Elements”).
  4. On the bottom half of the panel for this tab, you’ll see a table listing information about all the files associated with that web page. The “Status” column will show you the HTTP status of each file.
  5. Do some exploring! Click buttons and links on the web page you’ve visited, and see what changes in the “Network” tab. If you see a status code written in red, it means there was an error. Maybe it’s a 404. Check it out!