hey guys what's going on it's clever
techie and in this video we're going to
create a website in pure HTML using just
the notepad and this is what our final
website is going to look like as you can
see we'll have articles a list of habits
skills that I think are important in
life some of the best quotes books that
I'm reading along with my reviews and
this website serves two purposes the
first is to introduce HTML to people who
aren't familiar with it and the second
reason is to show that using just HTML
it's possible to create a website and to
share some of your most important
information with other people and I'm
also gonna be using this as a starting
platform for my new project called life
craft which will be a website and a
YouTube channel on personal development
and as this website grows I might need
to use other technologies I might need
to add more features to it and I'm gonna
be creating videos like this adding
these features to my website and showing
you exactly how I do it alright so let's
go ahead and get started first thing I'm
gonna do is create a new folder and I'm
just gonna name this folder HTML website
let's go ahead and create a new text
file and name it index dot HTML make
sure the extension is dot HTML yes then
I'm gonna right click on the index that
HTML file and hit edit and now we're
ready to start coding our HTML alright
so the first thing that we do is to
define the doctype and we do this like
this doctype HTML this is to indicate
that we're gonna be using html5 for our
website and the browser is going to be
interpreting our code as html5 the HTML
code is made up of HTML tags and the
tags have an opening and a closing tag
so first what we're gonna do is define a
basic HTML template and the basic HTML
template consists of a head tag so we're
gonna open a head tech and then close a
head tag with a backslash and then the
name of the tag so this is the opening
tag and this is the closing tag and in
between we have the content so inside of
the head tag we're gonna put our title
which is gonna be the title of our
website we're gonna open and close the
title tag and then put in the title of
the website which is going to be a
lifecraft mastery of life next we're
gonna open the body tag close the body
tag so inside the body tag is where all
of our main content is going to go and
at this point our basic HTML layout is
ready so let's go ahead and see what
this looks like in a browser so I'm
gonna go ahead and minimize this I'm
gonna go to open with and open this with
Firefox developer edition so this is our
website so far it's a blank page but as
you can see here we have a title
lifecraft
the mastery of life and if we go to view
page source we can view the actual HTML
code that we have just written okay so
let's go ahead and continue working on
our website by returning to the
index.html in notepad first we're gonna
go ahead and create the header and this
is the new tag in
EML five that lets us define sections of
the website so inside of the header tag
we're gonna put our logo that will
create later then we're gonna separate
this with a horizontal line which is an
HR tag and then we're gonna use the nav
tag and that's where we're going to be
placing our navigation bars so now is
short for navigation bar and let's now
go ahead and create our navigation menu
and we're just gonna create our
navigation menu with a table tag so
table table row table cell and then
we're gonna close our first table cell
and we're gonna close the table row so
here since we're creating a horizontal
navigation bar we just need one table
row and we're gonna be using multiple
table cells because every link is gonna
be an image in its own individual table
cell and we're gonna have one two three
four five six links so six individual
table cells for every link and if we
create the table border by saying border
equals one you can actually see what our
table looks like so far by refreshing by
refreshing the index page as you can see
we now have six table cells but it looks
really tiny because we haven't added any
content inside of our table cells yet so
let's go ahead and add the content now
so the first link is going to be home to
link back to our home page articles
have its skills quotes and final one is
books so let's refresh the page and now
you can see that we have all these table
cells and the text within them and they
are lined up horizontally so now let's
go ahead and remove the border and add
cell spacing equals five and cell
padding equals five and now you can see
that we have nice spacing between our
text and now we can go ahead and create
the links linking to all these pages now
before we add the actual links let's go
ahead and create the pages first so and
for that let's go ahead and copy the
whole code that we have written so far
and now let's create all the pages in
the same exact way that we created index
that HTML page so a new text file
articles that HTML new text document
habits the HTML new text document skills
that HTML new text document quotes that
H holds that HTML and the final one is
books that HTML okay so let's go ahead
and first open the articles HTML by
double clicking on it or you can
right-click on it and go to edit and
then right click anywhere in the
document and select paste to paste the
code then save the file and do the same
thing for the rest of the articles books
save habbits save index we already have
the code here quotes and skills so now
we have the exact same template in all
of these files so now that we've created
all these pages we can create the links
in our navigation menu linking to them
and for that we're gonna be using the a
tag with an H ref attribute and then the
href is going to point to the actual
page on our computer hard drive so the
first one is index.html H ref and since
all of our files are in the same folder
all we have to do is just create a link
or link into the file name so we're
gonna do exactly the same thing for the
rest of the pages habits that HTML 4
habits link skills the HTML
a Trev equals Colts the HTML and H ref
equals box that HTML and also let's not
forget to close the a tag after the text
that we're using to link so that the
text is wrapped up in a link close the
tag for the rest of our links okay so
we're done with our links let's refresh
the page and you can see that the text
is now underlined indicating that the
text is a hyperlink so we can go ahead
and test this out by clicking on each
individual link and then go back so
because we haven't added the links in
our other pages you can see that the
links disappear when we click on one of
these pages so let's go ahead and copy
this code and then paste it inside of
the articles and for the title let's
actually go ahead and change it to
articles and save this then open up
books
paste the code change the title to books
habits do the same thing change the
title to habits save the file
quotes and skills
all right so let's go back to our page
refresh click on articles and you can
see that for the title we now have
articles habits skills quotes and books
so that is how you create a navigation
bar with all the different titles
linking to the different pages that we
have on our webpage now before coding
any more HTML let's go ahead and create
the logo and for that we're just gonna
be using paint to create the logo it's
gonna be very simple gonna select this
heart shapes here and let's go ahead and
add some color
and the heart itself let's make it nice
pink color then select the text tool go
select the blue color and then for the
font I have the baldy and and the font
size is 36 so I'm just gonna type
lifecraft and then go go back to the
home select the the fill tool actually
let's select the color picker click on
the pink color here and then can use
this fill tool to paint the text pink
then I'm going to select the rectangular
selection move this text a little bit
closer to the heart shape and then
select the whole thing
so it doesn't have extra spacing and
then click on the crop then let's go
ahead and click on resize and resize it
to 50% because otherwise the logo is
gonna be too big and then go to file
save as JPEG and then make sure you save
the file in the same folder where we
have created our HTML files and I'm just
gonna name it logo so the file is gonna
be a logo that jpg click on save okay so
now let's go ahead and add the logo to
our web page let's first add it to our
home page and we're gonna be adding it
inside of the header tag and to insert
the image we use an HTML tag called
IMG and an attribute SRC to let the
browser know the location of our image
so our images inside the same folder so
can just say logo jpg and that's all we
have to do to add the image let's
refresh the page and now we have a logo
now we can also go ahead and add an alt
tag and the alt tag will show up if the
image is not found so if I so if I
rename the image to logo 2 which doesn't
exist and then refresh the page
lifecraft alt text is now shown up here
and let's go ahead and rename it back to
logo refresh the page we can also add
the title tag and this is the text that
will show up when the user Mouse's over
the image
save the file
refresh the page we roll the mouse over
the image and now we have lifecraft
- master your life and the last thing
we're gonna do is just add the link back
to our homepage when the user clicks on
the logo and for that we're just gonna
use the same a tag with an href
attribute equals index let HTML to link
back to the homepage and then close the
a tag at the end of the image now let's
go ahead and copy and paste the logo to
all the other pages I'm gonna save this
file paste it inside the header of the
articles page books and all the other
pages as well
quotes skills and now we should have
logo on every page so let's refresh the
homepage go to articles habits skills
quotes and books so now all the pages
look the same with a logo and the
navigation bar which is exactly what we
want at this point and now we're gonna
go ahead and add some more content to
all the individual pages and we're gonna
start with our index.html page and here
we actually forgot to close the table
tag so right after the TR which is a
table a row we're gonna close the table
tag and then let's go ahead and add an
another H bar right after the Nell tag
right after the nav closing tag and this
will add another horizontal line below
the navbar so now we have a nav bar that
someone stands out from the rest of the
page
okay so now let's create a header tag
which is we can use h1 h2 h3 h4 h 1 is
going to be the biggest one h2 is a
little bit smaller so we're gonna use
header to
I'm gonna say welcome to New Life and
close the header tag refresh the page
and now we have a header next we're
gonna add a paragraph with a P tag and
insert some text inside of our paragraph
refresh the page now we get a paragraph
here the next thing I want to do is
insert an image right below our
paragraph and before we do that I'm
gonna paste all the images that we're
gonna be using in this video and I'm
gonna create a new folder by going to
new folder and name this folder IMG and
this is what all of our images will go
so I'm just gonna paste these images
here and also move the logo jpg in this
image and now that we have moved the
logo jpg into the image folder we'll
have to update the source of the IMG tag
to reflect on that change so now if we
refresh the page you can see that the
logo is not found so let's go ahead and
fix this and just add IMG forward slash
before logo and do this for all the
other files as well
Quotes IMG skills I am G and index I am
G then we can refresh the page and now
our logo shows up alright so now that we
have all of our images inside the IMG
folder let's go back to editing our home
page and just below the paragraph here
we're gonna insert another IMG tag with
a source pointing to the IMG folder and
the image name which is going to be
snowflake jpg now let's refresh the page
and as you can see the image is now
showing up but it's way too big so let's
adjust its size and set the width
attribute to 100% and set the height
attribute to 100% as well and this
should fit the image in the screen so
now you can see after the Refresh in the
page that image fits the screen so that
is exactly what we want we can also add
the title tag in the same way that we
did with the logo and say something
interesting here so you can just insert
any text you like refresh the page or
roll the mouse over the image and now we
have everything in existence holds a
perfect harmonic blueprint so that is
how we can add the text on the mouse
over of the image using the title
attribute next we're going to add a list
of items underneath our image and for
that we're gonna use a UL tag which
stands for unordered list and inside of
this tag we're gonna use a list item and
for every individual list item we gotta
use this tag so this is called nested
HTML tags it's when another HTML tag is
inside of another HTML tag
so it's just insert one two three four
or five
seven of these and here I'm just gonna
go ahead and copy all the text I already
have here so I don't have to type all of
this so you can just go ahead and either
type all this or just do whatever text
you like and now let's go ahead and
refresh the page and now we got this
bulleted list item underneath of our
image so to finish this up let's go
ahead and add another paragraph below
our list and here let's use the strong
tag which will make our text bold and
just say made with love refresh the page
now have made with love text showing up
in bold and let's go ahead and insert
another horizontal line and finish this
up with a footer tag which is a tag used
to indicate the footer section of our
website and here we're gonna just insert
the copyright symbol with and copy
Collin lifecraft love refresh the page
and now we have our footer and the last
thing that we're gonna do on the home
page is add a link to a YouTube channel
so we're gonna do this using an image
banner that I've just created and I
called it live craft - YouTube here's
what it looks like so we're gonna use
this image to link to the channel I'm
gonna go ahead and copy the image file
name open the index page and we're gonna
insert this image inside of the footer
here so we're gonna say IMG SRC equals
IMG forward slash and then the name of
the image which is live craft YouTube
die jpg and then I'm gonna go to my
YouTube channel
so this is my new youtube channel called
life craft and I'm just gonna go ahead
and copy this URL up here which is the
channel URL and then we're gonna create
a link out of it by using the a tag a
href equals paste the URL here and then
close the a tag at the end of the image
save the file refresh the page and now
we have this banner showing up here with
a YouTube channel link let's also go
ahead and insert the BR tag at the end
of the a tag so that we have a space
right after the better and lastly let's
add the title tag and we'll say go to
lifecraft YouTube channel save the page
refresh roll the mouse over the image
and now it says go to lifecraft youtube
channel you can click on the image and
it takes us to my new life craft youtube
channel and that's it we are now done
with a home page so we can now start
working on the rest of the pages so
let's close this file and go to articles
which is the next page that we're gonna
be working ok so first we're gonna
insert the horizontal line just like we
did for the home page so that our
navigation bar stands out a little bit
and then let's use the header and name
this page articles Clause the h2 tag and
now let's go ahead and create a table
tag table row table cell and inside the
first table cell let's actually go ahead
and close this first
close the table as well so inside of our
first table is where we're gonna have a
header of the article so let's lose a
header tag and let's also use a ch3
which is going to be a little bit
smaller than our main page header and
this article is gonna be called
reconnecting with the power of natural
voice let's also go ahead and link to
the article even though it doesn't exist
yet so the actual article is going to be
inside out the articles folder which
will create in just a minute and the
article name it's going to be
reconnecting with the power of natural
voice dot HTML let's go ahead and close
the a tag then after the closing table
row tag we're gonna create another table
room with another table cell and that's
just gonna create another row underneath
the header so that we can put the
preview paragraph of our article and I'm
just gonna paste the preview here inside
of the paragraph tag and close the
paragraph tag now let's go ahead and see
what our articles page looks like and it
looks like we forgot to close the table
tag so let's go ahead and close the
table tag right here refresh the page
and now our horizontal line is fixed
okay so don't forget to close your HTML
tags
otherwise you'll mess things up now
let's also go ahead and add a list of
keywords that is associated with this
article inside of the same table cell as
the article paragraph preview let's use
the strong tag to make our keywords text
bold
and then we're gonna use the Oh L tag
which stands for ordered list in a
similar way that we created the
unordered list so we're gonna add the
list items inside of this tag and the
ordered list just means that the list is
gonna be numbered so this is just some
of the key words associated with the
article so that we can remember what the
article is about
now let's refresh the page and now we
have our article the link to the article
as well as the keywords that are
associated with the article as well now
let's go ahead and add the color
background to this table cell of our
article header so that it stands out
just a little bit more and for that
we're gonna go back to our table cell
where the header is located and add the
BG color attribute and set its value to
light cyan and let's also go ahead and
align the header to center using the
align attribute and Center for the value
of a lion attribute now let's refresh
the page and now our article title
stands out a little bit more now let's
add the second article and to do that
we're just gonna copy this whole thing
here including the table tag and just
paste everything below our first article
so I'm gonna delete this text here I'm
gonna delete the paragraph I'm gonna
delete the title page name and now we
can add our second article is Heroes of
Might and Magic that HTML and the
heading of this article is life is
heroes of my
and magic and now I'm just gonna copy
the article preview inside the paragraph
tag as well as a list of all the
keywords okay so those are just the
keywords that are associated with this
article now let's refresh the page and
now we have our second article showing
up here with the header which links to
the full article paragraph preview and a
list of keywords that are associated
with this article as well so now if we
click on the article link we're gonna
have a file not found because the
articles don't exist yet so let's now go
ahead and create them and the articles
are going to be inside the articles
folder and we'll just have to make sure
that they're named exactly the same as
the link here so the first article name
is going to be this let's just go ahead
and copy this name of the page and
minimize articles that HTML for now and
then go to new create folder
naming articles file new text document
and then just paste the whole thing here
let's go back to the index page and also
copy life is Heroes of Might & Magic the
HTML and do the same thing here as well
okay so at this point these files are
empty so let's go ahead and copy a
template from habits that HTML and we'll
just paste it inside of both of these
pages
now let's open reconnecting with a power
natural voice page and let's refresh our
page and click on this link so now it's
taking us to the page but you can see
that the logo is not found and if we try
to click on any of the navigation bar
links you can see that the file is not
found and this is happening because we
are now inside of the articles folder
but our files exist in the main folder
here so we have to update the articles
links and the logo to go back a
directory where our logo image folder is
and where all of our files are located
and to go back and directory we simply
have to use two dots and then the
forward slash like this and let's update
all the links as well so this just
simply tells the browser to go back in
directory and let's do the same exact
thing here as well in the reconnecting
with the power of natural voice article
and now let's refresh the page and now
the logos showing up and let's test out
all the links and all the links are
working as well
all right so now you know how the
directory structure works and how to
link properly to your files on your
computer alright so now let's add the
actual content of the article and here
and first of all let's go ahead and
close the table tag insert another
horizontal line below the table and here
we're gonna use the article tag
to indicate that we have an article then
let's use a header tag which is gonna be
the header of our article the header is
reconnecting with the power of natural
voice and then the article is pretty
long so I'm gonna copy and paste it here
just below the header tag and here
you'll notice that the article consists
of multiple paragraph tags and this is
to make the article more readable
because it will break it down into
multiple paragraphs so let's go ahead
and see what the article looks like and
let's go ahead and make the header a
little bit bigger by using that h2 tag
save the file refresh the page and now
we have a bigger title or header and the
last thing we're gonna do here on the
article page is just add a list of
keywords which are the same keywords
that we've created earlier so let's go
ahead and open the articles page and
just copy this list of keywords
including all the tags and everything
and then we'll just paste it here inside
of the article tag then save the file
refresh the page and now we have a list
of keywords here and it looks like I
forgot to add the footer to every page
so let's go ahead and copy the footer
from the index.html and let's go ahead
and paste it on every page just below
the closing table tag inside the body
I'm gonna open books
also while we're at it we're gonna fix
this here by adding the table and the HR
line habits also close the table tag add
the HR and then place the footer quotes
close the table tag add the HR face the
footer and skills do the same thing and
are pasted the footer now you can see
that the title of our page is still
habits so let's go ahead and fix this by
just copying the header over the article
and paste it inside of the title tag and
then refresh the page and now we have a
proper title of our article set as a
title of the page as well now let's go
ahead and copy this whole content and
just paste it inside of the second
article by replacing whatever content we
had in our Heroes of Might and Magic
page so here we're just gonna paste the
new content and I'm just gonna select
these paragraphs and delete all of them
also going to delete these keywords and
now I'm just gonna copy the contents of
the second article including all the
keywords just below the header tag I'm
gonna fix this here and we don't need
this extra li here
alright now let's click on this link to
see what our article looks like and our
article looks good but we don't have a
footer so let's go ahead and copy the
footer code and paste it inside of the
both articles and you're gonna just open
any page for that
paste it inside of the just below the
article tag and do it for the other
article as well refresh the page and now
we have our footer
and let's also go ahead and add the
horizontal line right after the closing
article tag and add horizontal line here
as well in the other article let's
refresh the page and now we have and now
our article page is complete so let's go
back to articles click on the first one
takes us to the first article click on
the second one and it takes us to the
second article and now we are done with
our articles page so we can move on to
habits so let's go ahead and open habits
that HTML and just below the H art tag
which is after the closing table tag I'm
gonna insert the heading of this page
inside the h2 tag in a minute habits
also let's go ahead and insert the
habitable
dot PNG right after the header using the
IMG tag SRC equals IMG /a bît-yakin PNG
and we'll go ahead and set the width to
50% and the height to 50% as well to
make the image a little bit smaller
refresh the page so now we have a header
and an image and now we're gonna go
ahead and create a list of habits with
an ordered list tag so after the image
I'm gonna add ll close the ordered list
and then add our first list item close
it so the first habit that I'm working
on is practice voice exercises let's
make it bold
with a strong keg and then we're gonna
add the BR tag which is a braking line
tag so that we can have a braking line
and then add some more text and say the
reason why I'm working on practicing
voice exercises because I want to speak
openly and confidently with my natural
voice and actually we're gonna close the
list item right here let's refresh the
page and we have our first list item
let's also go ahead and add the
paragraph tag and wrap our list item
inside of it just to have a little bit
more spacing between every list item and
for the rest of the list items so we're
gonna be using exactly the same thing so
there's no reason for me to type this
manually I'm just gonna go ahead and
copy the rest of the habits the rest of
the list items below the first one and
you can go ahead and type all this up if
you want to let's refresh the page and
you can see that all of our habits are
now showing up here and because we added
a paragraph tag we have a spacing
between each of the list items so if I
remove the paragraph tags here from the
first list item and the second one save
the page refresh you can see that
they're kind of too close together so
that is the reason why I added those
paragraph tags to have a little bit more
space in between each list item so let's
go ahead and now re add the
paragraph tags to our list items refresh
the page and now it looks a lot cleaner
also let's go ahead and add the
horizontal line just before the footer
here refresh the page so now our page
looks a little bit more clean and we are
now done with our habits page so we can
move on to the next page which is skills
let's go ahead and open up the skills
dot HTML and start working on that so
here we're just gonna have another HR
just before the footer and then let's
insert the h2 tag maybe skills close the
h2 refresh the page so we now have a
header let's now insert the h3 tag and
say most organ skills to develop succeed
in life
applause the h3 tag and refresh the page
and now have a sub header for the page
next let's go ahead and add the
paragraph just below our h3 tag and here
we're gonna use the unordered list tag
to create a list of items so this is
just gonna be the list of the skills
that I think are some of the most
important to succeed in life and we're
gonna use the same Li tag and there's
gonna be six of them so we're gonna
paste this six times four five six so
the first most important skill is
concentration
second one is voice third one speaking
communication awareness and breathing so
these are the so these are the top six
skills that I think are the most
important to succeed in life now we're
gonna go ahead and add the content for
these and the content it's going to be
inside the table tag set the width of
this table to 100% create the table room
table cell then close the table cell
while the table room blows the actual
table and then let's create the first
one which is concentration inside of the
h3 tag and then add the paragraph which
will describe what concentration is
about and why it's important and I'm
just gonna paste this paragraph here and
so the rest of them are gonna be in the
same h3 paragraph format so let's just
go ahead and create the empty tags and
then paste the content inside of them so
there's one two three four five six
alright so the next one is voice gonna
copy the paragraph so I have to type
this speaking
communication awareness and Oh skipped
one okay I'm just gonna cut this okay
I'm just gonna cut this out and East it
down here and this one's gonna be
breathing and here I'm just gonna copy
the content inside of the paragraph for
all the rest of the items so as you can
see having content ready when you're
building your webpage is pretty
important because because without any
content you don't really know what to
put on your webpage so now I'm gonna
save this file refresh the page and now
we have a list of items as well as all
the individual items here describing
what they actually are and why those
skills are important okay so at this
point as you can see we have to scroll
through the page if we wanted to look at
all the individual items but we can
actually create links so when the user
clicks on one of those it will take them
directly to that page section so that is
called linking to page sections and
we're gonna add those links right now to
do that we first have to create the ID
to the section that we want to link so
we're gonna be linking to the h3 tags of
all our list items so let's go ahead and
add the ID to the h3 of concentration
and name it concentration
add the ID to the h3 of the voice item
limit voice do the same thing with the
rest of the items speaking ID equals
communication awareness ID equals
breathing okay so now that we've added
the IDS for every item we can now link
the list items to those sections and to
do that we'll use the a tag so the same
tag that we use to link to our
navigation bar menu and we're also going
to be using the href attribute and to
link to the section concentration we
first have to specify the talent
character and then the name of the
actual ID which is concentration so that
will link to the concentration let's
close the a tag and so we'll just do the
same thing with the rest of the list
items as well
so this one is pound voice close the a
tag H ref equals pound speaking
close the a tag each ref equals pound
communication travels pound and H ref
equals pound breathing alright so let's
save the page
refresh and you can see that the list
items have now turned into hyperlinks so
we can click on breathing takes us to
breathing click on concentration takes
it to concentration and speaking so
that's how we can create links linked in
two different sections on the same page
alright so now we're done with a skills
page and we can now move on to quotes
alright so I'm going to open up the
quotes that HTML create that HR or the
footer create the h2 many quotes close
h2 and here we're gonna be using the
block quote tag or our coils which will
add the tab to our text it's also use
the paragraph tag so that we have space
in between all the quotes and here I'm
just gonna be copying and pasting the
codes here and below the paragraph let's
add the source and we'll add it inside
of the italics tag which is an eye so
that the text will show up as italics
now let's refresh the page and now we
have our first quote here and I'm gonna
be doing exactly the same thing a
blockquote paragraph and an eye tag
close the block quote to the rest of all
the quotes so I'm just gonna copy and
paste all the rest of the quotes below
this one save the page refresh and now
we have a list of the other quotes the
only one that's different is the one by
Madison Taylor so I just simply added an
href so I just simply added the H RAF
tag to the source who is medicine Taylor
and I linked to her profile page so
that's how you can create the link to an
external website by going to that page
and copying their address and then we
can we can add the link to our text in
this way I've also added the title to
this link which will say go to medicines
profile page as you can see here when I
mouse over this text and I set the
target to blank which means the page
will open up in another tab when I click
on it so as you can see it opened up
another tab with medicines tailored
profile instead of opening it up in the
same tab here so that we can still have
our quotes tab open alright so that's it
for the quotes now let's move on to the
final section which is books and before
working on the books page I'm gonna go
ahead and copy and paste the books
images inside of the IMG folder first
I'm gonna create the books folder and
then I'm gonna go ahead and copy and
paste some of my favorite books inside
of this folder and now that we have all
the books images inside of the IMG books
folder let's go back to the books that
HTML so here let's go ahead and first
create the H R and then we'll create the
table which will have all of our books
closed the table tag and then create the
first table row table sell well stay in
the row
and table-cell so in order to properly
present the books on this page each
table row will have two table cells the
first table cell will have the book
image and the second table cell will
have book description so inside of the
first table row let's go ahead and
insert the book image of the first book
using the IMG tag as our C and then
specify the directory where our book is
located which is inside the IMG forward
slash box folder and the name of the
first book is going to be the voice book
which we can just copy and paste this
file name of the first book paste it
here so we have image IMG books and then
the name of the actual image let's also
set the width to 100% and high to 100%
as well and now let's see what our image
looks like and as you can see we have a
pretty big image of the first book
showing up here so I'm just gonna copy
the content and paste it inside of the
second table cell save the files refresh
the page so at this point you can see
that the book image has become too small
so we're gonna fix that by setting the
width of the first table cell where our
book image is located and we're gonna
set the width to 30% then refresh the
page and now the book size is perfect
let's also go ahead and add the V align
attribute and this will align the book
image to the top of the table cell I'm
gonna say top and add the same thing
here for the text V align equals top
and now I'm just gonna copy and paste
the rest of the books because they're
gonna be in exactly the same format and
so you can see that they're all exactly
the same they have a table row and two
table cells the first one is where the
book image is and the second one is the
description of the book so I'm gonna
save the file refresh the page so now we
have all of our books and descriptions
but they're way too close to each other
so let's add some spacing between them
so it looks a little bit better and for
that we're gonna use a cell padding
attribute on the table and we'll set it
to 10 now let's refresh the page and now
we have a perfect amount of spacing we
can even add a little bit more at 15 and
that makes our page look a lot better
alright so before we finish this up I
just wanted to show you guys a few
things that we can fix up to polish up
our website so if we go to a web
developer and then web console you'll
get this message about character
encoding and here it says that the
document will render with garbled text
in some browsers configuration if the
document contains characters from
outside the ASCII range so it's a good
idea to declare the char set and we
declare the charge set using the meta
tag inside of our head tag so inside of
the head tag where our title is just
below the title let's go ahead and
insert the meta tag and set the
attribute of char set equals to UTF - 8
and that should fix that message let's
go ahead and go to web developer the web
console again refresh the page and now
we're not getting that error message
anymore so that is how you set the char
set so that the encoding is proper on
our web
also if we go to a web developer
responsive design mode you can see that
the text and the logo and all of our
navigation bar links are way too small
and so our website is not responsive at
this point it doesn't look good in
iPhone 6 7 & 8 so we can fix that with
another meta tag and we can set them and
we can fix that with a meta name
viewport so let's go ahead and create
another meta tag just below the one that
we just created and this one is going to
have an attribute name and the value of
viewport and it's going to have another
attribute called content and we're gonna
set its value to this long value with
equals device with comma initial - scale
equals 1.0 so make sure to type this
content value exactly like it is here
save the page refresh and now our
website is responsive so all this tag
does is it says the viewport to the
devices 100% width so it rescales the
content to fit the device whatever the
device is size so that fixes the
responsive issue and our website looks
perfect now it's responsive all right so
now I'm gonna copy these two tags and
just update the rest of the pages by
pasting these meta tags inside the heads
of the other pages as well
okay now I'm gonna open up FileZilla
which is a File Transfer Protocol and I
already have my domain registered which
is live craft dot love and here I have
connected to my server which is site
round and all I'm gonna be doing here is
uploading all the files from HTML
website folder that we have been
creating so I'm gonna select all the
files here select upload and this will
upload all the files to the live server
so after the upload is finished we can
go back to the browser and in the
address bar type live craft dot love and
the website is now live you can check
out all the links everything is working
it looks beautiful
we can go to web developer responsive
design mode and and you can see that our
website is responsive as well and that's
it that's how you create a website using
just a notepad and HTML I hope you guys
like this video and if you did please
like share and subscribe and I'll see
you next time clever techie out