Hand-Coding Your First Website: HTML and CSS Basics | Sira Academy | Skillshare

Hand-Coding Your First Website: HTML and CSS Basics

Sira Academy, School

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (49m)
    • 1. Introduction

      4:32
    • 2. First Code on HTML

      8:26
    • 3. First code on CSS

      3:02
    • 4. Design of the BODY

      5:47
    • 5. Design of the TITLE (header)

      4:09
    • 6. Design Navigation list

      8:02
    • 7. Design of Containers2 (H2)

      6:10
    • 8. Let's Design the paragraphs and heading (p, h3)

      4:58
    • 9. FOOTER - End of the class

      3:50

About This Class

During our class, we're going to create a simple website using HTML and CSS.

The course will last no more than 40 minutes, and along this time you will be able to create a same website like you see from Introduction video.

The class will be explained in easy way, everything will be comprehensive and clear.

What we are going to use :

Text-editor : Notepad ++

Chrome

Pictures from site http://www.monpada.fr

That's all,

Now let's get start ! 

Transcripts

1. Introduction: do you, my friends? The role, Dear my students. So where I will be the easiest teacher you ever you have ever seen so together we're going to create this beautiful, simple website in 40 minutes so it doesn't take longer Onley 14 minutes. So you see, it's a very simple website, but beautiful. So you can put everything you want. You can post pictures, videos, articles so everything. So you see, we have the header. So we have a title color design so you can name in whatever name you like. We have a navigational east. So you see And you can name example news, sport, biography, economy everything. So everything you like so you can change in whatever name you like. So you see, we have so title articles So we have but just like an example And the bottom we have foot up So we will create this site in 40 minutes. So I will show you how to do that step by step first. So you need to go on. Don't know the text editor so if you have it, you can use example There are a lot of text editors. So once it was not bad, you remember? Not bad, but it was not good. Now it's not that plus plus. So this is a very good to use where he could text editor. So once you have or you're in their website, you can don't load the last version to just click download in here. So don't load, and you will Don't load it. So I'm not gonna don't load it, because I already did. And I have it on my PC, so it will show like that. So this is the text editor, not bad clusters. So once we have downloaded this text editor, we need to create. So we need to great a folder in or destined So do what? At what I do. So just follow me. So we will name example, or website or website. So you can name in whatever name you like, so don't worry. So then we will open or html so html. It's very simple language because everything that you open, you have to close. So you see you open the tax and then you close. We have HTML. So now we have to save it toe the folder that we have created on that stuff remember. So we have name it or tested right? So or were name it or website. Right. So we will name it my first. My first website thought HTML So remember we're not week working on PHP or CSS or JavaScript. We're working with HTML. So you have to name dot html, so dot html and we will save it. So you see the tax or the code has changed to blue. So means that everything works properly. So we will just right here or first website in order to test if everything works properly. So then we will runt luncheon chrome. So I would launch it in crime because this is my my preferred one. And you see, so we haven't save it. We have to save it. So then do refresh. So you see or first website has been shown. So it means that everything works properly, So just follow me. And in 40 minutes we're going to create together this simple, beautiful website 2. First Code on HTML: their students. So we're back in our second tutorial. So and in this tutorial, we are going to start designing or creating or page. So this beautiful page. So in order to tell the growth or what kindof version off html were using, we have to put dark type so year both and then So now the Roeser knows what type of HTML were using. So remember everything. Everything. When we code everything, so it's it is separated in three parts. So we have here the had still here. So, like you see in the head, we have only the title. Then from here it's the body. So in the body will put the navigational East titles articles. So everything enters in the body. So and then we have the footer, so, like you see year. So we have no duct type. And here we have to put So first we're going to tell to the bro's or what language we're going to use. So this we can show, like typing html lang And then we put e n. It's for English. So now we're ready to make or site in three parts. So like we said, so everything enters in html tags. So everything that had the body, the navigation leads so everything. So here we have to put now the head. So we have to write had and we have to close had, Like we said, everything we open, we need to close. So in the hair we're going to put only the title. So the title we can name my first website using up HTML and CSS. So now we have to close title, right, Because we said everything we open, we need to close. So now you see that we have we have created. So we have put it a dog type than the lang, the language off the browser. And then we have put a title. So now we have to create the body. So the body in the body, we will put so everything in the body so body we need to close the body. So, like you see, so everything goes here in the body. So in the navigation least so everything goes here. So in the body here, we're going to put a dead. So, Dave, it helps us example to design the page. So we in Dev's we used only classes and we use ID's. So this helps us and to design example or page. So we have put it Dave Year and we will close it. If so, in this Dave year, we're going to put stuff. For example, here we have to create the H one and two this H one. We're going to give an I. D. Example The idea that we're going to give this it's had erred till the Hatter it's will be . It will show. So in the header, then we're going to quit a link. So links we create by using ref. So, Ralf, it's for Link. So we're going to make the title as a link. So then we're going to give a title. So like we said so title will be like Title will be color design colored design and there would put home here so we will close the title and then we will show the title in the browser color designed from this. So now we need to close the age one tag, you see. So after we have created or title and we have put a day so now we need to create a navigational least so we create leased by typing Nap. So this now it's just like navigation. So we would put in UL. It means a new order, it least So we were right and we will give it and I d. So in order to design with CSS, we need to give decided, So we'll name it menu. So now we have to close the U L. And then we're going to create the least. So we type ally and then sold the least must be as Ling's, because if you want to forward or to redirect toe another page, it's better to silly food put links. So we but our ref and then so we're not going toe put a link. So we leave like that, I would write. So it it that number one or or new meal? Uh, And then we will close so the least, and we're going to close also. So the link, at least milling So I will copy to be to be easier, so happy to be easier. And so now I will put like 12345 So it means that we have five lists in Breaux's. So after we have grated or navigational East Now we have to check the bro. So So you see, we have created the title on the Have occasional east. So let's lunch it in chrome and see So you see, we have started. So now we have the medication, Elise and we have a title. So just Jack. So here we're control fresh once again. So you see, we have the navigational east and color design like a title. So it means that everything work works perfectly. So after we have credited Navigational East, we have to make another day. So remember, we can put number so we can put uncountable numbers off Dave's in our page. So it doesn't matter how many how many days you put new page, so it's unlimited. So we're going to name this did like container to. So we're going to put in the main container. So you see, it's in the party's main container then, so we have to name containing two after them. We're going to create a nation to to sit means eating heading to, so we're going to write like articles, article selling in this page. We're going example. You see, that's refreshments again received. We have articles we can take also a paragraphs. We just can go to the this what page? Html types of dot com. So we're going to copy this paragraph and we are going to put in our website so it's a bit longer, but we believe like that for now. So you see, the we have the paragraph and now so the navigational east shouldn't be here. So it should be here about the death. So boned a container to now let's check once again. So we have articles. We are going to check once again in the broker and see where we are. So let's Jack once again, we're going to refresh and you see, we have the articles on now we have also the paragraph, so we need also to create a little footer. So we need to quit lags like me saying in this language. So we way we have mentioned at the beginning that we have the hat, the body and the footer. So we have the foods and here we're going toe put just like a paragraph and name it like foot so designed by sold by me I will put my my name. So just like a paragraph, you see. So now everything works perfectly. So when the next lecture, we're going to design step by step for Paige. 3. First code on CSS: So we're back in or next tutorial, and we're going to design a little bit or webpage. You see, we have a title Navigational East articles on the foot. So now we're going to design it if you want to design with CSS. So you have always to type style, so we will type style just under the head. So off to the title on the title type, we will put text like CS has and then, like we said so everything that we open on the HTML, we have also to close, So we're going to close the style. So now we're going to design the body. So the body, it's here. So you can see if you want to design something, you just type that word. So your type of body. So then you open the curly brackets. So, like, you see, we're going to open the curly brackets on, we're going to give the margin. So the margin it gives so it gives us size. So it gives us size to the white space outside the borders. So and the petting it gives a sized off the white space Just so inside the board, her so marching it's outside and padding its inside. So we're going to put also text line and we're going to set like center. So Well, now let's check on the broker and see what we are. So you see that the title and everything has changed to the middle tax line center, So it's were easy. So now, like we said, we designed by I d. So that's why we have put an idea in here. So now you see, Dave, I d. So now. Yet we have to put a hash tag in order so to know what we're designing. And then we put containers. So the name off already? Geez, containers. So here, Now we're going to give No, we're going to give a with So we're going to give a with toward the containers so we'll put like, 770 pixels on. Then a margin must be from zero to alto and we're going also to put a tax line like center . So left text line must be a left virtually So let's check once again and see that text has changed once again to the left. So now we need to design just the header. So you see the idea that H one is so This is a Tron. This is the header. So you see that it's a bit so it's a bit messy here, so we have to put the title in the top on the navigation. So let's change. So we are going to put or to push the title on the top for two 150 pixels. So we can do this by typing the command. Hate. So then we're going to give 256 pixels. So now let's just check where we are. So you see, So the title has gone to the top. The navigation. It's just 250 pixels from here to the titles. 4. Design of the BODY : Dear Mr In. So we're back in order next lecture and in this lecture we're going to design or Web page. So you see the background. It's a bit messy, so we need to give another background because we have a black background. But now we need to change it. So you see, we have the title and then we have the navigation released in here. So let's give a background to her body. So for this, we need just the type of background and then we put to these colors. Are there It's my preference one. So you typed hashtag there were going to refresh it. And you see, the background has been changed to this color. So what we're going to do next, it's we're going to get a border toward if containers. So you see, we have the tiff containers when we said so we have separated or page with depths. So now we're going What? We're going to go. We're going to give a margin a border. In fact, we're going to get a border two pixels. So for two pixels and then we're going to type solid, and we're going to give a nice color So let's give to this color hashtag a Before then, we're going to give a background. So the background who must be blank. It is better for us. So first tap the background in black, so if you want to type the background in blank, you can put hashtag and triple EFS. So now let's go and check once again if everything's if everything works fine. So let's go into fresh. You see, the Dev Containers has changed to black and you see we have around a nice border around two pixels with another color. So if you want to check about colors, you can just type. So you conduct hex colors HTML and then you can you can check for every name off X colors so you can talk to this link HTML color names and if you want to copy and to put in your website, it is were easy. You just copy it and then you taste it in CSS. So in cascade style, if you want to change your Bagram so it depends from your taste. So what we're going to do next is we're going to take some pictures to this website, so it's a French website. So let's start once again, we have to type more donde foreign affair. So we're going to take all the sources that we need for our webpage. So we click this link html CSS So these are the pictures that we're going to use in order to create or website. So we're going to save this title. So we need to say in the same folder that we have created, remember, we have created a folder with the name or website, so the type must be is gyp. So remember, we have three types off pictures, so it's G p g. It's Jif and PNG. So we're going to say also this little apple. So the type is also Jeff, so we save it in the same folder. Now we need to save also the big page. So we're going to save it, Click just like save us and we will save it as a Jiff. Now we have this big menu that we're going to use for navigational East, so we will save it and it's also a Jiff picture and then we have the apple. So there's we we need to design or navigational east, so Let's save us or apple. So the Big Apple. So we're going to say visit, give. So if you want to take this pictures, you can just check this website more Panda, that if there were point affair and you can great in order to create the same website as me . So what we're going to do now? So in the H one header so in the header were going toe pace or to put the apple. So first, we're going to give a margin to zero. So we are not going to get over. Margins of margin must be a zero. And then we're going to get a background. So the background must be the apple. So the ample that we have take. So we took from the website more. Open up, my fact. So let's go and put in large you. So we have this apple in here and we're going to put in your header. So let's check the type of these pictures. So you see now we're going to check the time. So the type it's G PG. So it's not Jeff. It's G PG to see the name off the item, it's Apple that G p g. So we're going to write. So if you want to take pictures from your folders, you need just the type u R l and then the name of the pictures, the format, the type of the pictures. So we're going to create no repeat and we're going to post it in the left top off world page. So let's check if everything's would if everything works perfectly. So you see number Apple, it's in or header. So we're going to design step by step over, webpage, just follow me. And in the next section, we're going to give another design. 5. Design of the TITLE (header): So let's design or website. You see, we have colored. So we have put this apple beautiful level in or left top off for Web page. So what we need to do, it's We need to give a design to this ref. So you see, we have the link in here. So the idea it's header and the length off the title. It's a your f so color design. So we're going to design this title. So we need to ride just h one header and then you see, we have the link, so we type wings with a so we open the curly brackets and then we're going to design step by step or color design as a link. So the title off were webpage. So you see this link over here? So we're going to give first wagon to give with, so we type once again, we're going to give a with toe work link Self Tour title. We're going to give around 400 pixels and then we're going to get a hate around 70 pixels. So that's enough. So I have just do it previously, and it works fine with this. So we see it hasn't changed Nothing yet. So what we're going to do now, it's we're going to display. So we're going to display your title as a block. So if you need to see a difference, what is the difference between displaying in block and displaying in line to just go to the VSC three school on the Google and you just type so display block at in life so you can read and see the difference between this to displace so you can check. There are some examples in here, So in order to understand it better So we're going to display as a block. So what we're going to do now? So we're going to give a background to remember the background. So we're going to give the you are now. So we remember we took this picture. So the title we took from the website moved panda so you can go there and take also the same title. So you we we just check. So we have a title that Jeff. So let's go and check the type off. Work off the picture. So we see in the detains, it's a gyp. So we cap Ural title Jif. So now that we have given a background your URL title the Jeff. So we're going to put, like, no repeat. So we don't want this to repeat, so the position must be relative. So if you want to check the positions so we have two positions in order. CSS, we have position relative and absolute. So we're going to give a position. So you see, now everything works fine. But now we need to put more in the left because it doesn't look like better. So we're going to put in the left around 350 pixels and we're going to put in the top, so we're going to put in the top for 15 pixels. So now let's go and check. So let's go and check if something has been changed. So you see, now the title has moved around 350 pixels to left and 15 pixels from the top. So you see the color design, it doesn't look like better, so we need to remove that link. So in order to remove the link, you can just type tax in, and so the Texan bank will remove that link. So we're going to put around minors 5000 pixels in order to remove that link. So let's refresh once again and check so everything now works perfectly. So now you see, we have the title color design that we have put in our weapons. So now we're going to continue on design or navigational leaks in order next tutorial. 6. Design Navigation list : So you see, this is your website. So we'll put the apple here and then we have put in the title. So you see, now we're going toe design it step by step. But you see this stuff occasionally is not so good enough. So we're going to design this navigational east. So you see, we have given Heidi C i. D. Menu. So we're going first to design the ul many 90. So you just really rhyme just you. Well, so then we read menu. So we're going to give the Heidi off the menu, and then we're going to design step by step slowly. So the menu must be example. We're going to give a hate example. The hate must be around the 35 pixels, and then the margin saw the margin must be a zero. And the padding also must be as zero. So zero pixels. So after this. So we're going to give background, remember? So that we have putting the you where l So we put the Huron. So we're not design on. Then we put this big menu in here, so remember, big menu. So we're going to put this one, So here is the firm out of this big menu? So we're going to check for my big menu. So it's gift Also again. So we're going to foot BGN menu, that gift. So you see, now we're going to make, like example, repeat as X, so it's going to repeat several times on. Then we put, like, minus 25 pick suns around. So this is the background. So we're going to save once again and we're going to refresh. So you see, it seems that something has been changed, So But this is the navigational east that we're putting. So we have a reputation. But now the site Malisse, we need to put like here, like in line. So we need also to put eso to give. So you see this call? This stops in here, so we need to remove the example we need to remove the l a least Seles type, non least type. So least styled example We would put likely style type, so we would put like non. And now we're going to say, you see, so now everything works perfectly. So where there is no number between in the least in here. So now, after that we're going to design this least, So we're going to give you well, So you Well, then Menu and Lee, I so this least in here. So this was designed right now. So now we're going to open the curly brackets. So then, in this, we're going to float as left. Remember, if you see floor has left, so text must be as the line center text line. So the tax must be a center, and we will just see what has been changed. So, you see, the line has been changed. So in the top, so example, if we remove this type now, so you see, we're going to remove this non. You see, once there are some points that they will shown here. This is what least type none does. So it will make like not so. Now we're going to design the link. So you see, we need to design this h one. So we're going to put you well slash menu Lee, I so least. And then the links. So what we're going to do with links we're going to design so step by step slowly. So we're going to give the with. So we're going first to give a with eso it must be around so 107 pixels. So I just like I have decided. And then the line hate must be example like 25 pixels, 25 pixels. We will put a fun size So too the fun size must be 12 am So this is the fun size that I have choosen And then the front weight must be example like bold So front weight must be bold So we're going to put the front weight like void Letter spacing So just once again So we're going to put a letter spacing So this letter spacing must be around two pixels So let's go and check once again if something has been changed. So you see, these things has been changed toe this form of steps So after this, we're going to give a color So this is a color that we're going to give So this is the color that I would like most to give So we put like this and display as a block So we sat displayed block. So in order to not remove tax decoration say see that the link So we see We got this side here, so we need to remove this side so we can remove by text, decoration, decoration, and then we will put like, a long so we will check once again if something has been changed in our texts, they see now this works perfectly, but what we need to do it supported border. So a border must be so the border border right on, Lee the border. And right. So the border right must be a surround to pixel and solid. So the color that I'm going to give it there. So this is the color that I like. So you see, the border has been changed on little little, right? So this is the border that we get gave it. So what we need to do. So in order, we need example, if we type with our mouths. So example we need to put like over SoHo over means menu. So we're going to put least a over. So if we put our mouths there, the line will be changed. So we will put the background of the Khobar. So the background of the over must be like this one. So you see some big menu. So we're going to put this big menu as a gift so big we're going to put Big and Land Menu thought gift. So we're going to repeat X. So we're going to repeat as several time and then we're going to put a zero like margins in vertical on both sides. So let's check once again if something has been changed. So you see, now everything works perfectly. But you see something it's doesn't work right here. So we need to put, like, repeat, big menu. You were out a over So repeat tactics. Yes. Big menu thought gift. So this is the Ural that must be changed in order. When we put the mountains here, it should change. Normally, it doesn't change something back ground. You were out. Big gift. Repeat as a X big menu. Dark gift. So let's check once again. Big menu thought gift. Baghram. You have many released they over. So this is just like underline must be probably So let's check once again, move it and you see if we put the mouse in here so everything changed perfectly. So now we're going to design this two parts in here and everything, so it's perfectly so. Thanks. Being the next lecture we're going to design or next 7. Design of Containers2 (H2): know that we have designed So we're navigation Least. So you see, we have titled a beautiful Navigational East. So we need to design the articles. But first, we need to remove this article. So we are going to change the Santic on, so we're going to put more articles. So in order to do that, you can go to this HTML ipsum. So here you can find some articles. So Laura Ipsum so you can take long paragraphs. You can take many paragraphs least so whatever you need for your website. But now I'm not gonna copy from that website, So I have my own articles in here, so I will post, so I would remove this article so I will post all off this articles in here. So I have post in HD too. So you see age to a three. So I have some paragraphs in here. So now let's refresh and you see, now we have mawr paragraphs. We have mawr articles, so we're going to design step by step. So we're going to design this age two and then the age three paragraphs so and then we have also you see, so we have the footer in here and we have also get back to the main page. So we have a little link in here. So now that we have the title, so let's go. You see, all the articles are so in this day, if I d container to so now we're going to design this divided containing two. So we have separated or page at the beginning. So now we need to write. So you see the ideas container to so we need to write container to, and then we open the curly brackets. So what we're going to do here, it's So we're going to put a petting, so we're patting Must be around. So zero from the left sold 25 pixels from the right, So zero from the bottom and 100 pixels from the top. So we put like this. So now we're going to put this big page so that we have took from the website. So in order to do that, we can just go and type background. So then so we're going to type background, Then we put like you are l and then the name off the picture. So the name it's PG underlined page dot Jeff, so we're not going to repeat it. So we're going to put, like, no repeat and then we're going to give some petting like 15 pixels from the right and 15 pixels from the bottom. So now let's just do we refresh and see if everything's were perfectly so patting must have two points in here. So let's go and see if everything is okay now. Yes, you are out. So let's go and refresh. And you see, we have now this color design at the lab side. So with this background that we have put him in here. So what we need to do next is we need to design this articles. So you see, it doesn't look nice, so title articles. So we're going to change. So in order to do that, we need to type the ideas. So the name of the I D. And then we're going to type like age, too. So we're going to type Dave hashtag containing two, and then we have to specify what we're going to design. So we're going to design the age too. So we opened the curly brackets and in order to do that, So in order to do design. So we're going first to give a petting. So the padding, we're going to give a batting from the left side around 25 pixels, and then we're going to give a line eight. So line hate must be so probably around 25 pixels. It is matter. So let's check. So the title has changed. You see, it has changed 25 pixels from the left now, so we're going to give a fund size, so the fun size must be 1.4 yem. So this is a nice size for your article City. See, the article of the size has changed. And then so now we are going. So you see, we have this little apple in here, so we're going to put this little apple just and laughed off four articles. So we type background, like always. So Or you're now, Then we write Little underline Apple, that gyp. So, yeah, this is the type before little lapping in here. So we're going? No. Or we're going. No, no. Repeat, we have no repeat, no repeat So and then we're going to give left with him to put it to the left. bottom. So background little apple. No repeat left. But, um so we're going to give a nice color groups, so we're going to get color tour titles. So we put hashtag and then we write nine b two. This is a nice color that we're going to get. So then we're going to put a border from the bottom. So in order to do that, we just have border bottom one pixels solid, and we're going to give the same color nine b two. So let's go and check if something has been changed. So you see, now it's it looks better. We have the little apple of the left and it looks it looks better. So in the next lecture, we're going to design these other paragraphs. 8. Let's Design the paragraphs and heading (p, h3): so now that we have designed So we have the title in here. So nice titled a nice Navigational East. So we have designed the age to So now what? We're going. So we need you see this other paragraphs? So this we have the age three in here. So, like, you see, this is the age three paragraph. So we're going to design it a little bit, So in order to design it, So we needed just to type the deaf, so and then we're going to type like container. So container, and then we're going to give h three. So we open the curly brackets and what we're going to design. So first, we're going to give a margin margin left. So we're going to give around 15 pixels on Ben, the padding from the left around five pixels. So let's check if something has changed. So, you see, the paragraph has moved 15 pixels from the left. So now we're going to give a border from the bottom. So it looks better if we get a border. So the border must be one pixel Sally. So we're going to give a color so, like, 92. So let's check once again. So you see, we have one pixel the border from but so we're going to give also a border from left. So when I supporter So we're going to get around three pixels solid. So we have We will give the same color like nine b two and then we're going to give a color . So, like nine B two, also for the color of the paragraph must be non be too. So you see, now we have a border from the left and border from the bottom. So it looks batter now. So what we're going to do now? So we need to design a little bit the paragraphs. So we're going to change the line way. So we it looks better if we change or we justify or text. So in order to do that, we go in type Dave any container to and then we specify the paragraphs soapy. So we're going to tax line. So we get, like, Texas line. So we're going to put it to the center So the paragraph must or probably my we must to justify it. It is better so tax the line, justify and then so we're going to give text Invent. So the Texan than two must be like to Yem. And after the Texan, then we're going to give a line. Wait, So the line wait. It will change the Collins so it will give a line way online. Hate to 1.7 e. M. So let's check once again if something has changed. So you see, the tax has been justified on the line has changed to 1.7 year. So now it looks better. So we need so what we need to do. So you see, we have this little paragraph in here, so it is like a link. So we're going to design a little bit, so because it doesn't look better. So we need to put up i d So div hashtag gun journey to and then we specify specify a so like ling because it was a link you have seen Paragraph is a link, so we're going to give a color. So the color that we're going to giving it eight a zero. So this is a nice color that we're going to give. So you see now the color off the link has changed, but it is good if we give also a over. So once we put the mounds, it is better if the color off the link change. So it is better if it changed. So we need also together over. So we're going to type like Dave. So let's stop elective hashtag container too. So then we give like a and then the whole over the over that we're going to give So let's right the color. So we right like color. Okay. We were going to give this beautiful color so hashtag nine b two So let's save it And let's check if something has changed Yes, No, we see once we put our mouths the color of the link chains So now it looks better. We are almost at the end of four website So in the next tutorial we need to design footer on Then we will finish the side So together 9. FOOTER - End of the class: So we have a a little job to do so in order to finish or website. So we have the food. Er so you see, we have an I d and the name of the idea. It's Footer. So we're going to design this paragraph and p hashtag Then we're going to type footer. So what we're going to do, we're going to give a margin. So the margin of the foot or must be zero So we're not going to give marching the padding also. So the padding from the right, So we're going to give a petting from the right around 10 pixels and so we're going to give a line A So the line hate must be so 30 pixels. So 30 pixels, it's enough. So the tax line. So we're going to put to the right so it's better. So we put text the line to the right, So the footer, we're going to put it on the writer for Paige. And let's change the color of the footer. So the color of the further we will change to eight. A zero sum. Let's check and make a refresh. So you see now the footer has been changed and it's in the left off or website so designed . So I have put my name. So we're going to change the text so we can change the text. I will write so design on the copyrights. So this is how it works so well. Room to type like couple writes, we're going to refresh it and you see copyright 2000 and 16. So this is Ah, it looks better. So now we are at the end and we have finished or website. So in order you can change this list. You can put about contact so you can put whatever you want you can put even use, so we will put just will change name. So once we refresh you see, we have about Paige so you can create links and then you can write direct people to your contact or tour contents. What? Every post. So you see now we're going to remove this style so in order so we can just put it in a separate folder or in separately place. So it's not good to leave it here, so we're going to design it better. So in order to do that, we're going to create a new tab. So then we will based or C s a style in here, so and then we're going to give a name like style dot CSS. So the CSS it means CASC on style. So then you see, the color off for style has changed. So now we have nothing in here. So once we refresh example if we refresh your page, you see everything's get back. Stow this skeleton. So now we we need to find the link in order to link the CSS with HD amount. Cool. So you can just write link CSS html. So then we have the link tag. So we're going to copy this lengthen and we are going to paste it in were website. So you see, we're going to pace it just under the title so we can put it above the title. So just it is better to be in the head. So we have to change the name and now you see everything works fine. So the name was styled, That's he assessed. So that's watching. And it was a pleasure to create this website for you