work

32: How to Create a 404 Page in HTML | Create a Custom 404 Page | Learn HTML & CSS | HTML Tutorial



Sharing buttons:

how's it going everyone welcome back to

next episode on how to create HTML and

CSS now in this episode you're gonna

learn how to create a 404 page for a

website and this Aksum a second time

trying to record this episode because in

my last attempt my audio got distorted

when I listened to it afterwards so I

had to rerecord everything so hopefully

now everything should be fine so a 404

page in case you don't know is a page

that you're taking to inside a website

if you try to access a page that does

not exist inside the website now there's

a couple of ways you can accidentally

access these pages such as going to the

URL and write something like if it were

to go to this website for example called

cry outdoors if it were to go to the URL

and say forward slash blah blah blah

enter then you can see we're taking to a

404 page not found and then you can then

get some kind of message like continue

shopping or something that you can give

the user when they visit your website

and access a page they're not supposed

to find oh that doesn't really exist

inside the website so another example if

I were to go to youtube and go behind

USSOCOM

for slash blah blah blah is that we get

this page it doesn't really say 404 but

it is still a 404 page that says well

this page is trying to access doesn't

exist therefore try doing this instead

so what we're going to do is we're going

to learn how to create this 404 page for

our own website and as you can see this

is the website that we've been creating

in this course many episodes ago and

inside this website we created we didn't

create a 404 page so if we were to go to

the URL a mentor net forward slash blah

blah blah you can see that we get this

not found really boring looking page

inside the website so if we do not have

a 404 page inside our root folder and we

haven't told the server that we had this

page then you're going to get this

really boring screen that doesn't look

like it's part of your website like cry

out doors you can still see the men

using us to still see all different

links that we have inside the website

but inside my website you can't see

anything other than not found so we want

to create this special page that people

land on

if they tried to access a page that does

not exist and I'm pretty sure that

everyone watching this video at some

point has hit a 404 page not found at

some point when you visit the internet

because it's a pretty normal thing to

accidentally try to get to so we need to

make sure that when people visit your

website there is going to be a 404 page

because there's probably gonna be people

I sound like that sometimes one must be

too fast English because it's not my

main language so but you should have a

404 page when people visit your website

because people will hit it at some point

so now there's a couple of things that

we need to create when creating this 404

page for the website that we have the

first thing is that you need to actually

create a 404 page using HTML and CSS now

in my last attempt to create this

episode I did actually create a 404 page

so I'm just gonna go ahead and grab it

here as you can see I created a page

that I called not - found - page HTML

and again you can call it whatever you

want it doesn't have to be not found

pierced at HTML it could also be for of

word - page not found that HTML it

doesn't really matter there isn't a

specific name you need to give this page

you just need to give it a name that

makes sense when it comes to a 404 page

so once you created this page you of

course need to style it and do all the

things you need to do in order to create

a basic page inside a website again this

is basic HTML and CSS so we're not going

to do a huge tutorial on how to do this

using HTML and CSS because like I said

it's a pretty pretty easy thing and a

pretty normal thing to do you know using

what we learned so far in this course

here so as you can see this is just a

regular page all I did was I included a

404 page title and a paragraph that says

what you know what do we're looking for

does not exist go back to the front page

by clicking this specific link here and

I can actually do like that there you go

so what I want to do is I want to upload

this website or not this website but

this page to my online website so I have

FileZilla here in case you use FileZilla

you can open I open that up too and what

I'm going to do is I'm going to take

this page that I created and I'm going

to upload it to

my server which is online now what is

going to happen is if I were to go and

try this out so if we were to go here

for slash blah blah blah you can see it

doesn't really access the page and all I

really did was I created a copy of

another page in here and it just simply

said 404 page not found blah blah blah

but we can't see it inside the website

when we try to access it so why is this

well right now we need to tell the

server which our website is is sitting

on that if we were to hit a page that we

do not have access to inside the server

then it needs to redirect the user to a

specific file inside our server so what

I need to do is I need to go inside my

editor my my text editor and create a

new file and I'm going to save it as

punctuation HT access and it's very

important we call it this specific name

and not anything else so it has to be

dot 8t axes and I know that usually when

we have punctuation something it's an

extension we create a file like

index.html or style dot CSS but in this

case it's just going to be punctuation

as the first thing and then htaccess

okay now what an htaccess file is is a

configuration file for your server so as

long as we have a Apache web server on

the internet then we can create an HT

access file in order to make changes to

the server as you try to load the

website so what we can do in here is we

can tell the server that before you run

the website make sure you check for a

not found page or a 404 page to make

sure that if the user were trying to

access any kind of page inside the

website that does not exist then they

should have this page shown to them so

inside this htaccess file we just need

to create one line of code so I'm going

to say we have something called a error

document with a big e and a big deep in

one word and the error document that we

have is going to be a 404 type there we

go then I need to tell the document of

the server where this document is

sitting at that we want to show the user

as soon as they enter the website

in a wrong page so what I can do is I

can say /not - found - page dot HTML and

save it and that's everything needs to

include inside this specific document

you're inside this file here so if we

were to go back inside FileZilla and

load up my HT Access file that I just

saved and insert it inside the main

directory of my website which is the

main directive main directory of the

server then if I were to go back inside

the browser where I have my website go

back refresh and then go into the URL

say Amen to net blah blah blah then you

can see we get this 404 page not found

inside my website so this is how we can

create a 404 page not found in a very

easy way and I know I talked about

something called a configuration file in

this episode which is the htaccess file

which is created don't worry too much

about specifically what we can do with

the htaccess file for now later on I

will have more tutorials on what exact

if you can use this for inside a website

so for now just know that for this

specific function here of creating a 404

page you need to write write one line of

code inside the htaccess file and just

upload it to your server and that's it

so I hope you guys enjoyed I'll see you

next time

[Music]