This course provides a comprehensive guide on how to get a website online, covering website creation using HTML/CSS/JavaScript or WordPress, custom domain registration, hosting options (paid and free via GitHub Pages), DNS configuration, and setting up custom email addresses.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
hi i'm beau carnes with free code camp
in this course i'm going to show you how
to get your own website onto the internet
internet
i'll show you how to create a website
get a custom domain name which is the
url people type in to get to your website
website
host your website
which is where the files for your
website are stored
configure dns settings and set up a
custom email address
if you are just interested in one of
these topics check the description of
this video for links to the individual sections
sections
you may already have files for your
website that you want to put onto the
internet in that case skip to this time
shown on the screen right now or just go
to the next section in the progress bar
of this video
in this section i'm going to go over how
to create a website
i assume you already know what your
website is going to be about
two common ways to create a website are
to create it using html css and
javascript or you can use a content
management system like wordpress
wordpress allows you to create a website
without knowing how to code
the simplest way to create a wordpress
website is to get your hosting first
so in the section of this video about
hosting i'll show you how to install
wordpress right now though i'll show you
how to create a site using html css and javascript
javascript
for this example i'm going to create a
landing page for different programming
courses i've developed
this will be a simple site based on a
template just to get you started if you
want to learn how to make more complex
sites check out the playlist linked to
in the description html css and
javascript are all just text stored in
text files
html describes the structure of your
website and css describes the style and
how it looks
javascript adds additional interactivity
and functionality
while you can create these files in any
text editor it's common to use a source
code editor such as visual studio code
this makes it easier to write html and
css and even javascript or other
programming languages so first let's
download visual studio code
so if we just go to the main website and
download from mac or whatever operating
system you have i won't show the whole
installation process because well i
already have installed
and it's different for each operating
system so let's go right over to visual
studio code
okay we have visual studio code and now
we can create the website so this is
what it looks like when you first start
up visual studio code we could just
click new file and create the new html
file in the new css file
but we're going to do something a little different
different
if you're just starting out it can
sometimes be helpful to start with a
website template
this just means starter code for your
website that you can customize for your needs
needs
this can be an excellent way to learn
you can see html and css that someone
else has created and then you can start
to understand how it works together
there are a bunch of sites offering
templates one of them is templated.co
there are a bunch of templates to choose
from i'm going to choose this one called
full motion because it includes a
responsive video gallery and my page is
supposed to help people watch video
courses i've created
so i'll just click download here
but you can download the other ones if
one of the other ones meets your needs a
little better
so after it's downloaded and unzipped i
can just go to visual studio code click
open folder and then i'll navigate to
and now
we can see everything on the side here
this is the file browser
i can just close this welcome screen
i don't need that anymore
i'm going to open up the index.html
now when you're creating a website the
main file is almost always called
index.html so that's the thing that
you're going to want to edit
we're going to be modifying the html
file in css file you don't need to know
everything to modify a template but you
should know the basics of how html and
css are structured i'm just going to
give you a very brief overview if you
want to learn more about html and css
check the links in the description
so you can see this is an example of a
paragraph tag that's what the p stands
for paragraph
and every html tag is going to have an
opening tag which is this section right
here and a closing tag which is this
final section right here
and in between the tags in between the
the opening paragraph tag and the
closing paragraph tag is where text
would normally be the text in here would
be the paragraph and this opening tag
and then closing tag designates the
beginning of the paragraph and the
ending of the paragraph and you can see
in the opening tag there's an id
this id is an attribute and the
attribute of id is set to
my id
now the id is often used to identify a
certain tag or a certain section of your website
website
for use in the css and the javascript
so inside an opening tag there can be
all sorts of different attributes and
you'll see some other examples when i go
to the other code so let's look at this
diagram this shows how an html page is
structured you can see there's branching
sections almost like a tree it's a tree
structure so we have our overall
document and then we have our root
element which is the html element so
you'll have an htm an opening html tag
and a closing html tag
and then everything will be inside that
tag so you'll have a head section a
opening head tag and a closing head tag
and inside the head section there'll be
a title with some text and then there'll
be a body section with a opening body
tag and a closing body tag and then
within the body there's going to be the
different components that are going to
make up the body of the website
everything nests inside other elements
you'll see more of what i mean once we
get to the code also you're going to
need to know about css so css is used to
style the html so in this case we have
the body selector
so this first board is the selector and
this is going to style everything within
the body html tag
and in this case it's going to set the
color to this hex value
so css
is always going to have a selector the
most common things to select are tags
like a body tag or an id
or a class you can add a specific class
any html tag and then you can style in
the html section that has that class
i'll show you some examples when we get
to the actual code so let's go to the
code so every html file is going to
start with this
this is just saying that this is an html file
file
so here you can see the html tag
and at the very end we have the closing
html tag
and you can see there's a line here that
connects in
everything is indented so within this
html tag there is a head section
you can see the opening head tag and the
closing head tag and within the head
section we have a title section
and we have these metas
and then we have a link here
so you can see that within the heading
of the page the main thing we have is
the title
right now it's called full motion
so let's change that i'm going to change
that to courses
courses
from beau carnes
so this title will show up at the very
top of the browser window often in the tabs
tabs
if you have it open up to a specific tab
that's where this title will show up
so we have these meta tags which i'm
just going to skip over for now because
they're not super important to what i'm
talking about now
but this next line is important
this is how the html file is linked to
the css file so you can see that
this is href the reference of the css
file is this is this thing here assets
css slash main.css
so let's go over to this in the file
browser under assets css and then main.css
main.css
that's this file right here
so this line is connecting our html file
to the css file
now let's look at this next section this
body section oh yeah you can see some of
this is grayed out that's because this
is a comment
so comments can be used to put something
in your html file that's not going to
appear on your final page
or it's not going to be read by the
browser so this section this whole next
section you can see the body tag starts
here and goes all the way down to here
the rest of the page is basically the body
body
or what's going to be shown in the
browser when someone goes to your website
website
it starts with this top section and this
top section has an id of banner and this
it says
data dash video equals images banner
these things can be both referenced from
the css
and from the javascript
and it's going to use javascript to play
a video in the top banner actually let's
look at that right now let's go over to
the website
this is what the website looks like you
can see it has the title the page here
this is not the same title that we just
changed the name of we're going to
change that in a second you can see this
video plays in the background and if you
scroll down well you don't even need to
scroll down if you click this button it
scrolls down automatically and you can
see these different boxes here and if we
click watch it will open up and it will
have a youtube video
so we're going to update this so it goes
to my youtube videos
if we just scroll down we can see the
if you look at this text it's not
english this is latin it's common to use
latin text or lorem ipsum text as
placeholder text
on templates and any websites where you
don't know what the text is going to be
yet but we'll be updating that as we
update the template so let's go back
over here
one very common tag in html is a div tag
and that just means a divider or some
special section that you're going to
style in a specific way with the css you
can see this has a class of inner and
the css is going to be used to style
anything that has a class of inner in a
special way so let's go into this header
section right here i'm going to change
this to courses
from beau carnes
and this time if i save this
and i go back to the page i'm going to
refresh and i'll go to the top and you
can see courses from beau carnes
so this is what i'm talking about you
can change a template and it's a lot
easier than just writing everything from scratch
scratch
let's go back to our code
you can see this is an h1 tag that means
heading one or the top heading
there's also h2 h3 as4 there's just
different levels of heading and here's a
paragraph tag
i'll close this so we can see more of it here
here
and so this is the opening paragraph tag
if we go over we can see the closing
and i'm going to update this whole
paragraph between the opening tag and
the ending tag with an all new paragraph
i'm just going to paste it in
and so now it refers to what this new
page is going to be about
so i'll just save that and go back to
the page
and refresh and you can see it now has
the new paragraph here
okay let's go back to the code
we can change this learn more or we can
change it to something else now you can
see this is an a tag or an anchor tag
that's a link now you can use it to link
to another page or you can link to
another part of the same page so here
you could add a link to another page
like i could put free codecamp.org here
and then when you clicked on it it would
open up freecodcamp.org
but since it says this half shine or
pound sign main
it's going to make it so it goes
directly to the main section here which
is right here it's going to a
dividing section or a div that has an id
of main
so that's another
way the ids are used so you can actually
go to specific sections on your page so
when you click learn more it's going to
scroll down to this section here you can
see that we have this div which divides
this section of the page that's the main
section that we scroll to
and then we have another class called
enter so this is probably something
that's going to be used in the css file
to style a specific section of the page
and then we have another section called thumbnails
thumbnails
so one thing that's kind of nice with
visual studio code and with any code
editor is these lines that come under a
tag this will show where the ending tag
is so this is the beginning tag if you
click on it you can see this line is a
little lighter so if we go all the way down
down
it goes to here so here's the end of the
tag here
and so that's going to show this whole
section this whole um this whole
thumbnail section so the thumbnail
section starts here and it goes to here
where the closing div tag is so in this
thumbnail section you can see there's a
bunch of box sections so this is one
whole box section right here but there's
another box section here and then
there's another box section here so
there's a box for each thumbnail that's
right in the page here so here this is
what we're going to change one thing you
can see here is that it's getting it's
linking to a youtube
video right here so the a href this is
the anchor tag or what you're linking to
and the link is
is
surrounding an image
so when it says img that's an image src
is source and the source is this section
right here the images slash pic01.jpg
so if we actually go over to here in the
file browser we should be able to find
that oh here it is
the pic001 so you can see that that's
the same thing that you see right here
so that's what we're going to have to recreate
recreate
with my own videos
you can also change the title so we see
the h3 now h1 is a main heading h3 is
like a level three heading so you can
level one heading level two heading
level three heading and we have a
paragraph here so let's update this with
one of my videos so i'm just gonna go
and grab it from youtube here so just go
to youtube.com
and i'll actually go right to youtube.com
youtube.com freecodecamp
freecodecamp
i'm just going to get this javascript
one this is the my most popular video
that i've created so i'll do copy link address
address
and i can go back over here
and we'll paste this in here
so now
oh i just have to delete the time at the end
end
and now we are going to
get the image here now i could find the
image and then put it right into this
directory here and then then link to
that image but i'm going to try a
different method there's actually a url
a direct url to each youtube thumbnail
so i can put a actual file name here or
i can put a url so i'm going to put a ur
url here now it says there's actually
a section to update with the video id so
i just have to get the video id from
right here
i'm going to copy it and then i'm going
to go over here
and i will paste it
now if i save this and then i go back to
my website
now i'm gonna refresh it
okay so now we have the
javascript in three hours here and if i
click here hmm
hmm
i was expecting the video to pop up
so let's go back and troubleshoot
because that's just a little
okay i noticed that
these ones have the short url and then i
use the long url here so i'm just going
to copy this little section and then put
into here so we're using the short
youtube url instead the long url so let
me save that
okay and now the youtube video pops up
and if i play
yep it works so
so
now i'm going to go back here and i have
to update the rest of the stuff so this
url i'm going to update for the button
so this first link is just the image and
now there's the button here so we need
the link for the button and
and
i can update the title javascript
full javascript
javascript course
course
and then here
looks good
okay now i'm going to do the same thing
for some of these other ones
okay i just finished updating all these other
other
boxes with other videos i've created
here's the mernstep course
i've got data structures and algorithms
in javascript css full course
basically i just went through and
updated the url here and then copied and
used the same url here
and then over here i just uploaded
updated the image link
and then i just added
this heading and the paragraph here
so that's one great thing about using a template
template
is that it just makes things go a lot
quicker instead of writing everything
from scratch you can just update things
to meet your needs so if we just go over to
to the
the page
page
you can see now it says courses from
beau carnes always create many popular
programming courses now you can access
this top courses all in one place click
this goes down
and then if you click on any of these
courses let's say the mern stack one
click watch you can watch it right in
the browser right here
or you can just click this picture here
to open the same thing
so that's pretty cool let's see if
there's anything else you want to change
so your stuff down here
and i'll go back over to the
code so we have the
the
so that's what you see right here this
whole section is the footer section
so not only is there a tag called footer
and then we have the closing tag down
here we also have the id of footer
so a lot of things in html just dividing
up things into sections so we have the
footer section and then a div can
basically be any section so what we're
dividing up into this intersection which
we can style with the css
so when you have a template you can
either update the text to be what you
want or if you don't want that section
you just can delete it
i'm just going to delete these two
sections so if i go over here and
refresh now it's just going to have the
social media links at the end
again i don't want all of the social
media links
you can see
the social media links are in a
list so ul means unordered list
and it has the class of icons
and so we have four list elements li the
list elements in the list you can see
there's the opening tag and then at the
end there's going to be the closing tag
here and same with the ul and the
closing ul list and you see these are
just a link that you click on and you
can see the class of the
fa twitter f8s facebook fa
instagram this class
here is how the is where the image is
coming from this is something fa stands
for font awesome and it's something that
you can
put into your website so you can use
different classes to make a specific
image pop up there and i'll show you
when i go to talk about the css file how
this is how this works how we get
awesome into our website so it works
so i'm going i only want to have the
twitter and the email so i'm going to
delete these two lines the facebook and
the instagram one
and then i have to make these links work
right now
see the href this is where the url that
we're linking to and if it's just this
pound sign here that means it's just a
it links to itself so when you click the
link it does nothing but i want it to do
something so i'm just going to put hd
and then i'll go into this one and do
a mailto bow
bow
at free code camp.org
so you can either put a full url to go
to or if you put the
word mail to colon and you put an email
address it will open up if you click
that link it will open up sending an
email to that person so let's save it
and go back over to the page
and refresh
so if i click the twitter icon
yup it opens up my twitter
and then if i click the
mail icon it will open up sending a new
email to me okay let's make some more
changes by updating the css file but
first i'll talk about these scripts
so most of these are common javascript
libraries which is just javascript code
that someone else wrote that you can use
on your page to add extra functionality
so that we have jquery jquery.scrollingjquery.poptrox
jquery.scrollingjquery.poptrox
and that's going to add different
functionality on the page
and then
the main the code the custom code is
toward the end we have the util.js and
the main.js
and we can look at that right in the
page here
so here's our
utility one and here's our main one
and we're not going to talk a lot about
the javascript in this video but
basically the javascript helps make it
work where when you click this it
scrolls down like that that's javascript
when you click this it pops up it fades
in the background and pops up that
window that's javascript doing that so
javascript can just add some extra
functionality to your page and that's
what's happening here
okay let's go to the css file the
main.css file
so you can import
just like how in your html file you can import
import
cs the css you're going to use in your
html you can import other css to use in
your css file so we can see import font
font awesome.min.css
awesome.min.css
now it's getting that right from you can
see right here in our assets
awesome.min.css so that's what this is
and it's importing that css so we can
use that also and then it's also going
to import and then it's this url so here
it's importing a file but here it's
actually just importing a url
so this url that's being imported you
can see it says fonts it says google
this is google fonts google has made
available a bunch of different fonts
that people can easily use on their
websites by
importing the font through google fonts
and you can see it's
the font source stands pro at the weight
300 400 and then we have this passion
one font at the weight 400. now i want
to show you something here where it says
awesome.min.css if you looked when it
opened the awesome file this css file
looks very different than the other
main.css file we were looking at because
this has been minimized basically it
goes through a automated process when
you minimize a file goes through an
automated process to make it as small as
possible and so it takes up less space
when someone's trying to download that
file it's not as easy to read but it's
easier for users to download that file
and it still works just like any other
css file
so if we go if we look at this basic css
we're just going to like briefly cover this
this
but it starts with a reset
so this is something that people often
will include in their css to make sure
all different browsers look kind of
similar so you know there's a lot of
different browsers that people can be
using to access your website there's
certain uh
css properties and code you can put in
that's going to make all browsers
look very similar and it's also going to
just make things look a little nicer
than the default css so that's what we
have in this reset
so it's just going to always apply this reset
reset
and then
we're going to the basic this is the
stuff that's being added specifically
for this website so now we're to the
other sections and these other sections
are stuff that's specifically for this
website to to make it look special to
make it look how we want to look so you
can see the basic um
way that css works is that well let's
look at let's look at this as an example
so this is the selector this is the
property in this the value so we're
selecting the body tag we're changing
the color to this white color so you can
see rgba that's just one way to specify
a white that's 0.75 opacity and the font
family is going to be source sans pro
which remember was imported from google
fonts and if that's not available it
will just use a sans serif font the font
size is going to be 14 points font
weighs to be 300 points and the line
height is 1.65
now with css how it works is
whatever is the most specific is what
style applies to the element so for
instance we see the body here if we go
over to the html we can see the body is
here so almost everything is inside this
body but if we styled say
the inner class and we had styles that
specifically reference this inner class
that's going to override anything that
applies to the body so
so
a lot of these styles here are never
going to be used if there's something
more specific so let's scroll down to
some of the other things that are being styled
okay let's look at this we have h1
8 h2h3h4h5h6 these are the headings so
the color this is another white color
there's a lot of ways to specify the
color and this is one of them font
weight line height and the margin so if
we change this color to something
different we'll probably be able to see
it right on our page so instead of
putting a hex value or something i'm
just going to type in the word green
that's another way you can specify
colors in css now go right over here if
i refresh we should see something turn
to green
and you can see these words have not now
all turned to green so
so
let's go back and make this white again
so another thing i want to show you is
this whole section right here where it
says media and screen max width 1680
pixels median screen max with 1280
pixels and then you see 980 pixels 736
pixels 480 pixels
this is how to make
your web page responsive so
so
the it's
so this css is going to specify
a different style depending on how wide
the screen is
okay to see how these media queries work
let's look at this other code this is for
for
the thumbnails and the box
so in the css we're selecting the
thumbnails class and then we're
selecting the box class that's inside
the thumbnails class so if we go back
over here
we have
the thumbnails class classical
thumbnails and then we have the box
class that's inside the thumbnails class
so this is going to impact everything
that's inside the box class which is
this code right here
so this code is going to change and you
can see it's going to change depending
on the width of the screen
it's going to either be
the width of 30 percent 45 percent or
100 percent
so if we go back over to our page
and then if i change
the size you can see
these boxes that show the thumbnails
they're changing depending on how wide my
my
browser is so if it's really narrow it
just shows one the column then it goes
up to two then it goes up to three and
that's all from these media queries
they're changing them this is changing
the width depending on the size of the screen
screen
okay well let's
make this bigger again and let's look at
the things we want to change so when
you're changing something based on a template
template
you want to just try to find something
you want to change and then try to
figure out how to change it so i want to
change this
dark color around here i want this to be
a different color so i have to figure
out which css is is selecting this dark
element around here
so one way you can do it is just through
trial and error trying to figure out
what you need to change to change this
background color so if i go back to my
code i'm going to just search i do
command f or control f and i'm going to
search for background
and i can see that this looks very
similar to that color so i'm going to
try changing this to another one so with
this i can type in the name of a color
or a hex code or i can just use this
color pick here here that's in visual
studio code so i want to make more of a
greener color
and now i'm going to save this i'll go
back to my page i'll refresh
and now
it worked
so i chose the right thing
you know i think i want that maybe to be
a little more of a dark green well
that's easy i can go back over here
and then i can
make this a little darker
okay oh that looks nice now since this
is green i kind of want this text or
maybe some green to appear right up here
somewhere or how about this maybe this
circle let's see if i can get this
circle to be green so one way to try to
figure out what you need to change is to
right click on something and then go to
inspect element
so this is bringing up the element in
the html just in the inspector on the browser
browser
and so it looks like this could be the
the right one and i can actually test it
by changing the css right in here so i'm
actually going to try changing this
right here to instead of
white let's see if i change the screen
if that will
change anything
and did so you can see right on the page
as i change it in the inspector it
changes it
on here so i so now i know that i'm
looking for something that's styling
this banner more see how it says banner
more this is the selector that i'm
looking for in my css
so if i go back over to here and i just
had just copied it over in my browser
i'm going to find and then paste banner
more so now i can change this border if
i want to change that circle well how
about this i'm going to make this bigger
and i'm going to
change this to a green color so we'll
kind of match the other green that i
have going
now since this is just an example
i'm not going to be like super exact but
i could try to make it the exact same
green or i could look at a color wheel
to try to figure out what's the
complementary color to the the different
colors but for now i'll just choose that
green and i'll go back over if i refresh now
now
circle well you know maybe i will try to
get the exact green because i wonder if
it would match how that would look so
let me go back over here i'm going to go
back up to my body
here we go
and now i will do my search again to
come back down to here
and i'm going to just
add this new color
okay nice
one thing is see when you hover over it
it gets white i want it to be a maybe a
lighter green so let me go back over here
here
and let me try to find the hover section
so here you can see um well let me so
where it says banner more and we change
it to the border to be green well here's
banner more hover
that's what the style is going to be
when someone's hovering their mouse over
it now like nor we'll just keep all the
same style as the original one but it
will add these changes
so i'm gonna change this border well i
want i still want to be a two pixel when
you're hovering over
and now i want to change the color i'm
going to change this to a lighter green
and maybe add some more blue into it
and let's see what that looks like i'll
and that didn't seem to
well i guess it did change it oh yeah
now it gets lighter green that's kind of nice
yeah i like that
so we can do the same thing by changing
different fonts different colors
just trying to figure out which css
needs to change to change something
okay the final thing i want to do is
change the text color here
so i'm going to go to inspect element and
and
we can see oh it's
color white banner h1 now let's just
check make sure this is the right one so
if i change this if i just type in blue
yeah it changes to blue so
so
let's change this to a green color i'm
going to just copy this here
the the css selector and then i'll just
search for the css selector here
and here it is so now instead of being white
i'm going to change this to a green
color again but this is going to be a
lighter green than before so let's see
okay you know what i want to be the
exact color that this circle
becomes when you hover over it to get
that color i can either go back into the
css file or i can just
inspect this element again and
and
let's see i can turn on the hover state by
by
clicking the hover here now i can get
the color from right here
and it's just going to copy this color here
okay so now i'm just going to paste in
and i'll save that i'll go back over i'll
i'll
okay that's going to be it for now i
know this design could be a little
better but i'm going to count this good
for now because i want to get on to the
next part of this course which is
purchasing a domain name
so let me make sure everything's saved
yep all my files are saved because i'm
going to copy these files over
actually let me quickly delete these
because i'm not going to need any of
these pictures
because i'm not using those same pictures
pictures
but we'll i'll just keep everything else
here and we're going to be copying these
files over to our hosting provider once
we get that but right now we're going to
so now you have the files for your
website or you're going to install wordpress
wordpress
now i'll show you how to get a custom domain
domain
this is what people type into the
address bar on their web browser to
access your website
some examples are youtube.com
freecodcamp.org or ces.tech
these are all custom domains the end of
the website name such as dot com dot org
or dot net is called the top level
domain or sometimes people just call it
the domain ending
while dot com is by far the most popular
domain ending
there are actually hundreds of other endings
endings
take a look at all of these on the
screen right now
one ending that is increasingly popular
for people in the tech industry is dot
tech and this video was made possible
through a grant by the company who runs
the dot tech domain when you are
deciding what you want your domain to be
you also have to decide what domain
ending you want
here are a few reasons you may want to
consider less common domain ending
more availability the less common
endings have not been around as long so
there are way more of them still available
available
it's very hard to find a dot-com name
that has not already been taken unique
unique
these newer domain endings may help you
stand out as being unique which can also
help create more of a lasting impression
seo using a new domain ending won't hurt
your search presence or seo it's worth
noting that in the eyes of google and
other search engines all tlds or these
domain endings are equal so if you get a
highly searched for name in your url it
can be helpful for seo
there are a bunch of places where you
can buy domain name and they all work
almost exactly the same here are some options
options godaddy.com
godaddy.com domains.google
domains.google namecheap.com
namecheap.com get.tech
get.tech
i'm going to demonstrate how to purchase
a domain name on git dot tech since
we're getting a dot tech domain
but just know the process is similar no
matter where you buy your domain name
here it makes it really easy you just
type in the domain you want so i'm going
okay bodetech is unavailable
now most likely the first domain you try
is going to be unavailable so it gives
some other examples
but the other examples are almost never
what you're looking for so it's good to
have the other options in mind
since this website is all about teaching
tech i'm going to try both teachers.tech
okay it's available
and i can buy for one year so i'll
choose that
i'm not going to show you the whole
purchase process but i do want to point
out that this privacy protection
it says recommended and i would also
recommend this
if you don't have privacy protection on
your domain name then the records of
your name and address will be out there
for anybody to see your name your
address your email address so if you
don't get privacy protection you're
going to start getting spam because
there's companies out there that are
constantly checking for all new domains
registered to see if there's any real
addresses or email addresses
and then they're gonna start sending you
stuff to advertise because they think
you'll be interested in buying things
for your new domain so definitely get
privacy protection
okay i'm just gonna place this order
now we're finished buying the domain
and to edit the domain we'll just go
into manage orders and then find the
and this is our control panel
i'll get that a little bigger
and then we can update things in this
control panel to make our website work
but before we can update anything in
this control panel we have to get hosting
so now that you have your domain name
you have to store your file somewhere
when you go to any website on the
internet your browser has to download
the files for that website from a
physical location somewhere else in the world
world
a company that stores website files so
that they are always available when
someone goes to the url is called a
hosting provider
there are many hosting providers out
there that will host files for your website
website
some places will even host your website
for free
in this section i'll mainly be talking
about hosting a static website or a
wordpress site
if you have a dynamic web application
that has to run server-side code before
sending web pages to the client then the
setup will be a little more complicated
than what i described here
first i'll talk about how to get things
set up on most paid hosting providers
and then i'll show you how you can host
your website for free on github pages
here are some of the common hosting
providers for web pages
bluehost hostgator hostinger
godaddy dreamhost
almost all hosting providers have
something in common which is this
users manage the hosting service through
a web application called cpanel or
something very similar to cpanel
so if you learn the basics of cpanel
then it will be simple to use any
hosting provider
so all the hosting providers are very
similar so matter which one you sign up
for the steps should be basically the same
same
first of all i would recommend just
picking the cheapest possible hosting plan
plan
whatever hosting provider you use just
pick the cheapest plan you can always
upgrade later if you need to
often the cheapest plan will work and
you can always upgrade later if you
somehow need more space or need more bandwidth
bandwidth
make sure you choose that you already
own this domain because you we've
already purchased the domain
and the rest of this is pretty straightforward
straightforward
okay i got my hosting and now i'm just
going to launch the cpanel
the exact way to get into cpanel could
be different depending on your hosting
provider but it should all be pretty
similar and again your hosting provider
may not have cpanel but it will
definitely have something similar
there's no single look for the cpanel
dashboard because there are many themes
and styles that host can use but the
functionality is similar
so one of the things you're most likely
going to be using is the file manager
the two main ways of getting files into
your hosting provider is the file manager
manager
or through an ftp account
so let's look at the file manager
so the files we see here are the files
that the hosting provider just puts
there by default
we're going to go to the public html section
section
and this is where we're going to add the files
files
so that's one thing you're going to have
to look into when you are trying to
upload your files to your hosting
provider you're going to have to make
sure you upload them to the right directory
directory
it may not be the root directory it's
probably going to be something like this
the public html directory
and so those are the files that will
appear when people go to your website
i'm going to delete everything in here
because i don't actually need anything
now i'll go to upload
and i cannot upload directories but
there is a trick to be able to upload
everything at once which is to create a
zip file
so let me select all my files
and then i'll just go to compress
and it could be different on windows but
it's gonna be pretty similar how you're
gonna be able to find something to make
them into a zip file so i'm just going
to upload the zip file
so this includes all the assets and all
the images and even the background video
so it could take a little bit to upload
okay i'm going to go back here
and this is just an extra directory that
i can delete
okay i have my website uploaded to the
hosting provider we still have to
connect the hosting provider to the
domain name
and we'll do that in a little bit
for now i'm just going to close this
and let's look at some of the other
things you can do
with cpanel
so we could have uploaded the files through
through ftp
ftp
here we can create an ftp account
if you have an ftp client like filezilla
you can ftp into this and you can easily
upload files
another thing we can do is create a
subdomain let's say we create one called blog
blog
so now it's going to be blog.teachers.tech
the way i get files into that subdomain is
is
it should show up right in my file
manager so if i go back into the file
manager now you can see there's a new
folder it's called blog.bowteaches.tech
anything i put into this folder will now
appear at the subdomain once i connect
my hosting to the domain name
so the two other things i want to show
you are the email accounts and the
wordpress installer
there are a bunch of other things on
here that you can mess around and
continue learning but i'm just going to
cover these other two for now
so right here you can create an email
account we can also create an email
account on the dot tech admin page which
i'll show you that in a second again
later let's say we want bo at bowteaches.tech
bowteaches.tech
and we create a password
okay i can set up the mail client
now this is just going to give you
different ways to set up the client
depending on which method you want to use
use
i'm not going to go through every one
but depending on what you want to do you
just set it up differently
okay the final thing is the wordpress
installer so i was saying it's very
simple to install wordpress once you
have your hosting just click on
wordpress installer and then click on
install now
and then that's pretty much it once you
install wordpress you can now use
wordpress right on your site
and you can watch any wordpress tutorial
to learn how to use wordpress i'm not
going to install wordpress right now
because i'm going to use the other files
that i already uploaded onto there so
what i'm going to do now is just go back
and now i'm going to connect the hosting
provider to the domain name
and to do that we're going to scroll
down until you see the name servers
now no matter what company you use to
create your domain name
and no matter what hosting provider you use
use
you're almost always going to connect
these two together with these name servers
servers
so i'm going to copy this name server
and then go back over to the control
panel for the dot tech domain
and then you can see there's a name servers
servers
manage name servers that use this domain
name so i'll click that
and then i'm just going to paste in the
first name server and then i'll get the
second name server
and then i'll paste in the second name server
server
we'll put it here
and you don't really need to have every
name server filled in so i'm just going
to go through and delete these other two
now
everything really should be set up for
my website to work
sometimes it can take up to 24 hours for
everything to update
so you may have to wait up to 24 hours
before you can actually see your website live
live
okay i waited some time and
the name servers have been able to
propagate throughout the internet and
now the website works
so i go to bowteachers.tech
and it loads
so you can see this if i click here it
should open up
yep it opens up a video to watch here
okay everything's working i can now
once you know how it's actually pretty
simple to set up a website to host for
free at github pages
the first step is to create a github
account and log into your account
and then you just need to create a new repository
repository
the name of the repository is very important
important
so for the name of the repository you
have to type in your username your
github account name
and then you just type in github.io
github.io bo
bo fcc.github.io
fcc.github.io
this is going to create a repository
that will be a special type of
repository that will be able to host our
website on github pages
okay now i'm just going to create a repository
okay now that we create the repository
we can you can either
upload your files using the command line
or you can do it right through the web
interface so i'll just click upload an
and i'm just going to drag and drop the files
files
so let me grab these files here
and just bring it over here
now it's just going to upload all the
okay all the files are
uploaded and i'll just do commit changes
after the files are done processing
i can go to this url just copy it right here
here
and i'll open up a new tab i'll paste in
the url and
and
okay it takes a few minutes for the
updates to show up so if we just wait a
little bit and then try refreshing it
should work
it can take up to 20 minutes for the
changes you create on github to show up
on the github pages but it's now loading
you can see in the address bar bofcc.github
bofcc.github
and we can see our page
now we just need to make this show up at bowteachers.tech
bowteachers.tech
before i make this show up at our custom
url let me show you how easy it is to
make changes to the page
on github
so you can always change it on your
local computer and then upload it again
or use the github interface or you can
change it right on
this github interface you can change the
html right on here
so in order to edit this i'm going to
click the pencil icon for edit this file
and then i'm just going to update the
title here instead of courses from beau carnes
carnes
i'm going to call this programming
programming
courses from beau carnes
and then i can just scroll down to the bottom
bottom
and you can put a commit message you can
put a commit message but i'll just leave
this as the default for now
and just click commit changes
now again it's going to take
possibly up to 15 minutes to show up on here
here
but while we're waiting i will show you
how to make this
work with your custom url
and then if we do this right we'll be
able to know that we're not getting it
from our hosting provider because this
will change so here's bo teaches.tech currently
currently
and you can see it says courses from
beau carnes and this is coming right
from our hosting provider that we set up before
before
but now we're switching it to use github
pages for the hosting provider so after
we update this this will say programming
courses from beau carnes to reflect the
change that was just made on github so
the first step is to go back into github
and i'm going to click on settings
if i scroll all the way toward the
bottom of the settings
i can put in a custom domain custom
domains allow you to serve your site
from a domain other than both
fcc.github.io so i'll put
bo teaches dot tech
and then i'll save it
so now that we updated the github
settings i'm gonna have to go back to
our domain dashboard
so this is at the tech control panel or dashboard
dashboard
and to make this work with github pages
i'm going to have to go to dns
management no matter what company you
purchase your domain from there's going
to be some way to update the dns
settings of your domain so i'm going to
and i'm going to update some things the
first thing i'm going to update is the
cname record so the cname is like an
alias or it's a way to forward to a
different domain
so i'm going to
add a cname record and for the host name
i'll put www so when you go to www.bowties.tech
www.bowties.tech
we're going to forward to bofcc.github.io
and then i'll just add this record so so now
now
www.bow.teaches.tech will go there i
also want to set it up so just bo
teaches.tech without the www will also
go to the github pages page so to make
that work i'm going to add an a record
so i will put nothing here
and then for this destination address
i'm going to put an ip address that
comes right from github so it's going to
three
okay
that should be all set so i'm gonna
close this for now
so before i updated the name servers to
work with the hosting provider
but now that i'm using github pages and
i updated the dns settings i don't need
the name servers i used previously
so to make these new dns settings work
i'm going to have to
default the name servers back to what
they were it says right here required to
use our dns management service with your
domain name so it says we need i need to
go back to the default name servers
so i'm going to copy this
i'll go up
and then i'm going to change this to
venus because that was the second one
and as long as you have two that should
work so i'm going to update the name servers
servers
and now anytime you update the name
servers you could have to wait up to 24
hours so i'm going to have to wait and
then i'll i will check the website to
see if it updates to use the page github
pages instead of the hosting provider we
had before
so it's been over 24 hours and and check
this out i'm at bo teaches.tech and it
says programming courses from beau carnes
carnes
so i'm now loading the page right from
github pages
and now whenever i want to update the
page i just update the files on the
github repo and then within 15 minutes
or so the changes will reflect right on
the actual domain right on the page both teachers.tech
teachers.tech
so now you know how to set up a website
with github pages
so now you've learned how to create a
simple website get a custom domain
and host the website through various methods
methods
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
