The complete Boot camp: HTML 5 CSS 3 and JavaScript | Muhammad Raahim | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

The complete Boot camp: HTML 5 CSS 3 and JavaScript

teacher avatar Muhammad Raahim

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

43 Lessons (11h 57m)
    • 1. 1 Setting up the Editor

    • 2. 2 Writing the first code

    • 3. 3 Intro to Tags

    • 4. 4 Stylizing your Webpage

    • 5. 5 Quotations and Citations

    • 6. 6 Displaying Images

    • 7. 7 Putting in lists

    • 8. 8 Tables in action

    • 9. 9 Tips and Tricks; Indexing

    • 10. 1 Starting up with css

    • 11. 2 Css Syntax

    • 12. 3 Acssesing html tags inside css

    • 13. 4 Stylyzing the text

    • 14. 5 Stylyzing list

    • 15. 6 Stylyzing table

    • 16. 7 Understanding links

    • 17. 1 Introduction to Forums

    • 18. 2 Basic Interface elements part1 Input tags

    • 19. 3 basic interface elements INPUT TAGS Part2

    • 20. 4 basic interface elements Other Tags

    • 21. 5 Complete form

    • 22. 1 Intro to divisions

    • 23. 2 Introdiction to div tags

    • 24. 3 stylyzing div tags

    • 25. 5 Tips and Tricks Adding Links

    • 26. 1 Intro to Javascript

    • 27. 2 Writing our first code

    • 28. 3 Javascript with Html

    • 29. 4 Javascript basics Part1

    • 30. 5 Javascript basics Part2

    • 31. 6 Javascript basics Part3

    • 32. 7 Tips and Tricks checking entry

    • 33. 8 Accsessing Html in Javascript Part1

    • 34. 9 Javascript basics Part4 Functions

    • 35. 10 Javascript basics Part4 If Else Statements

    • 36. 11 Accsessing html in JavaScript Part2

    • 37. 1 Project Demonstrations

    • 38. 2 Building up the main page

    • 39. 3 Styling the main Page

    • 40. 4 Adding more webpages Part1

    • 41. 5 Adding more webpages Part2

    • 42. 6 Making the forum

    • 43. 7 Making the forum Part2(JavaScript)

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

This class will teach students to create responsive web development using HTML 5, CSS 3  and JavaScript. I will also teach my students to stylize there web pages to create beautiful masterpiece. My objective will be to make them more creative and help the arouse their own imaginations which will help them build practical web pages in no time.

Meet Your Teacher

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. 1 Setting up the Editor: Hi, guys. Welcome to this tutorial. I warmly welcome you to this course and we will have much fun together and we will earn my knowledge and skills together. So the first thing is to tell you about human as Gmail is a markup language. It isn't a programming language but is a markup language which is used the tags and elements. It is the stranger language for creating webpages, which makes it essential for weapons designing and websites. The most important thing is that it is easy to learn. But the master is is really difficult after debt other than you vote, that s t m l needs an interpreter or compiler to compile it because all languages needed. But the pro throws off Cash Kimmel also include that it's interpreter. If the browser itself stacks mean that this Google chrome is the interpreter off the HTML code. So it means that we don't need any interpreter or compiler for STM l, Which also means that simple text editors such as nor paired could be used for STM. According for example, I'm gonna show you an example of the search Did not bad? No, I will write a simple estimate. Good. Don't be skeptical. About what Time writing? Just see that could be fined a result from the court. I'm writing a simple chord which will display the desk in the next off. Hello world. Okay, okay. Hello. World goes in. No, I would like to save the file so that I could run it. I will save it on the death stop for convenience. Yeah, I've saved it. And you could see that there's an Google chrome logo on this mean find. So that means that it could open the Google chrome will like it and see our Dexter's displayed. Which means that the Google chrome is the interpreter itself. But I would like to say that in North Bed is a good text editor, but we still need better text editor than it. So because off convenient, you could see here that in North Baird we have toe right every tags ourselves without any error by typing or without any by bigger till so that extra Dexter greater. I think the most common use for the for the html according is bracket records. And I like it personally myself and I have used very much, So go to the breakfast Or are you website? And here we will Don't Lord the brackets extradicted It is used for STM according very often. So don't Lord records 1.14 and it is start downloading. No, you would have to wait for it. Mine records is downloading and I have going toe Don't Lords to find it Now we will click on it domestic and vit. You could install it wherever you like and you need to click this boat takes I was put next the stall. Now I have seen stalling brackets is a very good editor. It slows you flexibly control over your STM accord through its color editing. Seeing about seeing the elements is very easy. So as the according html on records, it is very easy. So I have recommended it for you. If you don't want been strolling records, you can still work on North paired or any other text editor you like on Mac or PC. It's installing. I will finish it. Andi, I will go here. Such brackets Look, it's have it is in the start. Click it. Open a file. New. Give us Save it on the death stop. Andi name it Men or index is a better name for saving as GMO files notice that after index the file name are typing daughter html This door left Yemen is the extinction of the file. This shows the computer that this file is an html one. So please excess it as a as a Web development file and send it to the browser and beautiful brother My before brother at the time is Google Chrome. So this means that it will be run by Google chrome. So I will index sort of smell and save it. No, you could see that if I type in any court, you can see that I at first save this and the note bad and you could see that North bad is bathing like this. Now I will open try to write the same court in brackets and you could see that right away It shows us the best options for what we're typing in. So I will type in Ash demon Look, it has shored us estimates beforehand. So if I click enter in between off typing it will compute ourselves sentence itself, have you and it will provide the ending tag itself don't be skeptical. About what? Time tapping right now. Just see that. How much useful is brackets? So it is good installing it retyping the board E tags. Look, I have to type in the body tax, both tags. But here the brackets has done it for me. Other type in the H one tags and have the world No. And other advantage of records is that every time I went running cordon north bad, we had to go to the source file of the North part that is this main file and then run it from there. But in brackets vehicle drawn it directly from the brackets By clicking this life review button as you click it, this will be this will itself run it under the four brother. And our result sprinted here. So I hope that you like this video and you will understand that wanted these off brackets So please install it and I will show you some STM according in the next video. See you later 2. 2 Writing the first code: Welcome back, guys. So we're finding gonna write our first STM accord. So let's do it and jump right into it. Lord up rackets. So from the beginning, I would like that you start to save your STM a good in, especially saving each HTML code in a single folder which makes your court more aligned and simply fired for you to see again if you are gonna review it afterwards. So I'm gonna make a new folder and open it on. I'm gonna go, and language is we're developing s Thiemo. I would like to make a new holder Etch GMO Demo Slack folder and a new folder named Are Flushed Gold Stakeholder And I will make a new file file new saves. I will save it as index dot STM is index dot html is a widely used name for STM all files which are the main as she ml files so less Writer First scored, we will be going with documentary type D or C doc for document and then type E v i p eat document type HTM So what does this line mean? This line shows that computer and the interpreter that this is the html code that RV that we are gonna right after this. So after writing document type will begin writing our STM accord. The basic element off STM a record is HTML tags, so we'll type in ash TML tags. Eggs are the basic elements off the STM, according these tags are known as mark up tags. These tags are things in which all of the court off html goes in the STM. A tag is the basic bag. In this tag, all the elements off shtml goes in. For example, if you are going to save the image of video, our next colors x sectoral. Everything goes into a steamer tags. So as being basics, these asked humor tags are gonna strong all off the HTML code offer dashed humor tags. I would like to put the header tags. Head bags are door stags, in which the men things that are used to define before every other, according an estimate. Several type in the head tags. So what goes in the head tags? Head tags are displayed before any anything, like text Burton's images videos that are you gonna that are you going to display in your website? So what will go in the her tags. I there are links to other s chemical Wardo CSS cords or we could type in the title. What is the title? I don't Is that you can see Google pops up. And the new tab? This new tablet in here is the title off this Google home page, which means that it is pretending the head tag. So lurch type in the title track bags, a terror attacks and in their title tags, we will put the title we are gonna display. You could put anything you like, but I would like to display First Hood offered that this is enough off the hair tags because we're going to start. This is the first. According after that, we will display the border tax. No, what are the board? Eat eggs. Body tags are the main tags in which every element that is gonna going to be displayed in a website goes in, which is gonna being displayed in the main body of the website. You could say that this is this is the main body of the website in that you can see the email links images, links the Google picture, the search bar the air charter. This such bar, the bookmarks, everything, everything. This is displayed right now inside the body tags. So that means if we have to display and you text in are website we need to use the body tags or images, videos, x sectoral. Everything goes into the border tax. So right now all of you started simple text and the first decks is edge 11 He then short form off heading one heading one means the largest herding in S Kimmel. So we will type and there are first good Brugada. If you don't understand the Eshmont tags, don't be skeptical at one, tags are just simple used for displaying Gord and touched on the websites No, actually, tags are fuller but be degs beat eggs A short form off Berruga. So if you are going to display a big paragraph on your website, paragraph tags are most commonly used. So real right are hello to the surrounding fellows that develop rep states. This is a simple text. No, we will first si of our text. You could either go to right licking the industrial html and save. Or you could either click on the text and control acid to save the cord. No, I will go to the life purview and click it. The window pops up. And as you can see our Dexter displayed, let's see how it is displayed. You could see that document door type. Describe that this court is off HTML. So html is printed, Printed out. After that, you just type in the STM attacks. These s, um, attacks counting all off what goes in side on? Ask GM. According after that, humor tags come to her tags. Head tags. What? Her tags display her text display normally at the text or the picture icon off the website . The text is the title. The title of the court in the title off the website is first good and this first scored is written here inside off the title tax. Often, er the heck bag is finished. We closed the higher tax by writing a former slash head, which marks the ending off the tax. We display the body tag. The body tag is also finished with a former slashed board attack. So please be careful that every time you start a tag you should finish it with a for slash forward slash and died the test off the check. So don't leave your tags opened as it can cause many problems and errors in the body. At first you have returned the heading tag which includes our first score together. This our first gold together displays here. It didn't. It is an heading tag which means that our court will be displayed like and hurting. After that, we have written are better girl, this paragraph bags is it in our hello do the surrounding fellows there developed websites . This paragraph is displayed here right below the heading tag which means that there isn't grown up chronological order off displaying these tags and thus the output is the same. So I will say bye bye to you for now. And we'll see you in the next video where we will share some more fun things about SD ml according see you later 3. 3 Intro to Tags: Hi guys. Welcome back. So we left from there. We rode our first chord. You should remember that last time I showed you the h one tags so and the paragraph bags. So let's baker rial approach towards website will building. So I showed you the h one tags But I didnt showed you It's fully functioning You see that there many heading tags each heading tags is begin with an etch and it is from H one at six Ach one is the biggest phone I have shown you here and at six is the smallest one I have copy and peace pays these all and change the tags to show you the difference in there Sighs I have I've been corporate in six The 1st 1 is ach one the biggest one The second I would close it because life really was being shown I want to show you once when all is finished the 1st 1 is everyone the biggest run that it is followed by as to smaller than the etch one. As to as to now comes the s Street Notice that after I typed as three here this match one turned into red This is the error showing ability or brackets and shows us that this s tree starting tag does not match this edge one. And ending that soit shows us that we should match the starting tag with ending that. So the name off the starting tag and ending tax should be shamed. But accept the former slash should be entered in the ending, tacked to show it is an ending there novel type industry as for at five and it goes all the way to add six smallest tag, the smallest hurting day at six. There are no more smaller tax than at six. The at six is the smallest one. So if you type in at seven, it will not have any effect. Let's test it also, for your sake, I've I've been that seven also so that I could show you control less it and run delight. Review Andi. As you could see, that record is shown our first court together. The biggest wrong the actual in tax. This is for Lord by as to tax smaller than the H one, but bigger than that sweet older by Astri. Still more smaller than that's four more smaller. That's five more smaller. And at six, the smallest one. You could see it. It is even smaller then our hello, which is the paragraph after it is even smaller than that. But you could see that van. It comes with the at seven months. It is written just like the paragraph. This is because the STM l didn't recognize the at 70 on it printed it as it is. So that means that if we write, the at seven tag error wouldn't be displayed. But still it wouldn't be recognized and it would be malfunctioning off the court. So let's delete at seven. Save the court and no year to year. So now should be You should be clear that Etch tags are heading tags which start from the excellent egg, which is the biggest one, and finish out the at six dead. Which is this more this one no less. See some more tags and experiment with them. Okay, we will believed all these tags so that you won't be confused. No, let's type in I first AG and which is very widely used by programming. Today it is a center deck. I've been in close the H one tags with the center attack. This centre tag allows the cord Toby center aligned, which makes it easy to make it prominent percenter lining it. I will save the court and around the light review so you could see it yourself. And as you could see, our first scored that is enclosing actual tax is no center line, which means that it is in the center because off these 100 tags no, let's see another tag. This Dag is most prominently used in the paragraph tags. This is this strong tag. Why it is used prominently in the paragraph tax. It is because the strong tag is used to display the text board, and heading tags are already bold. So that means that paragraph tags could be boarded by the strong tax. I will save it and see the life purview. And as you can see, the paragraph text is no board. So if you would like that, you would. I want this board another as single word like surrounding. You want Onley too bold, this text so we could also do that by only in including this surrounding word in the strong tags, we will only in close surrounding the strong tags on Save It. I would render life review. And as you could see on Lee, surrounding is boiled in the whole line. So if you would like to make some words prominently, you could use this strong tag or another egg. Prominently used is the ID tag. I short from off metallic is used to display words metallic to make them more prominent, just like the world. And, as you can see, Strong is nor displayed in bold italic forced it was displayed in bold No, it is a Talic because of the attacks. After dad, we would like to try the underlying tags. These underlined bags could also be used for making gold. Prominent underline is short by Hugh Tags Short form for under lane I like through you, and as you could see, no surrounding is underlined, which means that it is still prominent there many ways in national aml to make scored prominent. No, I will type in the strike deck the strike tags Hello to draw a line in between the text as you like to show them that they're carted away from the deaths. Type in in the paragraph. These could be virally used in some reasons and you could see that surrounding word isn't all striking with a line. Another, more most important tag. Juiced for highlighting a word. Making it prominent is the martyr, which highlights the word enclosing it and shows it prominent. And as you can see, it is highlighted and is shown prominent and it is highlighted in yellow. Okay, this is enough for highlighting bags. No weaken. Also use attack called Marquis decks. Marquee tags are used for making scrolling text, as you have seen in many websites that they're extra scrolling beneath the heading, showing some important highlights or important news related to the website. So I would like to typing the moderate eggs and I've been learned Ash Deimel according we does and become a developer. Okay, you're saved it and no life review. And as you can see beneath the extra ntags, our marquee is scrolling and displaying the highlights. We need it no Beeville by another Dag. And this tag is very important when writing large paragraphs as you know that Ste. Marie doesn't know if we have ah finished a line or not, and we need to jump onto another line on Lord, if is important for us to tell, estimate that we're finished the line and we need to jump on another line to it's start deaf paragraph again. So that line is broken by the tag br These tag breaks the line and makes the paragraph to start on the other line. If you see the lipo, you ever tell you that you could see that officer, the surrounding highlighted. I have dived in the BR tags, the brake line text and as I've dived it in the line is broken after the surrounding tags, which means that and it continues from the next line. So it is important for writing large paragraphs that need several brake lines and several new lines to continue from. So in this video revisited many, many tags, and I would like that you experiment with those tags and try to discover new things so that your creative mind could get more sharper. And if you want to ask any question about any of the tags, please be free cause them on the Q and A section. See you later 4. 4 Stylizing your Webpage: Welcome back, guys. You will be thinking that we have done so much according so I don't make our record a little colorful so that it will be charming to see. So let's make it a little colorful right now. So the first thing that I would like to make colorful is the whole body. The body off and webpage is I'm again telling you all off the elements, the text, the images, the search bar. As you can see in the Google and the links bookmarks, everything is inside the board attack. So I don't make the body colorful as it's wrong everything. So the body here is made if made colorful, everything in the bag room. So if you make the body colorful, how would we do it? We will go into the body tag in the body tag. The opening body tag Very type in BG cutlet, vehicular or which it is standing for background color. In the B G cutter people type in the our favorite color, which you like as the background off the body. So I've like at first before showing you what is the result? I'd like to tell you that what is this vehicle. This BG color is an attribute off body which is returned inside the body tags opening Dag in this opening bag. The attributes actually boots 100. The attribute right now we are using is BG color. It is used for background color. Displaying attributes are things which on used as methods as functions off tags. In HTML, these function off HTML tags can do many things from color displaying. Do recognizing the hide off the body do everything. So these attributes are very important functions in displaying money off the things these could be inside the body tags or the title tags till the paragraph tags or the actual tax. So I would save it and show you the life review. And as you can see, the whole body off, the website is not changed into radical while how charming it is. So this ride color displayed because off this beady correct tribute, so our website is starting to become colorful. I would like to type in ah, more less bright color so we could see other texts. Easy also if you die But on the green color, it's a doctor one Okay, it will do the thing No, let's stylized text and make it all so colorful. The photograph eggs are easy, stylized as unlike Etch One tags, they are most commonly used and are written widely in paragraphs. When displaying lords off text in the photograph bags the used uh, dagg scored for ntags. These foreign tags are used who usedto style eyes the text. Okay, you type in the foreign tags. You type in anything we like, like idea. Are you having fun? You save it and as you see the texture displayed here because you have returned it inside the foreign tags now we will style eyes this text in any way. We want three major attributes off this foreign tag, which is used to stylized text R s falling the color tag, the color tags for white color. Do that Dexter done inside the four index this color could we displayed in three days? The first story is the hash tag. In the hashtag system, we display the hash tag and exact that semen form off others for exerted a simple form. There are many ways or displaying colors, as you can see in brackets. If he put the art cursor our most goes there on the ash tag. You could see that white color displayed, which means that discolor is white. You could make infinite number off combinations to provide infinite number off. Alicia, you as I could also type in 000 and a yellow color is formed. So the thing you you have to remember here is that we a need. I've been only six numbers or l four bets after the hashtag. And then as cutbacks are not gonna increase the f as public, they're gonna be f or between f any. So I hope that it is clear to you. And now you'll see our Gordon. It is displayed with Ajello color as it was shown in the brackets. Okay, so are extras displayed. Now let's see what else we could do. No, I would like Why don't display the color in another way, Like I told you, Learn, Display it through the name of the color. Like before we displayed the BD color to the name green. Now less display the color to the name blue control less and you could see here that this text displayed in blue color No, the problem with the foreign tag is that unlike actually bags and paragraph tax, the H one tags and paragraph tags are displayed. Then they are going to display on on over one dinner that in the foreign tags on you, as you can see that the answer the result off this tag is displayed here. And unlike displaying in ach one and paragraph tracks where the Mex resort is displayed low it it had displayed right next to it. Why is this? This is because when in the HTML text to a like tags are displayed together like foreign tags or two paragraph bag displayed together, then the text would begin right in front from it. So display this. The result off this bag below this the BR tax which I explained you in the video before, becomes handy. Retyping the BR next saved the text as you can see the text nor disappears below it. Okay, we use this blue color. No, let's try another way. Another way or displaying the colors is as shown. I will die the RGB spectrum in the place off the color name RGB RGB stands for red, green, blue. So you type in how much red? How much green and how much blue we want in the color shares we are gonna display in the foreign color. So this becomes hand even you are an artist and want to display different shares off colors . For example, vehicle display any shade of color from 0 to 2 55 55 zero Goemon zero. This 2 55 is the highest shared off red vehicle display, and zero is the lordship. So the first digit the first number comes for the red, second for the green and third for the blue. If we type in 2 55 in the first, which means red and the others are zero. This means the red color would be formed because no agreeing on brewer included just ready is included. And as you can see, records also displays that this is a red color form. So, like that, we could make any shared. We want type in any numbers you would like and experiment with it between zero and 2 55 Save it. See the Life Review. Now you can see bluish color. I think this form and again because I'm not placed a beer bag here. That's why the line was not continued on the next line. So if I see it again, no, it's continued on the next line. So this means that we could display the color in many of us in the foreign tax. No, let's see another at tribute of the foreign Dag, which is the face actually, what is the fierce hatchery face? Attributes is an attribute which is used for typing for showing different dive soft. You could say that different. I've soft formed styles. For example, area which is a woman, one using you could say Microsoft Word No deformed fit deformed, which is the face foreign style, which is the face could be in many number in the HTML. The most commonly used is the area is here yet, and if we run it, you could see that this text has Dazed is foreign in compare off other texts and it has grown large, large in size. And as expenditure says, if you type in another, I performed, you could say that it could be San Sarah sends serious another widely used face and and you could see that it has changed a bit in compared able to it, and that another most common use face is well done there. Then this office I'm gonna show you again. It has grown more bigger and has forged I less change again, and it has expended itself. So there, many for child. You could go out there and search on the Google for more for ourselves and lastly there, then other attributes, which is the sighs, attributes the size off the phone known that strike on another form of four eggs. And this time I'm trying it on the 2nd 1 and I will type in. Size is equal to you could say three. I would save it. I will. I will start the life review Good for it. And as you can see, there is a change in the size. Now. If I I would like to display eight, I go back there, see and you can see home. What size off the text has increased, so this could become handy. Unlike the Etch Tags, in which the smallest number has the biggest size, the each one has the biggest eyes were edge the at six tag, which is a greater number than one. But the at six tag has a smaller size in vice. More soffit here in the foreign tax, if you increase the size number, the size results and grease, so please memorizing and don't get confuse off it. The foreign X and the actual ties are very different, and this size attributes are also different, so please don't can get confused about it. So today we learned about how the stylized text display colors make it more attractive. Two different foreign styles, sizes and colors. I hope that you are liking the scores and we'll enjoy this course. V V. Start making many real world applications, and I will show you many off useful attributes and tags that are most commonly used in the real world. So see you later on goodbye for then. 5. 5 Quotations and Citations: Welcome back, guys. So today we are going to discuss about some of the HTML tags for the rest human tags which are used for and drink quotations or citations on your ass TML page. This could be added when making references about some knowledge webpages or adding some quotations off seeing your people from around the world. Or, if you are making a survey webpage and adding some off the ordering people's sings about several things. So let's see the most basic quotation bag using STM l skewed. So first of all, let me create the basic STM Adex. By this time, I hope that you should remember how to make these STM Multex And you should it should be on your fingertips by now. Sure, So I'm gonna make them once more so that you can remember them all after the doc, um, under type. We are the STM attacks Tiemann eggs. After that, we aired the head eggs, head tags. We have learned that still know that her tags have title in it in the title. Right now we are gonna do quotations and citations, so we will write about quotations, relations and citations after head bag comes aboard e tag. These other two men tags under the HTML tag, which we have run learned they'll know and you should remember them. I thought it off in the body tag. We've, you know, enter the STM Milk Audition day. This STM a Kardashian bag is the cue deck Q B stands for quotation. It is used to display someone speech or someone saying so. For example, we're writing a paragraph and a saying off someone comes in it, for example, John said. And now Ford's. He's saying We will type in the quotations degs and I will type in that according S D. M. A is easy. Now let's see the result life here you And as you can see, their speech marks surrounding the according STM a lazy. So this means that the things that are inside the condition marks are surrounded by the speech marks. Okay, it was the 1st 1 left. Now try another one. If you have a big block off board written so we can use also another tag ward block court, this bloke court indexes, the text returned in it so that if you have ah, whole paragraph of speech in it so it can be shown more prominently. So that's take an example in place of a few tags. Your type in block court Lochore Sorry for the spelling mistake. Cool. I think I'm a typed it. And now? Oh yes. Here I miss stabbed it and it is block court. Okay, now we'll run the Life Review again. And as you can see, that this according HTML easy, which is stronger by the blow court is no indexed, No, lest let us move on to another example. And this example will be about abbreviations. We use several every variations in everyday world like WWF And like the UNESCO, these are several exempt. There are several examples off abbreviations. No, if we are writing abbreviations s so it is No, it is not every time possible that everyone will know the long form of the abbreviation. So if you want to display the long form that every visions along with this the court we can use the a B B r tags A B we are is the short form standing for every vacation. So let's see an example. I am writing the organization WWF is working Do save wildlife Okay, we have done it. No, Save it now WWF B stands for World Wide Life Foundation. It is an abbreviation, so if the user want, assure it in the long form along with this aggravations, even use the A V V R tag. So let's enclosing in the tags. A BB are dags. Okay, x on control be and no, There is an attribute off the A B B R tag, which is called the title attribute title Attribute. In this title attribute, we will type in the long form off the WWF, which is word why your life phone dish in so last year in the life of you, As you can see WWF, it's displayed, but there's no where to be seen very certain world by life. So to see where the world wildlife is written, we will hold where are most cursor on it. And, as you can see world wildlife displayed on the WWF abbreviation. So if the user wants to displayed, it is a very easy way to do it. No. After that comes the address tags. These air dressed tags are most commonly used for displaying any website address or any home address If you are creating a website for a corporation and you want to give the address off the corporations office, you will type it in the address tax. For example, I will take this out and type in the address tags. No, inside their dress legs. I will type in of a no. I have taken a sample address, and we will type it in as you. I have already told you that we need toe. Enter the brake line B R. Tex to continue the lying from the next line so that as the ask, Emily doesn't know it. So we will add the BR tag also over here. So as we want it to continue on the next line. So if you have added and control less, let's see the Life Review. And, as you can see, it is a tally sized, making it more prominent from other texts, thus showing this is an special text or their dress. Okay, we have type Jack. They're dressed eggs. Now, another tag I like was the citation tag or the site tag. This Dag is most prominent Lou used when adding some reference from a book like, for example, I will type into you tag And I would say this reference waas a gun for Norm? No, I have to tide the book as a reference. So every short in the sight egg or the Citation bag site? No, I'll type in the name of the book on DA, for example, learn ish human. I am just an example, and we will see what the result is. And as you can see, it is a talent sized, thus showing Dad, this is a citation or reference. No, the last but not least, this is a tag which will be much fun to learn the mode, and you will enjoy learning it. And this tag is the beauty or tag. This tag defines their direction in which the Lakers are displayed, so we will enter the be the or tag and in this real type, this lying be written on that, for example, and now if we have to define in which direction this line will be displayed, we will type in a special attribute off the beauty your tags, which is D Ayar. In this attribute, there are two types off ways off typing in this text. One is lt are we stand for left to right and the there is RTL stands for right to left. At first we were dyp in the lt are one and check the life review. And as you can see, it prints out like a normal tax because it is already from the left to right direction, so it will not make any difference. So if you're typing are the L, it will make some difference. And if you see the Life Review again, you can see it is printed out in a mineral mirror image. So this is a kind off funny tag at it prints out this line and indoor mirror image. So I hope that he enjoyed this lecture. And I'm seeing you forward for having more knowledge and fun with me as we master and polish our skills together. See you there 6. 6 Displaying Images: Welcome back, guys. So from last many videos, we have had knowledge about s Gmail tags different colorful things about HTML having playing with colors and foreign tags and several bags which are used in body. So you will be thinking that why don't we had some visualize able things in the HTML, So I brought it all to you with the html images. So in html, we could also add images which really displayed on the image bitch. There are a single tag used for displaying the image, which is called the AMG tag, which is the short form for image. This bag is very widely used and has many several attributes. So today we will learn all about them. So the most important thing before starting everything I will tell you about is dead. You need to have the images which you need to store. You need to display on the web in the same direct folder as the index toward shtml file. As you can see, see that there is an example be Dorji peg in this file and an esto dot PNG In this fight the same as the index doordash human. I will show you in the file Explorer on the majeste Yemen. And as you can see, along with my index dot as she Emily file. They are two pictures which I'm going going to display in this video right now. So they should be in the same file for demo purposes. They could also be on on in other files, but in that case, we need to place all off the filed part in the esteem. According so for the basic purposes, we will at the first save it in the same fight. So let's go and get right into it. So first, I will make the documentary type H g M O. It also has an ending tag, but it is not important to display, and it is not so much widely used. If GMO bags after eight, if you don't display the head X, it is not a big problem. Body tax will also work as we don't need any head work. Right now, you only need the body tags as the images are displayed in the body section. So, no, let's start with the imaged eggs. We're diving. I am so this image Dragisa Special One, as it doesn't need any ending deck and all the attributes off the image tag define what is going to be in the image deck. So the image Dag first off all hasn AC tribute called SRC or short form for source. No, this SRC dags has been the file part or the name off the image which you are going display on the web. So at first I will take the S to the P and G tag this. I will take this image as you can see this in my SIM file After a store door, PNG I display the high tag This height eg high tech tribute defines that percentage off the height off the image according to the window off the web, The size off the window of the Web which is I will show you this size off the window of the web. It the image size will be shown in the percentage of it that how much percent off the VEB that image covers? So I would take of our 30 person, for example. And the same is with the word I will take on the wit and it will be also 30% offer this. I would take a line matter this align attribute In this image, Dag is which defines where the images go going to be displayed on the webpage. For example, it could be either right right side off the rep, ege or left side of the webpage, or top or bottom. So we will. They are image in the left side of the webpage. Okay, left. It's simple. Just right in type in left, right. The simple keywords which we use every day and lost but nor the least comes up all attribute. This old attribute is the attribute, which is used to display the alternative to the image, which is a text on this webpage. If there's an error occurred and displaying the image, this text will be displayed to compensate for the which it will be. And at her up guard, a guard in displaying you could type in anything you want, but I'm typing this in and at the last. We will close the tag and save the file after saving the file. Lexie. What will happen when you run the Life Review? And as you can see in the Life Review, our images displayed the same image as toward or PNG villages here. So this means that our image despaired without and your so why don't display and text blow the image. And I would like to add in a couple of more dash to you in touch this plane, which I thought was important for to share with you. And these tags are enclosed inside the text. In a paragraph, for example, the formula off water is ish door No, if you know about chemistry, you've been known that this do between the age and oh, it is displayed as in sub script, below edge, as in small digit below edge. So how display it like that The simple bag, which is commonly used in the HTML, is called the subject, which is used to display a subscript, and we will so Louisville right now and close the two between the subscript bag and save it . And if you run the Life Review again, you could see that the text is displayed the right side off the image in which you could see the subscript edge toe the subscript boot in the next. So why the text displayed right side off the image? This is because the images image. We anchored it to the left side. So that means that North test could be displayed on the left side, where the images despaired, so that will cause the text to be displayed on the right side. No, let's Ryan under image. Or before that I will show you the counterpart of sub script, which is the superscript for super. We will only replace the subs B with B, which means it is the short form for super sub, and we will save it life review. And as you can see that the two is not being displayed above that, which means that this is now the superscript. After this, we will display another image. This image will be, for example, S C is equal toe. Let's try to display an image which is not in the file, so not available dot PNG. And now let's try group displayed. We'll save it and now we'll learn. Turn on the light preview and no, let's see as you can see and image I can type is displayed on the file. But the image cannot be displayed because the image was not found so counterpart. This I want to be displayed the alternative function attribute is there. So if he it has the alternative attribute over here and save it and not run the Life Review , you could see that this icon is nor displayed in an error which could no help that person seeing this web, that an editor was occurred here. So not big on shoes. So that means that this alternative could solve many problems. Now, if we enter in the example, be example B. Dawg de Peg example, be door depict and save it and run the Life Review again. You could see that the error was displayed again. I did it myself so that I could tell you about some more errors that could occur, vile, displaying an image. This error occurred because I typed in Dort, PNG, but the dog extension off the example be waas door J peg. So we need toe right type in the right extension for each image file. So if I type in the PNG extension, the error would still occur. So I would have to type indoor J peg extension so that the right image could be displayed and before displaying the image that's nor display it on the right side and like you. And as you can see this image display there because I didn't add any off the height and width functions over here, this image was displayed in its full size. If we add the Vidin hide function right now, it's height is too much. So if we add the hide function and make it's hide about 40% save it and run the life review . We could also learn that new life review by dust reloading the page. So if he reload the page, this image will be displayed in the right side. So I hope that you learn too much today and I would like that you yourself try to Don't don't Lord some images and try to display them through the STM Elva pitch and try to have different values in this height and width attributes and try to make sense what I taught you today. See you later and we will have much more fun 7. 7 Putting in lists: Welcome back, guys. So from several previous videos, we have been making colorful images, color adding colorful images, making our webpage more colorful, with its tax in different colors and forms and with the backgrounds in different colors. And we have also added some different types of text with and learn a numerous new tags. Four body. So this time I've come to you to make the webpages more easy to see for the person who is seeing through list and tables. So in this video we will be making lists and asked. Human lists are most commonly used for displaying the information about several things which have several informations about it. So let's ride jump into it and I've set it up the index dark sdm for you already as by no, I think that you should know that how to set up and in html file. So from the title, you mean no, we will be making this. And did you notice that when I came in, I said in death's door STM instead of as indexed or STM and the file name is also with door bashed Yemen STM instead. Off dot sdm is This is because there. There could be two extensions off STM l files. One is the daughter HTML and the other is the daughter STM. You could use the boat in the in the extensions in HTML files. So now let's jump right into it and make some list. So there are two types off men. Lease one is an ordered list, and the other is an A nordeste unknown ordered list, a list which are not numbered, and there is no numbering. The show. Which number off theft is this one on the list, whereas the order list are all numbered with 123456 or a BCG to show that which number off text is this on the list? So at first we will make the in order list to make the an order list we need to use the UL attacks. So these ul tags have ending and closing and thes ul tags a stand for a new ordered list. So inside the ul tags we need to define each item separately, and East Item, which is defined separately, will be defined inside the L eight eggs. These add light eggs also have enclosing an ending and in these air latex, we will define the items in the list. So, for example, I would like first define OrNda the first item off the list. I learned another item in the list and hold it to your data. I really learned another item on and for example, add in Mercedes or Ferrari. Let's add in lost item and name it BMW B M. Devon. And now you save it and run the light review. And as you can see, these items are nor displayed inside a list. And this list has These dots are called this as in HTML in the webpage. So there are several times off doors or disk. We can use an STM ill display these items for a weekend. Use each type off these Ah, I attempts to display er through the SDM attributes AWF ul gold type. This attribute type has several matters such as this which is the default method off displaying and the list items inside the U. S. Days. Another type is the circle. We will save it. And this time, as you can see that list items are displayed opera circle Another type is squid. We learned the life review. And, as you can see that there no squares instead of circles. So there are several kinds off these matters, and you can run any one you like. So we have done the on order Lis. What about the orderliness? So even know? Make the order list? And before that I will make a hiding for it. And it's heading is shown through Simple Edge for tags or the heading Ford eggs. And now we were displayed h four, and we wouldn't name the name UN ordered cars or anything you would like. Save it. Now let's go to the ordered list. So at first we will type in the heading ordered cars. It is your on it favor or thing that you want to use the age for tax or paragraph tags or each one tax, or you don't want to use them at all. After that, the U S. Offer the U. N. Attack summed up oil Tex these old extend for order list tags, so even use the order list tags to make order list and inside daughter list X coming the late eggs again. So to define each item's board lists have the same tags all the a latex and these air late eggs on our now have to go in with some items on devil. Type them quickly, for example, to Mato copy paste. And no, I will type in. I will type in peace and no, I will type in cauliflower. And now our dive been Garrett Now will save it and or under life review. Ah, sorry, sorry. Sorry. But before less change these cars Vegetables Because we're displaying veggie tables in those sections. And now run the lie prevue on in the Life Review. As you can see under the order list order ravage vegetables. You can see that there are in order type with 123 and four. That means that they're numbered. No. And these numbered items are fastest a metro second sp's so that you can see which number they are on. So you close it and there are several types of numbering we can use in order list tax. The first type off numbering is called and for each type off, long numbering, we use a type attribute same as the US attacks. And there, as you can see, the in the brackets that there several times off these kinds of numbering. The 1st 1 is one which is the default among Do what? Latin one. And after that comes the English Big A and English Smalley, followed by the Roman numerals off first Roman numeral on the small. The same first drama near a moral in the small form. So you can use any of these no less tested about this through the small, normal Roman numerals. First, just for your sick, you type it in, save it, run the life review. And as you can see, it is no in Roman numerous, we close it. And now let's use and other list. This is north and other type off list. But it is all the nested Lis, this is the Nestor leads the list are all nice stateless when there are less regionalist. This means that if you add a list within this a northerner list, this means that this is Noah nested list, for example. Right now, we can do it ourselves by picking up this order list and dropping it inside the A northerly list. So no, this will course the, uh, a new order list, Toby the basically Stipe and which is followed by the UN order list, which is its child. So we will save it and run the life review. And, as you can see, no, these a new ordered guard guards haven't other list, which on oil's child or the child of BMW so as to make it more logical. I will add in some other attributes. Gee angered two subjects I've learned in ah of a larding mats, English on delete this and all leading signs in place, or BMW. And as you know, that there three types of sciences. So let me lead gathered. So that three you mean and the three types of scientists include the first run biology, biology, then chemistry. And then comes the last physics. So that means that if you want to display this type off list, we can make this the scientists, the father off these child list types off a Nord order list. So if we make run the life review off this, you will understand it more better that no science is the basic list, followed by the childless or biology, chemistry and physics. This means that this list is no nested under the science list, So this is the nested lis. No leads make an other type off list. The last type of this we are going to learn today and this type of list. It's called the description list. If you are making, uh, webpage about displaying some terms and their meanings and their usage is, this description list will become handy because these description this have meant term and followed by a piece off text, which is the which defines our defines the using off the damn, displayed before to start the description list, we will add deal tags. Deal with stand small four description list after their dearly tags, I will add in the DT tags we defines in the description, term description term or the term which is which meaning we have toe enter inside the B D tags, which are description, description, defined eggs. So at first we are no using description. Off description, terms, decks these descriptions, rounds, tags, goes in with the dumb. You want to have the meaning off, so we'll dive in the term and it will be say anything coiled there is such as Golden cars, cause and no, I will use that be the degs these DD tax will have the meaning off the cars. So, for example, the D D tags would have Gars are for veered B. He goes. Which Ron on road? Pardon me if I have any spelling mistake because I'm typing for snow, I will save it on. Oh, there isn't spelling mistake saving and another one. Save it and no, run it. Well, I for you. And as you can see, the cars term has no an intended meaning or usage in front off it. So if you want to display you just usages or some terms in your rep ege, you can use this deal text or description list tax. That means we have the year tax, followed by DT tags, which defined the description Trump's tax, which the rich are enclosed by the term and which is followed by D D text. The description defined the tags, which are followed by these definitions off the term above. So I hope that you understood it all, and you will try toe, find new ways, are making less and having more creativity with them. So I will encourage you to go forward and have fun with these lists on. Try to make nuclear activists. And if you want to share those creative years with me and if you want any help for me, please see the coup and section below So see you. 8. 8 Tables in action: Welcome back, guys. So this time we're going to do some more fun and make some more visualize able text so that it is easy to render to the human mind as you can see that there many software such as Excel and Google Sheet which display tabular form off text. In this tabular form of text, there are tables created, which makes it easy for the human minds to understand the text and data in their tables. So the same is with estimates. There are many. There are many times when you see tables in a website, and so STM l allows us to make table and in the in er three applications. So this time we are going to do the same and make tables in the HTML file. So that's do it. So I have setter scattered up my file and named titled Tables. No, we will start making our table in STM in. So the first thing in making HTML table is that esteem? All tables are always enclosed in a table attack. This table tags all tag all this Thrones and html dear, but so we will enter the table tag. So it all the strong's every chord needed for making a table table tax alone. So after table tag comes there Table drawer tag No, before table group. What do you think the most important thing off the table will be off course its name. So how to make a name off our table? So the tag used for writing the name off the table is the caption tag. I would I've been caption and this caption tag is used to write in the table. So I will write in the tables name as marks or students mocks off students. Okay, Now, after the caption, we need to make rules off the table. So the first rule, the rule is made by E R. Tech, which is table row tag. So how the first rule? What does it need off course? It needs the headings off each column in the table. So that means that the first row will need the column headings. So that means that we need toe. Add some column heading stags. Unfortunately, fight on. A female has calling her dick takes and these column heading tags are called pH or table heading so D edge stands for table heading and our first table heading, uh, will be mission number. Or you can say roll number rule number off the student. Okay, It will be followed by the another had their dag all I'm heading tag. Wait. You be the student name or simply leaning After this, it will be followed by another th dag, which will off course at last. Give us the marks off the students. Okay, this makes us three headings. That means that each row of the table will make three Harding's three columns. Sorry for the headings. Three columns and 33 selling each room. So which means that another table role will be boiled. And in this table rule, we will use the E D decks DVD, which stands for the table that are tag in this table data the tag we ed table cells data. So Louisville right PD and the first data in the first cell off the table will be off course about the rule number. So what will be the rule number? Typing And it any number I'll drive in 123 Okay, I will dive in 123 And after that comes another dd. We stand for table data as there are three table headings, so there will be 33 table doctors. So the second table letter will be according to their second table heading, and it will be the name, so we'll type in any name such as Drawn offer. This will come last, but nor the least the marks, the mass of the students will be entered, according do that column number, which will be the tournament on DSO. The marks will be right and Brenda Marks such as 56 and this is followed by another table room you can create as many tables rose as you want it. It just depends on you. I'm waking, making to Table Rose just for an example, and make it for Make it Anything you like making Jake and let's let's make him a good excellent sprint. And given 96 marks. No, that's save it and run the Life Review connecting to the light purview. And, as you can see that are que buddies Mitt formed above. You can see the caption or the marks off the streets being explained below rule number, name and then followed remarks. Rule number 1123124 named John Jake Marks. 56 96. All what we accept expected. But the thing that we didn't expect it is the style of the table. There are no lines in the table. What kind of table is it? So let's aired some lines and make this table some more visual. Izabal and this all will be done by there by the tributes off table tag. So let's see what attributes we have in their table. The table tag attribute needed for the border off the David is the border attribute for making the border lines off the table. So we will enter one border control s it on delivery. Well, let's see what happens to it. And, as you can see with each said, we have a border to it. So that means that this adds a border to eat. Said Okay. That means that the board resided longer. Seaver else can. We do so we can all said and color background color to the whole table. So what background color you would like? I would like Ah, blue color. A blue color will be fine one. So let's try first, another type of border. Let's try a stew border, save it real or did, and the border is more ticker. So that means that if he increased this number, the border will get ticker and he was reloaded on the border. Gets more. Take it so it's like this. So now let's add the BG color. Like I said, you before the background color v g color. This attribute is vitally huge and many other tags. So let's use it also here. And I would like the color blue. Like I said you before I will save it on. Reload the page and you can see there's a blue color but I can't see the back color of the texted it. So let's try orange, whether so, that it will be easy to see you The text inside on I will reloaded. Yeah, Now it's easy to see the text inside it know ledge dry. Uh, sell spacing, actually viewed. So guess what this has facing attribute will do, and I will keep it a surprise Cells facing on in the cells basing. We ve learned a number off five 05 on Save it on. Run it. And as you can see, because off this bells. Cell spacing attribute the size of the cell increases. That means that the size and the spaces between each cell increases so we can also add in border together. Border color means the color off this border against each cell and against the whole table will also change. So let's at the border color of blue Butler. You can do blue on that's real or did. And as you can see, there's a blue color off each border, so we can also align the table dags table according just like the image. So for lying the table, we will use the same attributes like the table, like that image and in the table tags well and attribute. Align is equal do center, and as you can see that know the table, this central line. So this is good. But now let's do something as like if he don't want to add to different it table headings for name and rule number. What if we would like to add a single heading for both of these rows? A. Called the student details. So what we will do then? I tell you what we will do that even at a single table heading Gold Student New Days in the first table, heading student details. And after this student details, we will enter a column span off, which means that the heading will spend two columns, which is the rule number and the name Gold Span do. And so it will cover both off the columns. So let's re lorded. And as you can see in place off the rule number and the name headings nor the student details has taken place and cover all of the columns, and we have covered the two columns. What about if we cover all we want to cover more than one group? So for covering more than viral, we can also use the same attributes, but with a different name for column we used all sped. But with four row, we will use Rose spent and we can add and other table hurting because we want to use it for the all the rose in that in the third side, so real after ph or table heading and offer and bring this will enter the egg as, for example, if all of these numbers were from first, um so we will enter the first time having, and let's make the rule spent. Ro Spend. Attribute will be off to the is equal to T. I'd like three because they are a total number of three lows, the 1st 1 off the heading, the 2nd 1 off the first data rule and the 3rd 1 of the second data. So that means it means that there are three rows, so I want to cover all of them. That means I would like to add three rows, spends operator and I will see it, and I will re Lord and you can see on the fourth column afford column. We have the first from with the three rows span 1st 2nd and 3rd 3 rows it has spend over. So we have made a nice table with some colors in it and have added a rule spans and Golan signs. So I would like you to have a little creativity with this table tags and try yourself about some more attribute and some more. It dives off things to do, so I believe you here, and we will make in meet the next time 9. 9 Tips and Tricks; Indexing: Welcome back, guys. So this video is going to be the last video of this section. And as the videos title in this video, I will tell you about some off the tips and tricks off HTML which are used in the modern drink programming. I'm in the in these kind of videos, which includes their tips and tricks. I will add to you many off the conventional practices off HTML quarters around the world. So in this tips and tricks section, I will tell you about how to make your court more presentable so that you can easily understand it yourself and you can easily short you do anyone else even if it is your boss or anyone else. So let's open a bite on file. STM is vile and let's see how they're indexing is done in sdm is I will open the tables file in which we were recently working on a table a schimmel and I will right click and open with records. Okay, as you can see right now, this file is a lot off messy and we cannot understand it on you on your first look. And if you are showing this court to anyone else. You will also have difficulty in understanding the scored so whole. To make this presentable. Making court presentable also helps you yourself, making large amounts off court easy. So let's index discord, as you know, that this document or type is the basic STM L line tag in which every estimate file is included with it. So it will be on the first column, always on the first column. It is followed by the HTML tags, as the HTML tags are the basic basic estimate tags, which estimate elements which surround all of the HTML code. So this means that it is going to be on the first column along with the document or type HTML. It is followed by the head had come hurt. Eggs comes under the STM attacks, which means that it is going to be indexed with four spaces or a single tag. That means that if he enter forced uses, all this or a single tag this indexing would take please. We will. And that's that both actually had bags the same. The ending tag and a closing day offer that it is followed by the title tags. If you index their titles tags the same as the head tags. You could see that this is not the right place for it. It should be once more indexed because it comes under the heading tags. Often that is followed by the border tags. Morning tags. I have the same strength as the head tags and comes under Dashti Multex, so that means that it will be also indexed the same as the hair text. So let's index board the opening and closing degs, often indexing the body tags, we should index all the other things under it. The same. The table tags, the caption deck. So it is easy to start with. After that, after the body tax come the table tax. The's table tags are the major tax under the body text, and they come immediately operate as we are making only a single table in this ask TML file . So as X strengths come after the border tag so the table tag will be only once more indexed after the body tag. So if you index it once more and ending tag also and save it often, the table tag you can t that the caption tag is there it is under the table tag as it is, the name off the table attack defining the name off the table attack. So that means that it should be indexed once more than the table time after that comes a TR TR tag is the same as it is on the same level as the caption back as it comes under directly under table tax. So that means that we will inducted the same as the caption eggs all that er tags. After that it comes or th tax. They will be indexed also once more, then the T R. Tex because they come under the TR tags. The same for all the others, the art absentee and then the teen eat eggs on. We will index them all on the same level as they are import, appointed for and once more re checkered. That opening and closing tags are on the same level. No, as you can see that this court has become much more presentable, and with each indexing, we could understand the bags important and strength. In. According for example, this line off board is the least in the strength in the HTML code. Often that comes or TR tags and after often that the table tax followed by body tags. So through this indexing, it is what much more presentable according it does. Helping ourselves. Understanding our court easy and making larger amounts, of course, is also becoming easy. So this is the last woody off deception, and I hope I will see you in the next section in which we will jump into the CSS and HTML according, and we will combine. These were both languages together, so see you there. 10. 1 Starting up with css: the problem we had here for the small spelling mistake that I made it up myself so that you could understand the importance of writing the right cold. So the problem was here in the herff attribute, which was, I type it wrongly and replaced the place off even are so it should be r e f inside of e. R. So please correct it. And this mistake kinds of mistakes are very troublesome sometimes and discourse all off your corporate Sure don't. So please remember to always right the right spellings off every attribute as it can cause major polo problems many times. So I will save it and I will run the life review. And as you can see this time, it appears the right court the right styling. So this means that we have done our job and we have tried three different ways of writing. CSS scored 1st 1 was writing inside the tags itself, by the style attribute. The second was writing inside the head tags had her tags by the style bags and the third balls writing in the main door CSS and linking the man door CSS to head as ash TML gored by link reference. So let's see you in the next course. Bye bye. Welcome to the new section, guys. So in this section, we are going to learn about the CSS. So what is the CSS CSS? The cost getting style sheet. This is the full form of C S s. So what does CSS do? We learn from its name that it is a styling shoot, which means that four STM l it works as in helper and helps to style the HTML pages in various forms. It helps to make us beautiful templates off html, just helping toe make and create many, many different kinds off beautiful that pages in the voil off web, which we see around today, so work harder. CSS works. CSS is a simple language. It it is not a language but is really a style sheet. It works at unhelpful for us TML and provides styling to the HTML tags. E chest humor tax could be boiled in tow, the CSS and and the CSS in return styles each off the HTML tags in various forms so hard it does the CSS style dust humor tags. You learn all about it in this section. So I first I think that this is important to learn harder holders. CSS works along with HTML There are three different ways to run CSS along with HTML. The first is in line CS escorting Second is internals. Yes, escorting and third is external. She is escorting. I will type all in so that you can remember it first. Is the in line CS escorting So what is in lines? Yes, escorting in lines Years escorting is done in the HTML file itself. It is done by doing uh attribute in the HTML tags E J html tags and has an attribute called Style. This attribute, called style, helps to call CSS and in the STM attacks allows toe make small changes and small stylings to our is Deemer dags. Second is followed by internal CS is according so what is internal C'est escorting interno internalise? Yes, Escorting is widely used among small scale webpages. It's so why is internists horse internal CS escorting used internals? Yes. Escorting is done inside Ask gm a good in itself, thus making it the same as in line sees escorting. But in real it is really different from in 90 s escorting, for example, internals years escorting is done inside style tags in the heading portion. All of the HTML tags, which you're going to style, are chord in the style tax. And where there are style, this third type off CS escorting is external sees a scolding. This type of according is mainly done in large scale Web applications. This year's escorting is used. Then we need to make large CSS stylings. In this year's Escorting, we make another special file for the CSS. Chiesa scored, and we call it by do the STM l by a link, and all the CSS scored is serving an other file from where it calls the HTML tags and stylized them. If you don't understand all off it, don't be very. I'm going to give you practical demonstrations off it all. And if you don't it learn or have not understanding this, you have difficulty understanding the CSS scored. So then not be very because I'm going to tell that all. So in front of me, I started up as some STM accord. Which two tags one is as each one decks. The second is the paragraph Tex. So we are going to stylized these board tags. The first way I told you was the in line CSS styling. So in last year's, a styling means that we need to style h one tags in the tagger itself. So I will call the CSS attribute, which, which is the which is the tribute for all the elements in HTML. So I will call in the attributes style. This style attribute helps us to call in all the issues SS stylings in the tagger itself. So if you need to make small changes in the styling, you can do through these style attributes. So if you want to change the color of the text, we type in color and Ben people type in any color, for example, Blue and I could save it. Don't be very if you don't understand the syntax or the AC tributes off the CSS, I'm just showing you how the CSS works the three types off CSS workings, so there's no need to understand all the color and the properties off the CSS styling. So I will learn, Ah, run the Life review And, as you can see, the home page tax, which is inside the H one tags is no colored blue. So that means that the style that tribute works and we can do CSS styling in a lyinto Now let's But I is the styling through the heading as Denali have been using only one bag in the head. It is the title deg No, let's try another tag off Heard, which is called this CSS style leg. This style tag is used for CSS styling. I will right diving this style eggs, and I will now for running style tags. We will call the HTML elements over here, So let's call that each one eggs element and give them a styling. I will. Color is equal toe blue. No, I've been I've been the blue color Or let's just use the hex formal off writing colors. I will type in a 00 F and 00 I hope that you have done some creativity. These with these hex colors, and I will save it. And now if I go there, Andi reloaded. As you can see, before it was blue color. Now it has turned to green because the center two zeros, or abs, are used for green color. As you can see if he I place it on the records. It also shows a green color. So that means that it worked. No, Let's also called the paragraph. So I'm recalling the P tags, and I will also, uh, stylized it. Let's make the foreign size off it bigger. There's not not any need to remember these properties off style exit all. I will explain them to you along the section. Just see how that these trial tags work inside the heading tags off the esteem. L cool, it says. And as you can see, the court has being smaller than before as it has going through 12 pixels. So that means our style attacks were very good. So that's your on thinking that you want to use the style, attribute or style tags style. Attributes are most commonly used when making and small changes to style izing, where a style tag are huge when riding large in Port Harcourt. And if you don't want to input, CSS scored right inside your STM according and you don't want to make it too much messy so you can make another CSS file and link it to the HTML so that the style izing it could be done remotely so I will remove them all. I will remove them and no, let's make our styling remote remotely, uh, to make us telling remotely at first you have to make a CSS file and I've already made ID the CSS violent. The CSS file should be in the same folder as index dot html files. So I will open the main door CSS file and in the main does your SS file. We will type in this year. S a school the CSS scored Will be good is the same as the typing off This year's scored we done in the style tax as the style tax give the same environment off warding off Ashtiani CSS as an adult CSS file would. So I've done that. I would save it. Now we need to link these boards industrial html and made those CSS files so that the main door CSS score do styling to in death's door testimony. As you can see, if I run the life for you right now, there would be no style izing to the text as there's domain is don't know CSS according there too stylized, so envy in you too link the investor STM fired two main door CSS file. So how will we do it? The first step is to make a link tag so hard. Does this link tag work these linked at work by adding link through the main door TSS file . So we were type in the tag Link link bag and after typing in the link tag, close it so that these others get removed and inside the link tag, we will die. Penner's attributes which you do the main work These attributes the 1st 1 we need to type in is the relation attribute or the R e l. A tribute for short and this relation attributes help us toe make a relation between in Dr Castanon and Main Door TSS and held as Deimel Gord understand that What does this man guard CSS fighting meaning to us your typing style sheet Which means that this man Darty ss file will be a style sheet for industrial test email, which means that it will be style izing that industrial html file for it. So we have made a relationship now how to access the 1,000,000 daughter steamer filed for exact singers we need toe at first based in the the part off the main door CSS file as it is in the same folder. We don't need toe based our whole file part. If it would have been another folder, we would need to face the whole file part. So right now we will just type in the name of the main door CSS file. So paste the link off the part. The name off the attribute is hers at T Adia, and this attributes is also used in other files. Other tags which excess like links to other files and hyperlink sex sector. So right now we are using it in the index dot html If you access the main door CSS file. So in this attribute type in the main door CSS name and I would save it. And now electronic. And as you can see it, no style izing is done right now. So why is this? I will let's look at our record. So as you know, that there are many small problems. According that could goes cause major problems. I did this error myself so that you could understand the the importance off Hard to write the most simple but the good and always the right chord 11. 2 Css Syntax: hi guys. So let's start up from very left in the previous video. So in this video, I'm going to show the syntax problems off CSS and how to cover them up. I'm going to show what hardest syntax off CSS works on, how to make writing, court and CSS and further easy. So in last video, we if faced in error, which was due toa shtml, the wrong spelling mistakes this say there could be many others occurred with. Then we entered wrongs and tax in CSS, thus causing the same result as we have seen before. So how to cover up these CSS problems? So let's see for covering up this year's is problems. But first we need to know the CSS syntax totally So. First we will see the end line ceases contact Syntex or the CSS Index inside style attributes. So let's jump into the style attribute. I would die but inside the each one and for no, I will skip this link tag for no so that I could work with this trial. That review gone so I don't want to delete this link tag, but still I want it, nor to run. So what to do here. I will mark this link tag over here. In s comments these comments in and there could be in any programming language are not run by the interpreter or compiler as accord. They're left as they are. So the same Israel s TML and these comments are not run in the browser. So I will type in a comment, and it will be this mix a document. The thing is, the greater sign the the notation sign and then two dashes and for all the following cord is turned into a comment, as you can see by the change off the color. So how do you cover this uphold nor to make only this line a comment you need toe dive in the ending comments, tags also add, and the content inside the comment tags will be automatically commented. So how do dive in the ending command tax? It will be to their signs and a greater than sign and then save it. And as you can see, the color, all the board has returned. And if you see the light prove, you know you could see that North styling has this time occurred. So have you close it and no, let's jump right into it and I will live in the style attribute after and that I will type in is equal to earn the speech moth. And inside these speech marks, I would I've been all this year's a scored that will do the styling. So inside the CSS Gord Yeah, voting's. The first is the declaration. The declaration, or often styling is done inside the speech marks off dial attribute so hard as a declaration Works declaration has two parts. The 1st 1 is a color. The 1st 1 is a property part. Sorry for the other. The question is the property part and the 2nd 1 is the value part. And after that, to remind the CSS that her here the declaration has closed. We need to add a semi colon. This marks the ending off the declaration offer that we could also start another declaration. But here this declaration has ended. So the first thing in the declaration is a property. The declaration. It defines a styling in the tags, so the property is the type of styling we need to do. Either we have to change the color or the foreign size or the foreign style or the borders . It's up to you. So this property element property element off the CSS Declaration defines it, so it is against the property. We have a venue. The property's value affect the DYP off tiling to be done. For example, if there is to be a color change due to the property, then we need to undervalue off what color tin there is to be either the college to be changing toe blue or green or right or whatever it is. Or there is to be a size change, either. It it is to be 30 percentile size change are either. It is to be in pixels off nine pixels or 12 pixels. So let's stripe in a simple property and it will be a color property. There are many types of properties in CSS, and we will learn about it in the future videos. But for now on, you need to focus on the syntax off the CSS, and the color value will be will also be related to it. If you type in color and the value it will be 12 pixels, it will be obviously not making sense is a sense at all. We need to type in the property against the color if they're needed. New tribute Well, pixel changed and there should be no nor the property color but the size property off the text. So we're type in blue and that makes sense. No collective it and no, let's go and run it and see that if our syntax was right or not. And as you can see, this is turned to blue. So in a style attribute, we can end more than one attributes. Also declarations also in the style attribute. For example, I will add another declaration for just for an example, and in this declaration I change the foreign size off the text and I would have been formed sighs, and I will type in the columns. These Collins separate the property from its value. So before it comes the property and after it comes the value and I will type in the value off, let's say 12 p x well pixels and he extend for pixels. And after that to end the declaration, we will type in the semi colon and now will save it and run it. And as you can see the left has no turned smaller the as it has done under assessment or 12 pixel size. So I close it and we have burned the style. Attributes in text know Lexi horrible the style tax in Texas, So I will believe it from it. Here. I really do eat it. Save the cord. The problem on I will learn style tags and in the style bags I will learning some of the CSS food. So how do? Etc. Issa scored inside style Tex What will be its syntax? So inside the style tags first we have to call the dad. We want to change style off. So if you want to change the style of age contact, for example, we will call the H one tags inside the style text for calling it. You will just type in the name off H one and then we will add some caliber asses and then in the curly braces leave it type in the changes we want to make and the same as this style attribute. We will added it changes the same way. For example, ve vill here at first maker declaration. In this declaration we will have a property and of value. For example, the property off color the same as the style, attribute and then in the other property of a type of value against it off blue color and knowledge. Save it. But don't forget to type toe end the declaration to mark the ending off the declaration and to mark ending off the regulation, we will type in the semi go. It is the same as in the style attributes. So be a mark ending over there. Declaration is so that means that we have called the H one tags over here and make a declaration off changing the property color to blue the value I would save it and run the life review. And as you can see, it is not changed to a blue color. I close it and now in here we can call self several bags together. So in the same style tag, we can call several tax. For example, in the same style attack, I will call in the peat eggs. I'm going to beat eggs and I will right a declaration for it. For example, left changes size foreign sighs. If you don't remember these properties, don't be afraid of them. We will learn about them more in the next lectures. So in the foreign size, I will type in the side. I want changes to I will. Right. A big size off such defects cells, for example, And end with it it with the semi colons. I will save it and I will go to the library in Run it on. We will see that this paragraph word has no turned into a big record because off this 60 packs pixel value. So this means that they love you, understand? Understood the syntax, off style attribute and the style tax How about the main door? CSS file Syntex How about making and others another special CSS file and the CSS Courts Index inside. So I will do this all on, See if it I will. You know, the style, jacks and the real fruit over here. Is that the court? We right inside the style Tex and the court inside the main door CSS files have most in tax changes because the style tax provide the same atmosphere for the CSS scored like the main door CSS file. So if I even if I copy carton based it over there they will run almost fine or not almost but readily. Fine. So I would make it more visualize able I would save it. And now I will go to index toward estimate file, save it and run it. And as I expected, there we have not got any styling and why I expected that. Because as many off you have known that are linked AG still inside these moments. So we need to remove these comments three years link pile and no save it. And if he no boy real ordered it's even style before we loaded it. That means that our main door CSS file is working fine. So that means that the same syntax we needed inside the style taxes needed for the main door CSS files. So that means that we in this lecture we have learned about the syntax needed for running the Smith, the CSS scored and CSS style attributes, and CSC's as s style tags. Fine. So I'll add last have like to tell you that this link tag is most important thing. When running on external may endorse CSS file, we need toe Adan link tag with the right attributes and with the right values off each other tributes. And if these values are wrong, the Army and off cases filed with North run task, causing our core to crash. So please learn these link and its attributes by heart so that you don't have any problem further in the inside, inside the court, violent typing and CS escorting. So Earth's enough for this video and we given me together in the next year do goodbye for 12. 3 Acssesing html tags inside css: Hi guys. Welcome back. So, as I have been stating from many previous videos about calling is the HTML element into the CSS court. So what is this calling HTML elements? The's calling means that when we provide styling to the HTML elements in the internal or external CS escorting, we called HTML elements do we need to provide styling, too? So this stichting could could be done only if he called the right STM attacks. So let's see the simple ways off calling. Since thes tags in Buddha style death, there are many different ways off calling these add dimension to the style tax or this may endorsed uses. An external sees a spoiled, but I'm going to tell you a few for them, the major ones that are used today in the modern world off CSS and STM. According so these file calling methods the 1st 1 and the simple one, which I have used from the last two radios Waas calling the element by its name bite stag name. So the tag name edge one I will call it, and I will certain attributes off color to it quickly so that I could get to my point Let's give it back one. Save it. And if I run it, you could see that this H one tag is no colored in aqua. That means that this is the most simple way off calling these tags to the style decks. So if there could be many other possibilities in a camel cord one writing large webpages, for example there is a possibility that if we were writing more than one each one headings if you were writing to off them and this that's home best. And if you were writing two of these h one headings and we didn't didn't want it, the 2nd 1 is second H one heading to have a color off Acqua in place. We wanted to have a color off Fred. So what we will do then? Because this calling this a German tax bill journal generally changed all of the age Want eggs colors to echo. As you can see it here, I will run the life for you. And as you can see that both off the H one tax text has no turned in self into ECU ocular. So how do Contra parted contra? Part it? There are two ways the first way is setting about the loss. So what is it? Loss glass is a is uniquely defined element inside at reboot. Inside the tags it would be any name. And it could also be used more than once inside an HTML tag, for example, HTML code. For example. In this h h contact, every type in the class attributes the last attributes and I will type any name to disclose her to do, for example big I would save it. So this class page is Naga. This page name is not given the name to this age contact. So the class of is this a judgment bag is no given the name page. So if you want to change the color off this tag on the this dad with a class speech, we will call the page page name instead off the age contact which will does help us to affect this tag on the and saving the staff from the changes off the styling. So if I all the page and save it and runda that review, there should be no change to the home page text. Also, this is because I expected it and I'm aided this Erin myself so that you could remember it all over that in your whole life, that this violent Bring this glass into the style Tex you need at first to make it known that to the style tags that this is not any simple a dag name. Or rather it is a class name off an tag inside the scored. So hold to specify this, this will recess specified by our daughter in front of this page obeyed declaration. I will save it and I will go and run it. And as you can see this time, the hiding us turned into the aqua color. So that means that the class that works fine. So I said that there are two ways off doing this. So what is the next way then? Another way is by making an attribute just like lost i d. This attribute is just like loss, but has one single different that might it This different Meyer Street. It seems small, but is really big. I will show you the difference in a moment. Know Lexi all the I d works I d works the same. Mostly like the class you dive in and special lady, and it could be anything like ABC A, B, C. I will save it and novel called ABC. I will call the ABC I D and in this ABC idea will in the color so that you can see the change prominently red. So my goal in their done and as in the page calling when I specified this as a class with the help of her door, I need also to specify that this is an i d. With help off some special corrector and this special correct reason. Hashtag this hashtag defines that this calling is often a special i d. I will save it and now I will run it. And as you can see this time, that color off the home test, which had a special i. D. ABC has not changed to read because I called a special i D. ABC in the color red in the style decks. So what? I was talking about the difference between the class and the page. So what is the difference in these two things? No. Let's, Let's tell you, the difference is that the class could be assigned the same class name could be assigned to any number off bag inside an STM, according, whereas the I D should be uniquely assigned to each STM attack and no other I d. Often tag should be the same. I will show you example in a moment, and you will understand it all as if I would be and based it exactly in the paragraph tax and save it and know this better get off tag has the same glass last name like the H one tax. So that means that when the style tax will call the pitch class, then thes both tags will because it will be stylized, the one tagging the P tax. So let's see that does it work? And now, as you can see, these boards have turned into a neck walk other. But this is not the same case with the idea. The I D should be uniquely inside among the all the tax. For example, if we hear I've been the same mighty as in the Edgemont Bag A B, C I. D. And let's see of it a knife. I run the Life Review And no, as you can see that this has turned into a red color so that means that this has worked. So that means that these both glasses and I d good work and more than one one tags. So through these boards, we can help calling one more than one tag class off the another advantage off these both class and I d is that if he defined this also at ABC But we want to call her differently, and so we can use it as door ABC because in front of a clause, there should be a dart and save it. And if I run it right now, no, it will be the same dessert because they're the class and the i d are different. And so they have different style izing on them. So this is an advantage of having two different times of idea and classes. So I hope that you learned a lot in this video and we have enjoyed a lord, and I hope that we will be along forward and we will learn more many new things. So this is Ah, buy from me right now and we will meet in the next 13. 4 Stylyzing the text: Welcome back, guys. So from last many videos we are getting an introduction off CSS the cascading style sheets and we have learned about it. Syntex in HTML. And how does it work together? Reddish Yemen. So now it's the time to get practical with CSS and learn some offers, declarations and properties. The number one thing that we write in HTML is there text so style adding text in CSS. This is the topic today. So how this style I CSS next? The number one thing that we also the attribute that we also learned inside the HTML waas off foreign The same forint is no is also in property off CSS, and this front allows toe make different kinds, off color changes and other earned size changes. Veras. There also border padding margins, Lecter spacing, text decoration and many, many other changes. So we even get a deep dive about some of them to the so that's do it. So I have returned some HTML according to save your time. And no, we will add some touch tags so we could do style izing on them. So the first text tag I'm going to add is the H one tags each one, and I would write in it. CSS next. Stay lazing offer that I have learned and better get off bag just for breakfast, and I will type in this through day. The we'll learn. Do who's Tyler? You can type any text you want for yourself. I'm just typing in simple next. So we have been in the body tags, some touch tags? No, we need to entrant the CSS. So we will use the CSS, as I stated before, inside the heading tags. So I will use the CSS inside the headings tags right now, and I will use the style tags. As we have discussed before the tags. We usedto Dr CSS inside the head bags. So in the style no, we will do the style izing off these to test checks. So the first declaration we are going to make is for the H one tags. I will call the H one tags over here and type in the curly braces inside vis Dick declarations goes. So the declaration we're going to make is for changing the forint off these text. So let's change the forint off their text. The first way is to change the color off the text. So the retyping, the color property off CSS and I retyping any color I want to change your toe into I will type in red color. Sorry, Red color. Okay. In this in the changing off forms, we also have a foreign family property. We changes the forint style off the text written in the stacks. So let's send the foreign style. So the properties foreign family formed dash family and the property that will go inside it will be eyes. For example Korir. I've been diving the courier foreign family and the mistake I made in the first declaration was off course that I didn't have the salmon calling our dined off it. So I realized the semi colon because every declaration finishes with the summer calling, I would save it on third. The third property off Kenyan foreign is a force of foreign size. So let's hard the foreign size property and if you brackets also give us an very important feature that if you type in half a name, they will show the properties that have names according to it. So we will try to find foreign sizing it and here is this phone size, and if you click it, our test will be automatically completed. So in this foreign size, we can type in any percentage. Off text at this percentage will be according to the height off the original attached. So I will live in the percentage let's make a 30 person and so at this point, are formed. Changing off the text is completed. No left, save it and have a life review off it. And as you can see, the H one tags were converted into 30% off its original size, so they are too small to be seen. So let's make them a little baby. Let's make them 1 50%. No, let's see the lie preview. And as you can see, there is a foreign gym for our family change and the most in the H one tags and the red colors also made red, whereas the foreign size, also the month 50% or 1.5 off the original. So let's go on, and we have done the forint styling off this H one tag. Now let's go on and change its borders. No, that's hard borders to this next we have done style izing on the H one. Let's do some style izing Luppi tax we, lad Pitak, be tax and make a declaration so that we can add borders to the P tag. So the declaration for changing the border is the border property, it says, And I miss tiebreak. So I discovered right on. As you can see, the border properties also given by the brackets. And so the border property has three parts. The first part of setting up the border is the size the size off the border you want across their text. The second property is the type is the type of water you would like to have. Either it you want it to be solid or double or dotted anything you would like their number off types of borders over there. And the 3rd 1 is the color off the border. You like to head? Okay, so there These are the three types. So the 1st 1 is the size. The size will be written in number of pixels. So I really type in the number of pixels. Let's make it 16 pixels. For example, I've I I've been in that random number and the type type range from solid solid you also having don't but type off border. We also haven't darted a poll border and add the lost We have a groove April border. So I would like to use the double border And I would also like to have, uh whether Kenya and let's make it some exciting gether. Make it blue brother. I like the blue color and I will save it. Go on and run the life review. And as you can see, their double blind double borders, first border and the second border of blue colors. And because the size of 16 Excel, they are so large let's make them smaller and make them for example three pixels and I will save it. Run it again and now they're much, much better. So this is the way we add borders to CSS on the text. No, let's try another CSS property and I you right also on the text. Ah, there be a paragraph text because this property is used on the ah actually have border on. So this property has to give space between the border and the text. I did just show you what I'm telling you and you will get diary offered. So this property is the padding property padding property, other type in the fighting property and every type in, for example, 15 pixels, 15 peak souls and I will type in a semi colon and I will save it. And when I run the life review, you can see yourself that they are increasing the distance between the text and the border cells. So that means that a padding, which is the distance between the text and the border, is that it would no. So this means that are border is not making to look nice. No, Lecter, margin off it. As I would show you again, the border s I made just made. You can see the distance between these two texts and to increase their distance between these true text, we could also add in margin a modern property. This increases their distance between the border and the text outside the border. And I will make it next 50 pixels so you can get an I d offered and I would save it. Run the Life review again. And as you can see, the distance between the text and the distance between the borders off the Web Roeser itself. Or you can say the body off. The Deimel itself has no increases, so that makes the border and the text or borders off the Web browser outside increased. So we have the Lord off styling with the borders right now. No, let's trying some other stylings. They're Stewart on the H one tags in the ancient tags, normal ad and property Call Lycra spacing. This letter spacing property increases the distance between each like a word, a certain in the X tags, so I will type in any number off distance. Let's make them 10 so you can get a better idea. Offered the battery difference of it and now run it. And as you can see, the distance between each lacquer has no very much increased. Do you do this letter spacing property? No. Let's try another property, and that is an intend ation property. So this Internation property is very much used in eventual writing big paragraphs, and you want to intend to your tax text a little bit so that you can mark the starting off the paragraph. So let's add an Internation. Do it and it will be there. Intonation, property. So the name off this Internation property is text in the end. And as you can see the indented there and you can have been any number of pixels you want, I would like 50 pixels or 56 other too much. Let's see 20 pixels and see the difference are into the semi colon and see the light preview. And as you can see, the distance between the border off the Web roser and the test has no increased. This is due to the that's indent property, so let's decorate our text a little bit. No, what property is used to decorate our text, Their property that is used the deaths, decoration property and that's decoration. Property is like many bags we have used inside HTML because it has thes properties off line through line through means that the need to put a line through like the strike line attacks off the HTML. Ah, and another property off the Death Declaration is the overline property. This causes the airline Toby made over the text off the each one and the last property, which is using it, is the underlying property. So let's see down the line property that does it work. I would save it and run the life you. And as you can see, there's an underlined in this CSS text tiling off age one tags. So let's see, the last part, nor the least this one is the steps shadow property. Andi, I'm myself things that this is, Ah, fun property on this makes or we look text Harding's looked really good and this properties especially made for Dutch Harding's. So now let's they, uh, was death starting doing great to put that shadow for all over itself? And I know I have to h one from our tax. Like I said before to differentiate between two which one experience at the Kloss a tribute to them so that we can different hear them in the style CSS tax. So I will go all this los x y z and this one above los uh, ABC. So I will save it. And now I would like to make these changes with this this test over here. So I would like to wear replace these age one times with Door X y Z, which will all this class a tribute and will access this text over there and to make innings to this h one tags. I would like to call the dot ABC in the style to make endings to the first. Its horn degs and I will die in some texture in it. Testing shadows. I'll save it. And in the daughter, ABC, a very major declaration off that shadow and the texture. The property is the tax shadow, it says. Next shadow and in the death shadow property, we have three values. The 1st 1 is this size off the deck. Original text. The 2nd 1 is the size off the shadow of the test, and the 3rd 1 is the color of the shared over text, So that shadow the number one. We'll dive in three pixels. Second, we also type two pixels because 2nd 1 is also a size and Thurman, there's a color. So we're type in red color on I would save it. And if I run it, no. And as you can see this yes, shadows H one tags made with some shadows to it so you can change the color of the shadow all the time you want, and for changing the color off the front text. You can call in the color property on changes to, for example, Aqua and I would save it. And if I run it? No, you can see that the color the foreign text is also changed. So through this shadow property you can change many different things and make your That's very much stylist. I hope that you enjoyed this video and we'll meet in the next video and we will style, eyes some other things through CSS goodbye for now. 14. 5 Stylyzing list: Welcome back, guys. So the last time we discussed about making style izing to the text off html text? No, This time we will strike lies. HTM A list through CSS. So let's jump right into it and stylized East year melodies. So we have industrial HTML open and I have already made to list for you. One is an a northerly list you a list like you should remember and the second is and ordered this ol list, as you should remember so and also soared to write CSS in html code. We need to put this style attacks as you should remember from the previous videos. After riding the style eggs, you type in the styling declarations by calling each off the list. So the first the property I would like to share with you is for the unknown order list. So this under on order list property score is first or done by calling the U. N. Or the another list. And, uh, she s is I would call it over here and and this the first declaration I would like to make is to change the item marker or the market that shoes that each of the distract him by changing it. We also change in inside the HTML, but we can also change it inside. This yes is. So I will tell you the way. The way the property for changing the marker is list and dashed style dash type and the There are many kinds off markers we can calling the, uh, the 1st 1 you can use the U. N tags and for the your bags. The most prominent are you usually the circle the disc and the square ones, so I will use their disc one. Let's use the Circle one and I dive in the semi colon and save it. That's weight. And as you can see that, no, there's encircle across each of these this items. No, I will go back and call in the order list to style, eyes it and add and change its markers. So the same properties for the order list style type and here we can add some of the other kinds of the street here that our upper Roman Upper Langton operable for upper lower Roman lower Greek. Let's use lower Greek just for testing, because it's also new to me on and as you can see that we don't know numbered by the Greek Isles habits over here. So this is quite amazing. And no, let's go back and see some of the other properties. Another property is to make an image the marker off each of the item off the list. So how to make an image? A marker off the list. So to make an image in marker off A list the ways to all the list style image property. As you can see, it is also in the street here in the bracket and for calling the image inside this CSS so that it could be Porter inside the markers off the dags, we can use the u. R L value This you are, and value brings in the image for you for the CSS inside the HTML code so that the item market could be changed. So I haven't pick underscores you. Don't three your door J back in the same folder beforehand so that we can use it as an image marker. So I will die Britain. And the thing to remember over here is that we need to type it in inside speech columns, speech, court, you can say And our Dan, we learned the semi colons and I will save it. And if we were on the life of you, you can see that is your tags are nor place with an image martyr. That's fun. All right, so you could go back and this image marker couldn't be out to order list because there it would make no sense as the orderly, always having numbering to it and image could not brain pride numbering Buddha orderly stacks. So if this good style, I think you know, that's do some other strategizing. So we will. We can also change the position off each off the marker inside this that grows there. This changes the user experience. As you see right now, this if this thing these Marcus over here are outside the reach off each of the test. And if I highlight each of them, you can see that they are not being highlighted because they're old side each of the text this out, making them outside. Is there default property off the HTML so I will delete them. It's Megan more proper. And to make them inside, we need to use and position off list marker and it in the position off the list marker and its properties. Less style position. And don't the old side value is the default one, as I showed you before. So let's try out the inside one. I did having the semi colons, and as you can see, that these markers are moved further away from these markers were still outside the text. And if I see if you can see them that these markers are for the road than these, this makes these markers a little bit. Move inside the text itself. So this is good. And now we will if you want to remove these this properties and you don't want to make the user see that there's an list at at the moment at the closer so you can use property. Andi left use inside. Sorry, sorry. Sorry about it. So let's use it inside the U. L tags and lead it because it would not make any sense that we are giving it also style izing, whereas we going toe remove it. So we remove it and list style again on in this this style. Really, lad. The list style type like we have done here by list style type. We will change the marker. So we've been approaching to not make the user see that this is a list. We'll change the marker and make it equal to zero or nothing so well, I've been none, which is equal to nothing. And if you see here that there's no that's list markers over here anymore, that means that they removed. And these lists also have a padding to them and margins through them, so that causes their this stuff to move a little bit over here and away from the that brother boundaries. So to also remove doors, margins and beddings we will make is modern and bedding to equal to zero and beddings close to zero. Save them and around the Life Review again, you can see that know this list is behaving just like and text typed as no, there's no panning over it, and it's close to the Web browser boundary. Ah, in comparing able to this with just over here, So no lets you want to another property, and this property is to add colors to this list and make some them a little bit colorful. So let's make you know down there to the original position and it is returned and all of ours let's share some color food. So make it outside to make it like the original one and all that said some colors to both off the list and make it some more visualize able. So that's ISS for the 1st 1 Weird colors. Buddha with a northerly list be lead in the background color, the both for both off the list. There's the same name off the property on the background will be. You can type in any X number on end and where you want. I would. I've been f f like 999 this four. Simple on I added one more nine, and that could have caused errors. So please go on that these digits over here should add up to six, not more than them. And no evidence. Life prove you it. Andi, As you can see. No, there's and cholera added to this list. And let's also have a padding. Good. As you can see, that discolor no very much close to each off this a list item. So let's hear the padding and make the batting 20 pixels. Call us on. I reloaded. You can see that there's a pairing I read. No. And the distance have increased between the color boundaries and list items. So let's do the same with Oh, sorry, sir. I think I've learned something wrong. I make it 20 pixels again. Sorry for this. Cruel. See it? Copy it and go inside orderly stag and faced it. And now let's change the color for the order list so that we could keep up with the difference of it on you Need a collateral daughter list. Haven't make it CC e five. If so, I've added a tax number. As I told you before that hold the X numbers are made. So over there, the parting off five pixels for it just to see the difference. I will save it on If I run the life review, you can see that days. Ah, proletariat also know because I decrease the a side of padding and I made it the postal position outside. Know this Markers are not included inside these colors. So if I believe this and I save it and on the life of you again, you could see that Dale moved at that Everton and I. If I increase this 20 pixels. Oh, sorry, big sudden savior. I think I have decreased the size off it. Andi have settled the size off it. And if I save it and reloaded, you can see that No, because of increasing adding size, it has no appeared inside, so I have altered on it. And now I was move forward. And now let's add of different colors to each off the list items inside. So to do them, we have to call each off the list. Items inside these child tax on for calling each off the list items we'll call first. The jewel tag. Your tag will be called so that we can specify for rich list. We can't really need to call the list items on. Then I will call the district, um, off the jewel tax ally So I will and recalibrate brackets on evidence, making it to each off the bagging on each background, and I learned a background color to it off. You can say bag around you don't say Let's make it a little bit about this year so that it could be fun seeing the shade properties over it and now that's appreciate a little bit by Let's making it 66 66 and let's make it a If I it's a little bit doctor and all. I wanted to make it lighter, but it is no that will be doctor them before on if I run the life of you no before running like for you. Let's also had a margin to it so that it maintains difference between also between other and destroy items so that we can see each off the discolored colorings far apart from each other and feed their difference between them. And I will add five pixels. Save it, never run the light preview. And as you can see that now, there's in color for each of the list items. So that's truly amazing right now. Got a beard? Is it for the order list? Oh, on all that's try to maintain the same share. Onder. Let's make it. I'm a little more like. So, by increasing the number, you can make it a little bit more lighter. And if I see it right now, it is close to wired right now. And as you can see, if I reloaded again but see that this is a pinkish color and the police added to each of them. So in this video we learned all about the adding list style izing toe STM a list and we learned about coverings and giving background colors and having margins beddings off each of the list items. So I hope that you enjoyed it all and we need in the next video. 15. 6 Stylyzing table: Welcome back, guys. So lost and we met. We were doing some CSS list and just like we learned in a CMA after the list comes to turn off tables. So today we will do table style izing in CSS. So let's without wasting any time jump right input I've already made and table for you all so that you can understand it. Just give me a moment so that I could make it more simple and easier table. So I made it a simple table. So let's run it so that we could get an idea how they really is made. This is a table made on, uh, it has the STM is studying, nor the c s a studying. This is the same table you made in the STM l video I have copied and pasted here in this HTML file. So let's remove the HTML is styling and heard some CSS striding. So I will remove all of this, a steamer heading from here, and I will save it. And if I run it again, you can see that all the stabbing as being removed there are not even any lines off borders over there, So Okay, we have Run it. No. We need to add a style tag in the heading on the I at it above the title tags Start of Dag uh, started tags first of all, all day table. So in that German in CSS offshore for the human in CSS when you want to attach some off the properties or declarations to more than one tag So that s O, then you can call more than one tag at a time. For example, if you want to add borders, do did Labour tag the d. R. Taggart th tags and the T d tax because we want all of them have borders like we had done before. As I showed you, first of all, when I still must adding was there. So we need to call three off them that table. No, you call the 2nd 1 I would add comma. After that, I will call the 2nd 1 Yea, stag, the table heading tag and the tournament that Tedy tak the table data dig and novel open the calibri asses and inside the calibrations, I will make my declaration off border. This border property makes a border around the table and in this board property. I would like to where our tree tings. The first thing is the size off the border. Or you can see, say, the width of the border worked over the border size. Sorry for the spelling ridge. Second is the color. This is the type of the border on the 3rd 1 is the color of the body, so you can make changes to any off them. So first of all, let's start down over it. Let's make it through pixels. I could be any day that we learned also before when we were style izing or text. So let's had type from there. And let's start, huh? Bore draw for you. Consider Dr Border. So we've got a doctor border over here. Your e T e d. And after the daughter border, I would like to wear the color and I have named because there let's name it blue color and I will save it. And no, if I run it inside Life Review. You can see that days, nor Doctor Bone relying along with all of these headings. So as you can see that they're double daughter lines except a single one. This is because that there are three kinds off Doctor line make the 11 The 1st 1 is the table border. The table border is made because of this calling. And the table border is the outermost one. And this one, this border is the ultra most the outermost border. And after that called the teach the th eggs borders are the around the teach the headings off the table and these are the heading the other table borders after them. We But there were two D tax and the TD tags are here. These data attacks and the border on these are the T d borders that we defined over here. So after dead, if you want, like don't like thes three borders on, we would like to have only a single border around them all. So we can also add over here of border collapse, property, border dash, collapse property and it will collapse all the borders and make them a single one. And its value is also the same. The collapse value. And if we let run the life for you, you can see that all the toolbar to Borders that they were being shown a nor collapsed into a single boat. So this makes a beautiful border around their table. And we could make any kind of border a groove on our daughter our double border or and add any off the CSS colors we have. After that, comes the table for tonight. You can also add table for tonight a table with the verge tonight, Andi, for adding the table were tonight. We need to call it able separately because we need to define where tonight for on the table . So in the table calling, I have made I do. I've been the wit and I would define Let's ah 100% Andi I was and let's also head and I do it. I know I'll save it on. If I run the life of you, you could see that now. The table hired 10 route is being converted into 100% and this 100% is the 100% off the nortel. The total vibe, Rosary says. So this means that the portal that grows her heights and retarded with and so this is beautiful. Now let's if you want to add some high tended to the th or TD, call them themselves. We can also do that like, for example, if you want to make them more bigger so that they will be more prominent, you can also make do them. And that is by calling the th dags and giving them and hide property. With the value off, you can see any percentage. Let's make them or day could also be pixels over there. That's maybe in 50 pixels. And as you can see, the right of a the, uh, difference at Edward. So now yours haven't nice height to this, each table heading often the table heading height. Let's make it our text a little. And you should have noticed that this th tax over here, the table had in text is aligned over in the center, whereas this table that are tagged is always aligned towards still, so couldn't between this alignment according to our own thinking. Okay, so we can do that and let's do it. So So the 1st 3 off doing this off doing this is by calling the th tags and let's make them a line, A court, just according to the other degs that's didn't make it full size, so you can see it from petty on in the TS tags. Oh, I have called it already, so there's no need to call them again. And in the th dags, add and dext Elaine and I will align it words left, right or any place you want. As you can see, I didn't make it right just for showing you showing purposes and I would save it on on the Life Review. As you can see, that know, every d d dag text is aligned the words there, right? Okay, that's fine. Now let's also align the Tedy Tak text and these d d deck. Next, I know who you gonna call them. And there's also an attribute. Our I'm sure that attributes you. Do you? I would first off all show you by aligning the T d Tex in the center center. Save it on the life for you. And as you can see that no, these texts are lined in the center. Okay, so now let's There is some height added to these text over thes columns off and rows over him off the headings. So if you want them to be aligned toe in the bottom corner or off the top corner how that we can do it. We can do it by adding by adding a vertical align for all pretty over here. And they are very things very much bad news over here. As you can see, let's make it a line towards the top and let's see the results. I will save it and reloaded. And as you can see that it is already like towards the top off the be able to tell. Okay, so we aligned it also horizontally and also vertically. So now let's add some beddings. Do it. So first, let me add some padding. Good of that fighting toe D H and T tax because bearing is added to places where textures over there and table tags have nor text. So there's no need to call table tax, it says, because the table tags that it's sub tags off. TSH and T d have the tax text, cervical th and TV on a TV that padding word on. Let's make a batting off 15 pixels. Save it. We're on it. As you can see. No, there's a padding as the size off the is table increases. And as you can see that, no, there's a difference off 15 pictures between each of the boundary line. Off the sell here is a 15 pixel difference areas of 6 15 Excellent, even if it is a lying to the top. There's a 15 pixel difference from there, and if I click on it, you can see some green lines over there showing the picture difference. As you can see, If I click on it, you can see the 39 showing the padding. Brandi We're length between the blue lines and the green nines are the padding difference. The padding difference added by us to the padding property. Okay, so after it, we have done so much style izing. No, let's add some color student and make them more attractive tables. So I would all in the Ph tags, and I already called them and let's go and add some color to it on the where the colors, we can add background color. As you can see, it is also Sean, and that's had some beauty. Got for the color from here. Less juice fire. Rick. It's it looked attractive enough to me, and I see the life review and, as you can see no, there's a red type shared over there, but the black color off the name The text over here is not looking good, so let's change the color over there on. I will change the color of the headings by simply tapping in the color, and this will be in the color off the text. Unless Megan the 1st 1 2nd 1 take why I'll save it. And if I go there now, you can see that there's a white off white shared you can see in the text. You can also add colors to the DVD dags on who had them agains. Sorry, sorry. Bad growing weather, bad groaned color property going there. Dad, I would like to share their That's you score on last year in particular on, uh, Hughes Dog. Agree. I will save it. And as you can, you know there is a beautiful, colorful a table over the that use group in cerrado dotted and as you can see no, there's a beautiful table over, so I would like to give you make changes to these colors and type off borders over here and different types off Ah, beddings and heights and give different dives off test alignment you want and make this table more stylized. And if you want to like, I'd like to all some questions to me, please. There's a cure section below and you can go there and ask questions to me so I will see you later and goodbye. 16. 7 Understanding links: Welcome back, guys. So today, over here we're going to discuss about the a new thing that I'm going to share with you and for this new thing. We need to jump also into the links in the STM as I didn't disgusted before because I told that it was somewhat more advanced. Other scenario years off. Html. So let's give a chore to the links. At first we learned how to make links in html Simple issue animal, and then you will jump into each tile izing inside the CS escorting. So let's jump right into it. So the first thing we need to make sure Megan see an STM a link is the link tag is right or not On telling tag use for a CMA links is the attack order in protect. This anchor tag means that it anchors a link to yourself and were never republic to it. It if responds in giving the wait for the user with the link itself. So I will show you how to make the link and when we will see the practical happening off the link itself, then we will understand Dirty city what I'm seeing right now. So At first I'll put in the anchor text or the attacks. No, the attributes off the income tax do does the main thing and this attribute, which I'm talking about, is the herff attributes. So this artifact reviewed is known to be right for use for writing and links to it. And this her attribute. Who's that link to which the A C A memorable card users so in this attribute will dive in the link. Do that website we need for food, the STM willing to follow. So I did. Do you go up in the Google and have a good I've been Google. I was open. This is to TBS and I will cooperate. Distinct. So whenever I run my for website and I click on the link, this tribute of the Google Lord going will be opened. So go back and I would Is this link over here in the herd attribute so this attribute was willing to the file or the website we want to open when Dad in disconnect and there's a closing tag off the link automatically added. That is over slash a and inside these opening and closing tag, we would like to write the name off the link. We would like to be displayed on the website so it could be anything like Medicare. I would save it. If I run it over here, you can see that, uh, link named Click here has no been displayed on my brother as I typing. Click here, over here. And if I go over it and click this link, I'll be automatically report inside the Google Google if search engine website. So these links are getting fun. So this is the way to make a simple ing through simple HTML. So now, after making a Lincolnesque GMO comes in CSS in which we will perform style izing to make the link more beautiful. So let's make the link more beautiful of learning style tax of the title tag on style bags . Okay, so inside the style, Tex, at first off course, I would like to call the link itself on the link. Ankle anchor tags are used for making the links of your core the anchor tags and I was major declaration. So let's have some color dwindling so I would make a declaration or do we add a color on it ? So of the property off. Adding color to a link is the color, property and itself. Many values that use anywhere. You, uh, in a meanie miney mo. Okay, I save it on around the life for you. And as you can see, noise color has been changed. Okay, so after it comes adding different color to different states off the link. So what are the difference there so feeling? I'll show you them all. So if I run my website in the first instance Andi, if you see it right over here with their most in this place, our link is right now. Simple eat Got a simply yelling. It hasn't. It has no state. It is simply a link state right now. And when I move on malls and go over the link and I hope were over and as are most cultural such changes as we over over it. No, The link is in the Khobar State. Okay, this is the whole question. Remember, the 1st 1 when there's nothing the most is over here. This is the link straight when moved the most over the link. This the link is no air. The horse state. Okay, so when we click the link and we click it the moon. At the moment we click it. The link is ultra at that moment at Actus Turd, which means that it is active that movement and is doing something. So if the movement we clicked dealing kids here this movement, the link is active here the Linkous active. So I hope that you are destroyed it an opera via gone and seeing the website the link opens and the link will knock inward into the visitors shirt, which means that we have visited the website which wrestling has been displayed. So that means that we have three times four times. So stairs in total the link state at this moment the whole our state, our this movement and the active state at this moment and the visitor stared at this moment . Okay, so that's clear to us. No, we will go back and the cool Tingo CS is right over here. That way we can call these different types of flares and CSS and make genius do these different stifle states. So if we call in the state off link the simple straight we can add this default color and after that if we have our most is watering the link, we can add a different color. And if we have visited, think we are a different color. So that's finally this. So now let's call these links states. At first they're calling the visitors Link State because this is the first place when the website is open, the state off falling. So we will open the link State swing state and you call it and no, make a declaration inside it and give it a color on. And the color will be that, say, Aqua and I would see we'll remove it because we are making this declaration by default. Run in the a link stood statement. So after this declaration, I would move forward and make her declaration off when we have visited the link. Okay, Sorry. Make a hole unvisited. And inside the calibrations, I will type in an other color called Blue. Okay, let's hear. Name them with primary colors Red blue. It visited, and after that comes the if over on in this over. Even at Gulliver sedan, type in another primary color, the yellow color after dead, the active and inside the Colliver races are having the last color. We need to add the last declaration we need to make. And that's type in the green, brother. Okay, you have done them all. But the one thing we forget it that we forgot toe semi colons that lost off every off them . That would have made some problems in there. CSS scored and a fire around the life review. Right now you could see Dad because I had already visited my google dot com website. The color is not displayed in the blue color and because I visited that site And if I go over and over my dad holder my most over it, you can see that No, it exchange into a yellow color, as we have stated in the over general declaration. And when I click coat over, you can see that for a second. It changes into the green as I activate and open the group with that. So if you would like to see the base, whether all the red better over here, you would like to open its inside in incognito window on if you open it inside and in Corgan Utopia? No. Then it will, because it has it would have no cash aid files off the website and no history so that it will not show you on visit and visited whether it will automatically show you the default link other. So that's all right? No, let's go forward on the added some color. So I will give you a tip over here that you cannot change when calling these attributes. You cannot change these this order over here the a link should come at the first they visited the second over the third and the active the last. And without calling a link, you cannot call a visited a over or reactive without calling a visited. You cannot call a over and the active on without calling your Hoovers. You cannot call here, So that means that all off, these are dependent on each other and the 1st 1 is independent, whereas all over the others are dependent on it. The 2nd 1 has dependency, has defendants off over and reactive, whereas over is that you're dependent. Uh, is it has a dependency off active. That means that these should all be included in a style file, been calling them, and these all should have the same Ah! Ah, the same order over here. Okay, so you have added some collected them. No lead, Add some declaration. Declaration. I said some decorations to them. So as we go forward and open the life where you can see that days and ah underline Mark right of it. So if you would like to display and under line, then you have lived or act evicted the link, so you want to, then it see the underlying so then you can make the underlying in the all others deactivated, whereas only activity inside the activated one which will be showing the underlined when only the website is activity. So right now, go forward and I will dive in the attribute off decoration next declaration And in this attribute travel Goldman so that no other land could be displayed and know what no declaration would be displayed. I will do the same with the visited and the whole overrun. And in the lost one, I will. Jane, this none go underlined as I want to see an underlying over here. And if I control, that's over here under runned the library, you know? And as you can see by the fall There's no underlined right over here. If I click over here, you can see that northerners and underlying being displayed. Okay, you should have noticed this. And you can see that sometime Google will display this as we're it. Things that we are from an unwanted please. So it's the matter of the Google. It says Okay, last but not least, will make it a little more. It's receive watchful and a little more visualize able on so that it could be a little more attractive that just delete this all and start from the base and make are linked a little more attractive. Are you calling a link? And it visited over here as I want both of them to be the same and we're here. I at first entered the background color. I want a background for the I groaned. We're all human and I wander already shade. Let's find a reddish it. What about crimson on? I would save it after dead. I would like to have a color off the decks yourself and let's make it Ah, that's make good current pillar Moman gone silk. How about that? We're trying new new colors so that I could introduce to you new colors right away in the CSS schools, as many as again. After that, we learned some padding. Good on, Let's make the padding 14 picks suits boarding PXE on after the 14 PX, the textile and I will make the text centered right away. Dexter line the center on after that to make a decoration and, as there's underlined, displayed in the link always by default, we want no underlying Toby displayed. I did as it will ruin all off our thing on a death decoration and none so in this year make a background color crimson. Ah, go on surgical, You can say yellowish type off color off the next, and some beddings center line did and deleted the underline. And if I see the light of you, you can see automatically that we have made a beautiful button over here on. If he we can use it to visit ourselves on, there's a beautiful Burton made, so that's beautiful. After that, I would like to call the E over and you active, and in both of these I will have the background color because I had added a red color shared before that changes to a red so that, in a change of shared the user go to understand change. Diverse. Lee, you will understand at the moment. Well, it is right here. It is a light reddish on Devon. I click it. It turns into a bright red T shirt, so that makes it the difference and the right. We understand that I'm hovering over the link over here, and if I click on it offensive and I'm activated it, it is also being changed into the same color. Okay, that's fine. No. Okay. And this is fine, But let's change this Active of widely different color Van Italy cornered. That's make the color background we got there. Anek Walker, for example. I would save it if I run it waiting on right brother on. When a curricular changes quickly, that means that we have activated. So it today we learned about links and we learned, or how the stylized them and big, beautiful, linked buttons and CSS and you can also add extra. It's so that you can above it so that you can under make the Jews understand they're beautiful, the beautiful Burton over, and what does it do? So that's enough for today, and I hope that I will may do in the next 17. 1 Introduction to Forums: Welcome back, guys. So guys, from today we're going to start a new section and this would use course as do you have a course and in deception, we're going to jump back to the HTML so that we can do some offer. It's more functions that are needed for many basic websites. You have been thinking that we have added many colors and many a style store website through the CSS language. But what about making our website a little more practical? And adding some buttons or important really is great so that we could turn it into a practical? You have said that are many out there. So I brought the section and in this section we will see all of it, how great but ends out, make input input elements in the HTML. And in this section we will understand how to make these in Fort Burton in front and elements for input and ah, these input and output elements in the front and are called the is de ml forums. So the HTML forums are, you could say, a kind off they're used for in putting data in the website and then displaying it on the screen or sending it somewhere else through display on the webpage. And it could also be used to may save some detained in databases and it will be safe redo for for the whole time. And so, as we move along, you will start to understand that what are these forms? So in this section, we will only understand to make the the front end off these forums. But But as we pursued in this course, we will also understand how to make certain come our actions when certain imports are given in these forums through JavaScript, Oreck sector. So elect in this section have made the front line and jump right into it. So in this video, I'm going to give you Justin introduction to these forums, and I have given you an introduction of whole what The ardor moving forward, I will tell you, hold the work. So the basic it tags for these forums are called the form tags. So the forum tags are f or are form degs. Okay, so there's that closing an angry intact, and so everything there is inside the forum that that could be Burton's import tags, all protects anything you would like that would go inside these forum decks, so that's OK. So what are the attributes off these foreign ties? You don't need to worry about these attributes. Just remember them. And as we pursued in this video course or vote estimate, we will start Our investment about thes actually rules more and more. So the first act tribute is the action at reviewed this action at reviewed contents the doctor dead data contains You can see on address to wear this information that we have returned in the import boxes off the forum should be taken, for example, like an address we wanted to take to address, aware that it will be displayed on that address ordered with processed over there, for example, www dot examples or come So anything that Dad could go inside it the action tax. So don't very vote. Hold the ho. These things will be sent on hold. They were present at the back. And because this all goes there, the back and and in this section we will only learn about the front. So just worry about the front end. And as we pursued in this course, we will also learn a boat back in. Okay, so we learned about the first tribute. The secondary Buddhism that third attribute. Okay, The matter Active boots have two types of values. The fastest get value on the secretary's post. Well, you don't gotta worry. Devote what this greater force really mean. They just happen early through the back and and these get enforceable. You are just how the how the doctor will be transferred to the website. I order delivery so that they just only tell all this data will be transferred. There are two ways to transfer, get or post and they just don't liters how the data will be transferred to the women. Okay, Last is the most important thing is the name off the form so you can type in any name like form one or form best, and these names could help If you are making more than one form in the website in an HTML According thes form, names are used to different shared between each of the farm. Like if we want to do the phone styling to CSS or you want to call the form to make some changes to it. These form names are Jewish over So We learned about the phone text today and three attributes off these phone text. So let's meet in the next video and we'll jump right into the practical things off these phone tax so that CIA director 18. 2 Basic Interface elements part1 Input tags: Welcome back, guys. So from where we left in the last video, I was telling about those forum tax. So in this video, we will jump right into it by making a fuss input tags. And it's the part one of them. I will also put in a part of because there are many, many input tags. A total number I have many, but in this course, I'm going to tell you about nine off them in this section. So I made them into two parts. The 1st 4 I'm going to tell you in this video with 2nd 5 and the second video, so let's jump right into it. So the first thing we need to do to make in the tags is off course by putting the forum tags in which all the basic interface tags off STM, it goes. And so these basic and furter inferred interface tags goes in the forum bags and make a do g y or graphical user interface for the Web. Rosa. So let's do it and forum dags are there. Andi, let's make a foster and put tag on Dad. Input tag is going to be a simple text box. Okay, So that's what's will stop paragraph tagging there. And this this better draft ago Right in, please. All right. Me type rule number Type number. Okay, Onda, Uh, after that, I was You can do most good thing I like about this forms that you can also make these input tags inside the paragraph that results. So Everton text there, and I'm going to make them put inside the paragraph Tech. Okay, so let's do it. So the first and protect I'm going to tell you about is the textbooks tags and these tax walked eggs are the most simple tax. And this weekend, right in some text Onda, we can let you submit it and we will learn about the submarine Borden's lettering in the next video. So you write about a writer textbooks and the into tag it has the name input. Was it simple? Name should know. And it has the first I think we need toe type in is the first attribute, which is a type attribute this type of attributes define which kind off and put bag. It is, for example, the input tax out of many names. For example, there could be an inter input data goes next off the that name for the textbooks. Or it could be button for the Burtons. Eso This divert people defines which kind off input tag we are going to great. Either it is a burden or testable for a check box. Okay, so in our type, in the name and our first is the next okay, text followed by the text comes to turn off many other attributes, followed by the texture. Let's fusty. They're different Type Britain and run it the browser. What happens to it? You can see that days and textbooks appeared on. We go typing anything we want. And so that's a little nice, as I say. OK, that's good. So let's see. Another attribute aan dat attributes is the name name off their textbooks. Okay, we can type in any name, like even for touched walks. One. Any name you would like and if you want to use them a stylized and letter so these special names could be defined over by the name. Attribute. After the Neymar to boot is followed with maximum max length max, 90 could use that could be used for defining a finite number of characters that could be typed in. In this textbook, that means that there could be only like, if I type in 15 in the maximum talked a good their code were the act most 15 characters in this rule number textbooks other than in this Stephen text walks. Other than this, no more practical deviated. So that's good. And after that it is followed wear size at Reboot, which defines the wit off the textbook. Like if I'd quartered in 100 PX Suze on day after that comes in under attribute, which is the value attribute. So what does this value attribute do like? I'm going to tell you that if I run the life through right now, you could see that off because off the 100 fixes the textbooks has grown so much large that is covered the whole rib roses. I would make a little smaller, Uh, let's say 20 pixels, and I was David. And if I Rhonda after you know, a knight has grown small, very during the periods, okay, that's enough for us and the value at Riboud. What it does that when you open the Web browser, it will the value attribute with by the four displays Some text inside this text walk, which could be, for example, telling us that what kindof things way we could write in this text for for them. But could it be an anti jer or, uh, string whatever it could be. So they're strive in a roll numbers only? No, I'm very on okay and lost attribute. I'm going to tell you a line that you what does this align attribute do is align the test box, as you all know, or the line that would let align it to the right side Syrian. And if I Rhonda Life Review, you can see that there's an already in next displaying over there and it said Rosemberg on . And if I did dude in there and type some text seven digits. And as you can see after a finite number of typing, if I keep on tapping more, there could be no more typing because there's on the 15 number off de just characters that could go inside this textbook. So this isn't very good thing of all this, and you should notice that I align this through the right side off the yeah webpage. But for advice, it's still under on the left her. This is because this is inside the paragraph dags and these paragraph tasks keep them from going to the right side and maintain them from where the text is. So if I align the paragraphs itself to the right side with this and if I, the Lord this no could only they go on the right side. Because at this time, the input tag is the child of the paragraph tech and that the paragraph tag does not go on the left. The right side they put that would also not going the right side. So I think that it is clear to you. Okay, Andi, save it. Close it. And now let's go to another X box on Let's name it. That's first at and brake line put. So that next text good going than next line. And the next act I'm going to write the vote is a boss word. So a passport you destroyed them where you, for example, and why I am writing this fostered over? Because now I'm going to tell you about a password forced first your dog voter text walks, nor we're talking about a possible books this pastor books It is just like the textbooks with all the same attributes. Like the maxim ranked besides the value that name. But the only difference is that ifs type is the type nor test but the password type okay. And another major difference is also there in these fostered boxes. And their difference is I'm going to show you when I'm over there. That's keep Max link to the faucet also. Let's say it then, Onda I will give it also name. It is a good practice of give it Give everything the name. Okay, so that's ok. I would save it. Ah, if I go back over there always Sorry. I need to run the life for you first for under life you you can see dot There is a plastered wall to display and the difference there waas I'm going to show you right now that these password are displayed in a special corrector and the special characters, uh, cause not see any other person when you are typing in the password. So that's very helpful on another benefit off this password. Is that a night I bring the possible? You should have noticed that the first ever know there's a ah safe password off Google Chrome opened up and is asking for to save postured. It is also another benefit, as it automatically asked the HTML Bossard type in input boxes for to saving the passports . So that's good. Now we have learned about two tags, two types off in book bags. The 1st 1 is the text. It walks the second longest fostered box. And the 3rd 1 is another box. All the checkbooks. Now, if you would want to like a Reier Jack, the things you like the most make a form like that, you can use the checkbooks. Andi, let's see. What is the check box? I will be our tag. Also followed by Yeah, that stuff, right? Vote your favor. Cars. Okay, Onda type in the input tag. It's jack box input Attack type is the jet box type. OK, the check box type and its attributes are to wear tributes 1st 1 attribute is the name attribute, which everyone knows that there should be a name attribute and I will dive in c one name on this name. Attribute is followed by and value attribute. And what does this add value what you do. There's no in a text. Place a tax return on this, Jack. Watch in connection. Jack walks to write a value over there. Like like in the textbooks we have learned before. So what does this value? Actually, you do this value attribute in the type Jack box is another kind off value attribute on this, Would you attribute specifies the value to return. If the boxes collect, give a click a box and the boxes collected no value to Britain defined over here. So, for example, I will type in a value called Toyota. And if I like this, do it, uh, jack books. Then this body will be returned to the user or the maker of the website. Sorry. Okay, so we have done it in here on if I close the stags at the end of this tag, we would also need to write in and name for the jack box lined over deck on the name of the checkbooks are Think it is off course to iota because I said to you before it is in the Toyota so that it could be specified to the user that this is a test Jack books. Okay, so we made your Trocheck walks. No, let's copy and pasted to save time See Control V and told it is not always good to copy and paste it and I'm going to show you why that sometimes you forgot to change all the things you would like toe have days. Are there ways? So then copping be very much intellectual and see that if you have written everything right Africa hoping it. And as you said that I for just was going toe forget changing the name off TheStreet textbooks as they should be changed because we need We need every textbooks unique so that we could stylized each of them different will save it. And if I go and run the life review, you could see that three jack boxes are beard with the name of it along with them and first Jack boxes. Chota Jack walks Click them. They're ticked. Second one's Wanda. It is also take the garlands BMW and it also got stick. So that means that we could take any number off jack boxes over here. Another good feature of this is that by default, you can also give user and checked Jack box. Example Diab in this jug. And this is another attribute with which has no well you, but it gives the user and already checked textbooks for them alive. Jack, the talk to your touch at books and you will see that if it is already checked and as you can see, it is sent to the user already checked. Okay, so that's good. No, let's move toe. Ah, lost input box input attack today and the last one, but not the least is the radio radio tax. This radio is just like the check boxes is it has the same attributes as the check boxes and does the same thing as the checkbooks, but has a simple difference. First, I'll make it and show you what is a Radio jack box. So don't spectacle that what I'm writing right now just goingto make quickly radio or I forgot to make a beer. Okay, are one name on this fall of value as the same attributes as that? If this idea boxes collect So what will happen? What will be returned out? Let's say credit. I never have been credited after it tried it. Guard on second will be also the same. I'll copy and paste it will be. Could draw. See, um controlled me. Exchanges toe the people, for example. A fall I know named the valuables so the same as people are to with the name. And if I save it around the life review No, you could see that. No, a radio as a so this is a check box and that you can take any number off boxes and the real payment. The's radio inputs are no, these are the same as this, but you can see that we could remove them. But once these are collect, they couldn't be removed. So these are the things of radio weapons that you are going to use, only a finite of number that restricts the user. So that's good. So that's the only thing for today. And in the next video, we learn about more input, import tags, attributes and types, and in these will in the next really will mostly learn about burdens. So that's all for today. And I hope that you meet you tomorrow, and that 19. 3 basic interface elements INPUT TAGS Part2: Welcome back, guys. So in this video, like I said, you in the previous video, we're going toe continue our previous video. And it is it's far too. And in this video we learn about how to make but ends and several other things in the HTML forum. So at first we need to set up our HTML and make off Al formed axe to it to continue. So I've set it up my html No, let's go forward and add forum tax to begin with form tags. We had the form tax at the closing tag and now we will begin. Ah, first thing today is to learn about how to create burdens. So just like we learned about input tax before it also uses and the input attack. So we're type in the input tag and in this region is specified that but there is a burden or a radio jackboot already over, or a check box, etcetera will specify it inside there, type, type, attribute. And inside this trailer attribute I will write nor type in the type Burton for creating a Burton. Okay, so we have done this. No, this now there Many are two attributes major attributes in the Burtons input tag tape. And these two attributes are called the The 1st 1 is called the name tag on Like before. Like for we learned this name that contains the names off the Burton names off the input bag we have. So we re will specify any special name to it. For example, be one for Burton one. And the second attribute it has is a value to this value. Attribute contains the name that will be displayed on the Burton in on the webpage. So I will name the Burton, for example. Best. Okay, now save it. Onda learned around the lie preview, and as you can see no, there's an test return displayed on There's a nice, nice texture ready to it. But when I figured nothing happens because we're nothing, we have put nothing in the street. So I will close it right now because in this of course, we will only done about the front end in this course. Not in this exception. In this course, we will vile moving forward. We will also go towards the back end of the websites. Okay, so I made him one mistake over here and I forgot way eggs equal to sign against the name the name attribute. So please keep in mind that change it after then put the first in port tag we learned today . Second and put type is this submit Written. It's also Burton, but it is used to send the the information we have fielding inside the input as like the tax stadia for the in texture imports. And, for example, we have many other things, such as those jack boxes already. Overton's If he want to send the value they have at that moment we will make a submarine, Burton, And when the Jews escalate, clicks it the STM l will send all the values at that moment who did rep age. We had order the database were specified inside the form attribute off action. I hope that he remembered it from the last video. So I hope that you are cleared tow fourth for the first, we will type in the input tags and inside we will enter the type attribute in which we will specify that it is in Submit Britain or for short submit. Okay, I know it also has the same attributes like the but in the air Burton input type, for example. We can write in the name off s one for submit one, and a value off is equal to submit, for example. And so now we will go forward and on the light preview on As you can see, a submarine, Barton has appeared. And as for the fort, if we click the submit button, it will take us toe. Ah, the Ford website off. Submit as you have not specified any website or database in the form text, so it will dig us. If he open in right now, you could see that it would run the life we rode. No, this is the name right now off the vestige. But then we click this. We're here. It will dig us. Were before the upside, as you have not defined any website where it will take this data for processing or submission. Okay. Now we will define another button that is called a reset button on. It will be saved into the in foot tags on. We'll specify it inside the type attributes. And it is the reset Martin on for short reset and name. It would have his name you can see are one, and the value is for gentle reset one on of at the closing tags closing. Close the tags and run the light review. And, as you can see, a reset one button has also appeared. Andi, if I click it the reset button, what will it do? Do that when I click it, it will reset all of the things a dad movement inside the for insider form, for example, we have checked them some boxes inside a forum, or we have type something inside our input boxes for extra box. It will clear that all and re specified a position off the webpage when it was first open. So this is helpful to okay. It has the same attributes as a but intact no, even add in our last button that we will. We are going toe learn today. On that is also inside and in foot. Bag on this weapon is called an image button, so this is an image burden in which an image will be displayed for the except the name off the image like in this button, for example, in this burden, off disappeared because at I've been input and I hadn't specified anything to it, so it made the books like this. So please remember to specify everything before running the application and what this image button will do. Like in this button, there's a text inside the box, but in the image button there will be an image inside the box specifying the burden. So that's make the image weapon. I will dive and then put tags on the type off the Emmys. Burton well, right, specified by image for short on the name will be, for example, I even or image one. And okay, there are many attributes to image tag except these. So the its attributes are different. Form the original input tag, for example. At first, the most important attribute off it is the SRC attribute, or we also learn about this attribute. Inside the image tags in virtually emerged images inside our webpage. So this is a saucy stands for source, and we will type in the pot off the image in this SRC attribute. So the part off the images and name off the image is images to J Pack, which is inside the same folder, so we don't need to specify the whole part. And we can also put in alignment to this full any line tribute. A line food on this had tribute puts in alignment whether it should be top bottom left, right, let's make it right. Okay on it also have has an attribute off border. This board relative attribute specifies the pixels. Oh, uh, pixels Is this border tribute ease in the size of pixels? And it specifies the difference between the picked off the image and the finishing off the burden. I hope that you and destroyed it on the border on Yeah, let's make it five pixels. And another attribute is the height and length off the image a major Burton. And it could be in both the pixels and the percentage off the size off the window off the whole that birth. So let's make and hide and rich attribute. Let's make it 20 pixels and the Hyde also let's make it 30 pixels on. Oh, let's make it 20 on this 30 I and there's Alton, a lt or all attribute. This is short for Alter Native. So what does this alternative attribute do Just like the images stag we learned before this , Alternatively, attribute rights and alternative to the image are touched alternated with the image when they images not formed. So, for example, we can write in the image, isn't there? Okay, And this finishes are attribute list. So I hope that you have seen them all name, attribute, source, attributes, align, attribute, border attribute were height and alt attribute. These are all the simple attributes we have also learned before this. Okay, I will save it. And if I run the life you know you can see that there's a small image, but and appeared over there a small size in Riverton. So let's make it a bit a bit bigger. Let's make it 100 off 100 1 20 this 100. Okay, I'll save it. And if I go Oh, you can see that how you just become Oh, I made it one told in no sort. And now it's off a good size. And if I increase my side of the page, you can see this button over here. Okay, so we made our first image, Burton. No, let's go and make another. But in And this But another is the name off as the name. It isn't a Burton totally, but it's an file applauding option inside the forum tax. So this file uploading option helps to upload files on the Web. Roser for further processing our information for it, for or for you have percent someone and file and you applauded for it it on the Web browser . So that's upload file option is used, which is inside. Then put bags and he was specified to insert that diaper. Tribute on its name is the fight short for the file Uploading option. And so it has the attribute off name. So it has also only one attribute off. Name on Let's simply name it F one for file one and what was the dags? Okay, so that's good. So in the we also need to porter name in front of it so that the user go to understand this is a place where he needs to upload the file so we will enclose it if encloses input tag inside the paragraph tags so we could stay the name in front of it. And let's create a B R tag recline too good on the second line and name it. Fight Name? No, no. Enter your fight Okay. No, let's save it on. Run it on the that broke. Okay, I increase the size. Okay, nights on the or is no size. And as you can see, here it is. And through your file Jews and file Burton and which is forward one nor file choose in. Which means that they Naevia Susan, don't file inside this windows off liberals there. So go and choose a file and will pop up a window and in which we can go on Broza around our that it are computer and user fight. So I could go on deck stop and going to win any pile. For example, I would go choose this 13 to file and open it. And as you can see, no, there's of 13 to your PST file open over. Okay, that means that no, you choose in this fight. So this is a very important way of choosing violent uploading. It would've Evros. So don't be skeptical that we ever done any background in the school in this section. We will do it in some great time because right now we're just beginning and eventual polish our skills. We will get to the back and and we will make enormous practical life webpages who help you alone. So let's see in the next video when we will talk about some other form tax. So let's see you in the next failure. 20. 4 basic interface elements Other Tags: Welcome back, guys. So today, like I discussed in the previous video, we're going to run about other tax off basic and efficient eggs offish Gmail forums. And so let's jump right into it. And let's see some of these basic and his tags in HTML under then the input tags. So before we have learned in Foot Dragon, several off its in four types. Nine to be exact. So today we move forward and learn some off the other basic interface tags. Or do I tax in HTM? So let us first a set of an HTML in the briquettes. So I've set it up the HTML So no, let's jump right into it and learn our first basic interface. Diego, other than the in protect. And this basic infer interface tag is called the Test eight Year Tech. So this is the text a attack. And what does this texted here? That who does? Is that it? I also haven't opening and closing tag, which then put attack doesn't had so it does had an opening and closing tax. So what does this tag toe this tags have s to make a big interest input tax stadia invested they're using can type in several lines off texting it so that it could make some comments or write about something, for example, and paragraph about describing something exactly. Sector. So this helps us to write many several lines off next for the user. So the first attributes off this Jack Stadi attack that will go inside the opening tax is off course. The name of the tag on the name you type in is the shore for next year, the year one year one and second attribute. It's called, um, holes. So this calls attribute is new to us, and this calls at people defines the columns area that this texted you ever take the visible? Call them area inside the webpage so it could be in pixels on and let's no, let's make it then. It's not in pixels, but it's called, um, spend off the text area and the rose. These rules defines the number off lines that will be visible inside the webpage off distracted, so the visible lines let's make it five four and another attribute is read on the attribute . So this surgery world specifies their the tested year as read only that means that if the we don't have one type anything in this tax stadia for to let the user type in the text area. But we want the user to just read from the tech stadia. Then we will specify this read only actually built over here so you could try that read only attribute. Also, you don't. And inside this opening and closing dags inside this empty space between the opening and closing tax, you type in what goes inside the test area. What we're type in as default inside the text 80 so that before typing inside the stadia, you could dive That, for example, if we warn the user took today's that's comments inside it began diving comments. Okay, I will save it and run the life review. And, as you can see, no. A small that's box has appeared inside here on That's make it. It is warm, a little bit more reasonable and make it 30 for example, And let's enclose it inside. Apparent people rather off bag and cruel ex crew will be what Sorry. Sorry for that On in the paragraph together, right? And I you're comments here. Okay, that's it on. If I run it again. I think I've done the table. I could see no days and command detection appearing here with the comments written inside it. But if you try to addict it and liquored and write something in it, there would be nothing happening because we specified the read only attribute over here. Said that means that you good in order did this textbook text 80 over here. And if you delete this, you don't that hurdle ready yet actually moved over there. And like the life for you, you can see that we could leave this comments and type in anything there, for example, document you here we want. So that's really helpful. Do you? I okay, you know, let's go to the next tag. We're going to run. Learn today on this tag is called the Select Tech. So what this select act does is very important for us because it let's make some you can see some options, schooling options or some drop down lists inside the issue Animal page for the user to slept phone the website user. So that's a very important tag. And so the paragraph dag, I was first typing select. He are auction from the list. The list and you will make a list scrolling list, you can say, or a drop down list through the slack tax. Okay, well, type in this like tax and the select eggs have a tribute name, which gives the name to the this box we have hurted on. So let's give it a name off. You can see it one or any name you want. And next to this size attribute. So what does this size attribute does is that it specifies that home much I items were going to make in this this box in this select back How many attempts you're going toe. So let's miss specified toe three or four, for example on Let's Make Another Arid another. Oh, no, that's These are the attributes right now we're going to add in this bag and followed by this leg tack to make each list item inside this list. Ah, walks off the slack tags. We use the option tax just like just wheeler. When we learned about the list inside simple lists inside the HTML, you should remember that when we learn this simple list, we used the jewel lower oil tax to in close all the lists items and with each list item defined by the latex. So this is the same thing here over here, done by the select an option tags. But other than that, it's in the form off doing and you could do some selecting to do it. So let's make a first off intact. So the often tags have toe verily, two attributes and the 1st 1 is the value. So this value is the attribute which defines the I think we will be sent to the server off the website when we clicked the submit button and the resultant the things we have selected inside are doing basic interface booed off website we have defied inside the form action I tribute. This specifies that what value will be sent to the several dead have a sex sector. So let's call it you can say Australia because I'm going to define some country options inside it and entire deception. I would right in the Australia inside these tax. So when we ride between these tags, this Australia gets displayed in the list at list. I comes over there in the GOP form, so when I click this Australia. This value will be sent through the website we have defined in the phone. Okay, now let's make for three more options. This items, as we have defined inside the slack dags go and we have to maintain their size. Or, if you want to make five changes size 25 Okay, No, let in these values. Let's make it Germany and ad Germany overall. So here on, let's make this Spain or England, Spain and let's make it also Spain on. Let's make this England On a to this point, I would like to give you an tip for you feel that if you dive in, dive in one value with the with this small, small caps if you die, one really with caps lock starting with the caps lock or you want to try the first value with the small electors, you should do with all with all the values the same. This is because that sometimes you could get confused, that if I die, I've been this value with a capital letter, a small letter, so it will get you confused in the back and off the script. So please the make these all in the same syntax. Okay, we have done this. And if I save this and go Rhonda script, you could see that. No, Before that, let's add a brake line here so that we could see the difference. The are Save it on. If you go over there, you could see that knowledge is a select your option from the list. So many typos. Option for all. Pardon me for that on this is all better on there. That right now they're displayed us four options and we could click on any option and selected from the list. And when he clicked and selected this selected option will be sent to the database. Manly execute submitters Ah, form to the through the submit button. Okay, so I said you that there two times of the stings. First run that this with, uh for you. Let's had one more over here and that. Go forward on Name it. Let's name it. For example, Brazil on also over here, we'll in Brazil and save it on the life. You You could see that. No, doesn't schooling where we're so dissidents scrolling list option inside a CMA. So why does this grueling abuse describing appear because over here I defined the size of four. But I entered five options over here, which means that it give air your four options. 1234 for default. But when I under the fist one it made it made a scrolling bar over here a navigation bar over here so that we could navigate to the bottom options. This items also. So that's cool. Feature. 00 here have missed Type it. England. No savings, No, let's move forward to the next select options and this select option IHS the drop down list option. So what does this drop down list does is that it makes a drop down list. And so the next option how does it work is dead. We copy and pasted. It does almost the same status in text. Everything is same over there. And as you can see that in that we write all the same option dags, the same select eggs, but on the same attributes. But the major difference over there is that we don't add this size attribute, So if you believe the size attribute because in the drop down list, we don't need to define the size off schooling over there. So because there is no schooling navigation bar over there, so because there's only one item over there to appear So that means that if you save it over here and go to the life of you, you could see right now that no doesn't a drop down list appeared right next to it? And if you click anything like Brazil and nine on the Brexit, don't list their Brazil item has appeared England item. And so she submitted it. Will the esteem of the pass on the value of this Spain or England anything you have leg Don't do the webpage you have specified in the form decks. So this is all for today. And in the next video, we'll learn about how to make a complete form, using these form tags and slack tags and texting on input tags, etcetera, and it will be very much fun. So stay human 21. 5 Complete form: Welcome back, guys. So in this video, we are going to make the last video of the section about HTML forums. And in this video we're going to make a full fledge forum so that we could grasp all the concepts that we and learned in this here in this section, you could say and put them into one place and make a full flesh forum. So let's do it. So I've set it up my basic HTML beforehand so I don't waste your time and and I would like to have a little bit color in the body tag. As you learned in the previous sections, I had the background color it revealed, or the BGE color tribute to give us a little bit color beforehand. And let's make it blue ECU will be right, Akwa Okay? No, that going to the forum tags and let's first complete the forum attributes off the forum dags and let's give it a name, too. The form tag and name it, for example. Our name could be form one form one. Oh, sorry for that. I don't know. I collect something by mistake. Form one and let's make it mattered off. Extending into a toe website or the debt of it. It is not necessary right now. But just remind you off the active buttes we learned. I have added this attribute, and this attribute will do no harm to a form tag forum. You could say so let's go forward. And first of all, I would like to give it in heading to my form tax. So what will My foreign tag heading, as you can see, are given a title title to my webpage. And that is the are sure. That means I'm going to design a forum for the people coming inside our car showroom on buying some cars or liking some cars, giving a mention them. Okay, so I will give it a name off each forward H one tags and I will give it a name off ours selection. I think that is her reason. Able enough, you could good give any name you like, and I would breath for that. You all make your own kind of forum, and it makes something else. For example, you could make a Friends Club forum in which friends come and they join in the form. Or you could make any other forum such as the You could Say supermarket form in which you entered things divide from the supermarket in the last week are things like that. So our prefer that you make your own form by looking at this full fledged forum video. Okay, we set it up. Are centered JAG. No, let's just go there and review our and this is our preview off our forum for the first time . It's not bad. So let's go and create a forum. No, I will make p tags because be tags are very necessary in making a forum as their native toe . Put in some text for the headings off each of the input forums. So I have a make the first be tags, and inside it I will ask the user to type in their name. Ah, the uses which are buying the car is over there on that's make them under the name and I would make an input tag in foot type is equal to txt text because I want the new user to enter their name inside the text textbooks. So I've created a text box inside input tax fathered by this, I were maintain a size off. How many characters Good day ad like 20 characters would be enough for a name. There were more than enough and Mastic Oh, sorry. I want to clear at this moment that there's a difference between my accent and size. This size attribute defines the bit off the text box inside the HTML form, whereas the Max tank clears or defines the total amount off directors that we couldn't type inside that input tag. So I would. I've been 20 over here also, as they would be enough for a name, and it will look forward by name, attribute and this name, attribute, name. Let's make it even or when we're making a full fledge forum. If I would, I prefer that we name it something much more reasonable so that when you are adding these forums through the back end, offer words, you could find them easily and through some reasonable names, data matching through their work. So here this in toe tags work is to get the name off the user. So let's name this bag user name. Okay, I think it's the reason they will, and the value off this which will be displayed on the screen that make the user type full name in it. Suffer. Austin User two died. The full name full in, please. Okay, that's the first thing. Protect. So we have done the name. Now let's go forward and make the use it Type in the car named they want to have. Okay. Okay. We will make him make the user him or her type in all the full car name and her car manufacturer. Okay. Fuster you lost came to type in the car manufacturer, and it will be also touched like a maximum 20. It will be enough. And here it will be the car manufacturer name and affect your name. Okay. And full manufacture or manufacturer, please. Only. Yeah, Dad would be enough manufacture. Oh, so I hope that till now you will be clear over time doing here. I made another textbooks for the manufacturer's name and the lost X books for no would be the more doing enter Mordo. Okay. And I think that this is good on here will be the model name, moral name and value will be full name. Full mortal, please. Okay. This is good. I will save it. And now let's go and the what's going on there? So that's good. That's really, really good that we're going these things over here. And I could dive in anything I want and, as you can see after specifically and I could have no more because I've set in a Max link for the director inside it. So that's good right now. Okay, No, let's go forward and ask the user toe. Enter the pin cord off his debit or credit card. Whatever is used you going to use for giving money to our car showroom. So let's ask him the password. The pin off the debit card. So on the p tag and inside the p tag, we lost the use. It will enter the password and every last game enter the been for dab it card. Have it slash credit card. Okay. And inside it of ah, off course, make another input, dag. And as a the type of this input tag will be off course because I'm asking for a pin diving will be. Ah, boss. Food day. False word. Okay. I love it. Type in the boss with type, and let's set it also possible. No. Let's not set a value to it called. It's already the simple that we need to him to drive in the being fostered been and that's name it and call it, uh, the been closed Okay, on offer the name. Let's give it a max size and because, according to my information, that the pain gods are off line, usually off linked. Four. So I've also make a max link and name it for. And according to it, I wouldn't make the size also for because we don't need a big size over here and I would save it and or on the life of you. And as you can see in small size textbooks speared side weaken, diving up in and we could dive in no more than four correct er's. So that's good. Okay, so let's go forward and make our next input tag. And what will that input tag in the various inte tag? We asked the user to intern their possible off a debit or credit card, So wouldn't it be important? Lost the user whether it's he's going to use a debit or credit card. So let's Oskin dead. Um mattered off payment and let's ask him about that. Let's make it an integrated type and you'll make it and and put tags on. We'll make it a radio type. Input tags type. Oh, sorry. Type is equal to radio and polar. But this avalanche or it in the name off course, the most important thing the name and of lantern, the name Let's aim it, uh, credit? Yes, because the 1st 1 the first radio tag we are going to make will be the name credit and the well you and which will be sent to the server at the back end will be also credit. And that's making credit. Mattered Met. Okay. And we'll close the tags opening tax and I will die. Been credit over here and s so that I could specify that this radio input tag over there is for the discredit to the user. So now let's type in the next 10 foot for the debit. And inside the next input, I will the same type off radio, okay? And is ready to dive is swallowed by name. On. The name is dab. It mattered on value debit. Okay. And all again, typing dab it that save it and don't be confused that why did it continue at the next line ? As you can see that there's no not line numbered over here. That means that it's the continuation of the line from here because the line was finished over here. So it continued from here the same line. So if I run the life for you again, you could see a radio virgins appeared. And be careful. I went to one at a time because that really computing afterwards and you had to, he said. Them and that cool function of them. Okay, no, let's go forward and enter a ness input type. And it will be off course asking, Let's make a jack box over here. And Oscar Oscar user, the one who is buying the car, what kind off features he wants in the car because, yeah, all for extra features. So that's good. So let's make a checks walks. That's copy and piers the really radio one to save the time. I'm just trying to save your time over here on as you can see, the mattered off. Here we are going to make the features the features you want, do it to use the want and And what? I will be off course. The check box are Yes. Check box. Okay. Check boxes. There the name be our first name. The first reach of you're going to offer. And it will be, Let's say, racing more. You racing. What do you feature? Okay, that's cool. We all from some racing features in the car on Let's give it the that you are freezing more to, um it's typed it over here. No, let's give it a name that was displayed to the user or racing more deal on the same with the next one. Let's make it, uh, check box. Okay. Check. Walk is made. That name racing? No. Everything. You have done it love, Yuri. Luxury model future. So you're a clue charm offering. Bought the racing model and the luxury models, whatever you want and followed by it have lost you give you the title. A name it luxury model. Okay, that's really cool. Let's go forward, then. See the light review. And as you can see, Jack Box created whatever you want. Whatever you do it, that's your choice. Okay, that's cool. Let's go back again on make our next input box on, Let's Dry, Teoh. It's something else. Let's try toe. Make the users select in which country they want There. Cars should be delivered because you're for cars from a showroom in many different countries out there. So we lost them where they want the cost to be delivered. So let's make a select option list inside over here, as I called them, they're not really a listed, but I like to call them a list just for your understanding. They're just a great graphical user interface for the users. Let's name this like bag over here, and we will call it the countries Increase offered. And let's make it that drop down. Let's so well, not at any off those size attributes are. Let's make our first option. Let's name this option. The you could say we could name it first of All, England and you will enter the name displayed over there as England. Also. Okay, that's cool. Let's offer 5 to 6 places like this for Gore to intend above one. No, let's make it Australia, Australia on Germany, your money. So making a big forum is a dead yes. Task what you should get. Hang off it while you are making we're developing. Ah, let's make it something like Japon. Oh, Japan, that would be and trusting so on the last one need blends. I need the lens or here also. Okay, so let's save it and run the life review. So here we have appeared with the lies Nice this box over here and upon need to land anything you want to select and at school. But but But ah big. But over here, the mid major mistake I made over here so that some some off one off use must have clicked in your minds that I made it the attribute name Whereas there should be a value off this list item which could be sent back to the the database or the website were going to send it for processing. Why then? I have named the name attribute. I had made a mistake. So you're going to change it and then the other cool feature off bracket hiss, then by that, while holding the control, but and I could click on server lines and make 10 just to them all at once. So that's already cool. Feature more records, and if I go and run them. It's not going to make any change, but I also for go from wanting also a four Gore to add a paragraph dragon. Name it something that's name it. The really enter. You're country. I preview Okay, we have boarded Enter our country and now we have done so much. So at last, you also need to make the user add some off its opinion about our showroom. And so let's make a comment box over there and name it on deck meant walks, as you all know, the taxi image through these tested year tax. So let's make a next year. You attack over there inside on the P tags. Name it, I your comments here and that's make it xjd a tag. And inside this texture yet, EG, let's make some nice attributes. Name, comment, user commence for long and followed by it. You also have some All the Munroe spends as we talked about that before columns. Let's make it 40 and rule. Let's make it four. That would be good for our enough. Andi, that's that. Some name inside it. Comments care. Okay, that's nice. Okay, No, There's a nice little comments. Books write an agreement you will like. Okay, now let's go back and make all the button didn't want. Go and make the recent reset. OK, submit button all over there. Let's make these three buttons inside a another paragraph tag. This paragraph tags are very handy inside these forms, and so let's do it and making make off question. Put Tag four button and this button will have the type. But in a simple as that. Andi, let's give it a name or at first let's give it a size will not make it big. Let's give it small and give you the size of 10 on Name it. The name that was displayed on the button. It will be okay. So So I made a gain. A mistake here so that I could again are always your brains over here. That there will be no name over here, but it will be their value. The value will be displayed in the Burton. Over here is the active booth that we used to display the text on the button. Okay, so the next input is input box again and put tags again and the type this time we will be the reset button, you will make a reset button and the size that's increased a little bit. That's make it 20 and the value is you'll be off, Ruiz said. Okay, I hope that's clear to you. No, let's copy and paste this to save your time. Control the on. Make it. Ah, submit button. If it decides off. 20 will be good on. Let's give it a name also, just and make it submit button and the value off. Submit. Kill. Save it on. Let's see that everything is all right. It's all right. No, let's go forward and run the Life Review. As you can see. No there. Okay, Reset sub. But what interferes on as we clicked the submit button it distress cannot post slash index html because we have need nothing named nothing over there. So in the has, then if I give it a name at her name that center name John followed by the car manufacturer owned uh, Savic. Let's give it in, then I will be using debit card. I want all the racing and luxury model and to your country. Let's give it in England. I like this car on. Okay, button do nothing because you haven't made there back. And he said But And as you can see, it has reset everything according to its original position. So I hope that you like this and all that you will try toe, make some changes to this and creative true creativity. Make something new so that I will see you will gain so one in the next section. 22. 1 Intro to divisions: Welcome back, guys. So as you can see right now, I have have opened a website all the beauty schools on, I'm inside it on. There's a bigger CML recent on it. And what I am I doing right over here? Thing that I'm doing right over here is I'm trying to explain you there. What are frames on? And these frames are section the topic off this section right now. So these frames are things that divides a webpage into different sections so that it is easy for the user to see these different sections, and each section has a different purpose. For example, as you can see in this rap side over here, the first frame over here is this in which I I'm moving my mouse cursor. This is the navigation bar over here. And this is the first and frame over here. So the work off this frame is to be on the top and give some navigations through the first and over here to the users coming to this website. And Okay, so that's so the next frame is this frame over on the left side. As you can see on the left side of the screen. So what does this friend does? This frame makes it easy to you can say, missed it, frame over him, axity to go or on several topics at a single time for the user and go along and click on some topic and start seeing a viewing it and at the third frame and disrupt site. Over here, this frame is the one which is the mainframe, and it is where all the text me indexed goes in and the pictures in tax of sector goes. So this website is divided into three Prem's and dust, making it easy for the user toe. Have a good interface and big websites you Judea frames so that all there content in them don't get messed up. So as we're moving forward and slowly, we're also going to step in towards making big practical websites. I thought that it was important that I go forward and tell you about frames. So I brought this section to you and I also Jews w three schools dot com f side so that I could tell you that this is a very good website. As you can go into the learners, you can come here and search for each off the tags. Attributes like the color, attribute and see its values like you can, if you mind is not still getting enough colors and your website. So you can go to come here and view more colors over here, other contents and you can see some other values such a some other border types, Aurier or some other things so that you can expand your s human knowledge. My work is to just to clear your concepts and give you a basic intro towards that seem ill . And these extra values are minimally used inside the is Tamil. So I don't introduce them to you so that you don't got confused in the start of the East evil. But if you want to see them, you can come to this website. So is say goodbye to me for now and lets you that's you in the next video where I will tell you how to get started with the frames 23. 2 Introdiction to div tags: Welcome back, guys. So, like I discussed in the previous video, this time you're going to jump right into the tags, which are going to divide our HTML page duty fully and give our content to the user in a manner ful way and make our webpage more ritual. Izabal. So I did. I most usually used the word frames in the previous video, and this frames are the used tags were the tags used most commonly in the HTML four to make different sections in the webpage and divide the weapons into different, different scenarios. But in this HTML five, no, we are having no is framed tags or frame set tags. Those frames tags are no finishing html five. So now we are goingto go right inside the new tags, which are used today for making different sections in the webpage, and this new tag is called the Deviant Tax. So the most important thing that you have to learn before everything is that these deviant tags themselves don't provide a graphical. Ah, you can see a graphical interface off different providing sections and making the user see that there's a section made these deviant eggs only help us to make a you can say virtual virtual sections inside the weapons so that they only divide the webpages scored in different sections. And then we can use these different virtual sections toe make different CSS ah, CSS stylings and true CSS stylings. We can also make the user see the graphical sections. So in this video, we're goingto do the HTML work through the deviant tags and going to learn the basic deviant tags and learn how they work in HTML. And in the next video, we'll do this. Yes, a styling and see the graphical results. So let's jump right into it. Okay, so our first ours is the first to set up the demon. So, guys, I've made a basic esteem. It'll set up right over here, and the title I've given is the deviant acts of the day. If tax for short and let's jump right into it and make our own dipped x. Okay, so the first part is in making a dog tags. Ah, OK, So first part in making a diff Dag is to just write it if tag. So we're going to make the diff tag right away, and we are we're going to put all of our webpage in different Dave tax and defied the webpage into different ritual sections. So to make it more visualize civil court. So our first division tag will before the heading off the webpage was heading comes first. Always. So I will dive in each one tags for the heading, and these heading will be Let's give it a journal limb and call it a header and offer this . Let's make next deviant tax because the first Vivian Tags work is finished over here. Okay, No, let's go forward and make our nest. Vivian tag. And let's all this def tag on the detector. Okay, so we have made a next def drags. And is this defect like a short in Do the previous video, a website which shored heading above it. And after that came a navigation, but bar below it. As you can see, I'm going to jump in the Google chrome. And as you can see, you can see that this is the navigation bar Lord, you can go to the bookmarks, click on it, go to the abs, which are the You can see a link and other bookmarks on this are the search bar in the So this is called a navigation bar. So most prominently here, absurd. Display their links over here to other websites or to the other webpages off the same website. So let's make a link over here and let's called this link or we have to make a link and so toe for make a link. We need an anchor Dag or in a day and it's attribute his heart. As I told you in the previous videos and to make and eso we don't like to make any pointing to any website right now, we just needed to show something to us, just, for example, so to make the STM l don't do anything when this Linkous collect your dive in the hashtag so it will not make us go to another website but will keep us on the same webpage. So that's good. And after that, we were typing Ah, generic link. One cool. That's it. And let's make another thing. Let's make four of them. Okay, that's done. Okay, Now we have makes a major done navigation bar. That's fine. Now let's go forward and make a side column like in the previous video. I showed you the website image. There was a side. Call them over here. I can see in the brackets. Here is the side column and in that website side column. You can goto different links and click on it. Other than the links links we have already added to the navigation bar above. We can also add some text, some side notes to the side. Call them that are important for the A user. So let's add some side notes to the side, called him, make another def bag. And this def tag even make it having heading. Okay, we will make it having heading off h two. We wanted smaller North as biggest before and called it side side all. Um, okay, that's fine. Now you go forward and at some texting and paragraph tags as a side north. These are side notes for webpage. Okay, that's fine. We have added some side notes. No, let's make our major diff class. That means me cups up the major off the content inside the weapons, and it's the mail. In very main content. Off the webpage goes inside, so that will be the area which covers the most content, and that is the middle column. You can say the middle area off the you can say the webpage. Okay, as in that previous upside visited, there was a middle area where all the content we were being was displayed. So you can go to make another day Plus for the middle column and let's major column and let's call it, let's make a heading inside it. Also off his to tax that's make this one is three tags just as the aside notes. Okay. And that's right and main content, main content and again, sign over there that save it and make another brother off bag just to display Lords of Tax inside it. Andi. So we have brought in lots of text, as you can see. So now lots of taxpayer despaired inside in the main content and okay, that's fine. So we have made all of the dip tax we need for a simple website right now and we have got and heading off the header and we according some links and a navigation bar and a side column used to display important text and the main content that is between it, So Okay, So the first thing I'm going toe draw your attention is that we have made navigation bar and heather above it. So isn't it? Ah, a little bit important to make the main content that is below the navigation about both the side column and main content inside a single Davian bar. On inside that Vivian tags we can divide into two different tax again. So let's make another deviant tags deviant dag and gift bag and live all the text, all the major side columns and the main content inside it. Okay, okay, on you have done it. So we have placed our major content off this side column and main content that is, blow the navigation bar, which will include all the content that the webpage contains inside a single Davian bar. So that makes our webpage a little more visualize, able and virtually more sound. No, If you have toe make excess off our deviant glasses through CSS, we want each off the deviant class to be a unique one. We want each of the TV in class who have its own name who saw that it could be recognize easily in the HTML and CSS on cold differently, uniquely so. Let's give these two million are some attributes on The real fun begins here, so we will give them some class attributes so than they can be easily called in the CSS or somewhere else when we need them uniquely these begin class because there's the major importance off this divvy in class that this help us to write in class attributes and virtually divide each off the deviant tax into unique wants. So we will type in class attribute, and we will name these attributes. So the first class attribute, I would like to name it the heading gloss. 2nd 1 loss is, for example, I could name it the navigation bar or nave heavy gay navigate for short. I'll save it on. Now let's make the major content being a deviant tag over there and name it something. Okay. And that's name it. You can say Major on Dent. I think that will be fine. Okay, I name it made your content on. Let's name it Los side bar. Okay. Some fancy names on close again on this time. I name it meeting middle content me dio on then and that. Save it so we have uniquely divided each of the class. Now Jadeveon tags no through these class attributes, and these each of these begins tags are no uniquely identified. And so in the next video we will be ready to help start the words, making them making them more graphical user interface. Because right now we have made then all individually in Professor Abel as easy to access in CSS and other filed and easy to look for the other. And now I'm running the life. You show that there's no difference between thes a simple text or headings written inside the HTML or the deviant class, the deviant tax, because there is no difference right over here right away we see no difference. And as you can see, these linked acts are not even behaving like think eggs because I didn't hurt hash tag Britain over there. So they're not taking us anywhere. Let's rename them toe to three and four. Yeah, nice look, batters. Okay, so you can see that right now there's no major difference than simple STM l, but in the courting, you can see that Naevia makers made it virtually sound and visualize able. So in the next video, we'll make it also graphic individualize able through different matters and CSS different declarations, So see you later. 24. 3 stylyzing div tags: Okay. Welcome back, guys. So in this video, we're going toe style Eyes are Dewey and Tags or the deep tags and through CSS. And we're going to do it to the CSS style tags and give us some styling and graphical interface who are uses so that we can also see graphically that there is some change in you can say in the graphical viewing, as you can see, like I showed you in the previous video, right? No, our webpage looks like this which you're being look like an simple HTML with all these gift tax. But this deft, exploited us virtual sectioning and we can use this virtual sectioning to provide us beautiful CSS styling style, izing that in hair and provide us beautiful stri lighting for our webpage. So let's stylized this webpage all thanks to the deviant tax. So let's go forward. And at first, all our style tags. No. So for the first time, I'm going to introduce you something that if you want to make something change to make something changed for the whole of the webpage, you can say for the heading also for the head tags Also for the body tags also for deviance . Etch one paragraph tags everything. Every element in your is Liam Accord. If you want to make ending in it, you can use and the multiplication sign or the Estrich Amonte, Mark Like I put on the brackets right now so you can use this mark for writing you and total it pays style izing travel. Put in some declaration for it and the declaration I want to be made for the total page. Over here is the box sizing property Declaration. So what is this walk Sizing property. So this boxes in property helps every element off the webpage. Either could be image. Either could be least tables, each one adding expert other affect anything this could provide them with style izing so watch style izing it price it requires the weapon. All the elements in the weapons toe have the same size like for example, if they are true Tax one is h one on the boat are each one but one is having a border and that there isn't even if they have the same size the one which is having the border will with the bigger one so that this will make size different difference between the two off them sore toe make this size different Not to happen in our webpages. And so that are all the tags sizing me in the same when it veered beddings or we had the borders etcetera Then we need to use this border walk sizing. So box sizing property. I think that you have understood enough and its value which we are going to use his border box. So this border box value helps us to keep everything inside the borders off the original bags elements. Okay, so that's done for the whole of the webpage. Now let's make some declarations for body element body tags. Okay, so let's go inside body tag and make our body tags margin off Zito. So why we need to make our margin zero as there are some by default margin other to board the tags. So when these by default margins are ready, this causes our navigation bar to be a little bit out of the way and a little bit space between it. So that's not at this declaration night. No, after the all the style izing, I'll show you how this shared spaces being short so Let's go forward and make some style izing Who are this heading deviant? Okay, had Indian So we will call in this heading. Plus and that will call to daughter on dot heading and that had some comments over here. I hope that you know of arguments and if you don't know then ah, these comments are having are in html CSS These commands are using CSS and these comments are I introduced you i to the esteem Maltais. So now let's introduce you to the CSS lax because the style inside the style tags we are inside CS escorting so mean it weird CSS command told So so this year s comments are read through First we need to have a forward stash and then more duplication sign And then after that, we need toe Ankara document We would like to make, for example style the heading okay on then opera that we need to add and multiplication sign and again off over Slash to finish it. So I hope that you awarded No, let's make some declaration inside are heading deviant. Okay, so inside are heading TV in we want are heading to have a little bit of background further . So let's give it a background color. The grown color. And let's give it a background color in hash tag except of writing the name over there and we can go F one F one F one. So that's her name. The hex bag Hex representation off the color. Get up, then with a petting, do the heading okay and will make the batting wanted pixels. I hope that remember what padding is patting is the difference between the border off the element and the element itself or the head. The heading over here, said the levian. So right now we're not accessing this each one tag over. And that's the beauty of deviant classes, deviant tax and that we're making access off this whole deviant tags inside the CSS. So we can make changing to the whole deviant tax right at once so we can go forward again and I do text the line over here and inside the test tonight, I would like to align this heading centrally as that the convention in making webpages now OK, heading east on offer that comes a navigation navigation bar. So let's call our navigation bars class or which is never gay. I just named it randomly on inside this navigation calling. I will rename it never be. I think that yes, I write this right. Spellings. And after that in this, I will make a declaration off. All were for low property. So what is this overflow property? This overflow property helps to control the next that is inside the divvy in class deviant tax and helps their text, nor to go outside the 1,000,000,000 tax or and to remain inside the deviant tags the area. So I hope that you understood that. So I will make that overflow hidden that if there's an any overflow, then don't show that to the user. Okay, After that, I would like to have the background Couser, And let's make this background color hash tag. Zero three year old three year old three. Okay, that's good. No, let's go forward and all Each off the anchor dags inside. Uh, this navigation navigation deviant. So let's call in the anchor tags, and we can use them by calling at first navigate DVD. The gift tags navigated tags. Okay. And after that, by leaving a space in between them, that's called a distance or rank attacks on May calibrates is on entitled Curly braces. I would like to add a few off the declarations and as I made some that I showed you some declaration in the previous video for links. These are using the same properties over here, so I hope that you remember them. And I don't need to explain you about them. On the first, property is floored on gravel. This floor property helps us to align the links and this align realigned the links right over here were the left side of the screen. Okay, After that, we will make a display declaration on this. Displayed a declaration provides us the type in which we want our links to be despaired. I want them to block contents and block types. We want them to be displayed in block blocks. You can say and after that I would like to make another declaration and inside we will are some color. Good. Let's make a color off. Hashtagged is hashtag as tag and after after two, I'm using some random colors over Let's see what we get. And after that I would make a extra line property. Uh and we'll make the text Align Center. Sorry for that. So above. Over here we align each off the block off the links towards the left and inside each of the block, we align the text that is inside the block do in the centre off the block. So I hope that you understood that. And after this Dexter line property, I will call the padding on at some planning to it. I first of all, out of 14 pixel and then 16 Big city. Okay, that's weird. Why did I add two pixels over here? Why? Don't want So my purpose of hiding two pixels over here is that I want to add one pixel for the vertical fighting as above and below the text and the 2nd 1 to be the right and left off the touched. So that helps us to make two different kinds of padding inside a single anchor tag drinks, for example, on blackshirts decoration on in distract decoration. We are not going to add any decoration as we are going to make it. Uh, none. Because by default. Ah, underlined text decoration is displayed in a link inside html. So we want to finished that link underlined over there. Okay, we are finished with this. Declarations calling and, you know, again called the navigate and anchor tags over here. But in a different scenario, you so that's called them Daut navigate. And so you want to do at daughter? Oh, and after that, I like weird and a for the ankle tags in. Let's call them in. A different state on the state will be when our Moses will bring over it light as stated before in a video before. And that's had a background color to it. Okay, so we'll change the background color. Then the vendor Moses will bring over it. Okay. On background color we want to have is hash tag. That zero the the Lord e zero d. Okay, I entered three. Okay. Hashtag is there right now. It's really the declaration. So the background color every previous theatre for the links was over here when we called all of the navigation bar and added a background color over here. So So you have want ah forgot to at the color over there. Okay, so that's good. After this declaration, I will make another declaration on inside. I will change the color of the text itself where I was it was something like this. And over here, I want her to be totally black. OK, so let's make it totally black, so that's good with us. And after that, I go forward and make all our all them over there. So what was that called him? Our column was over here. So where are columns? So I wanted Do we identify mistake, which we made in our previous video? Andi, don't be confused by it, David. Me And as I was making, um, I guess we do. You know why? Right? A road wrong names off these classes over here, so these classes should be named. Call them and this would be decide all in one. And that is fall over this. You named also called him. But this time, this column is the middle one, for example. Okay, that's good with us. So that's fine did here. So a nice feature of CSS I'm going to introduce to you right now is that there's a space headed in between them and bought the name off the classes over here. Start with column. So that means that we can call this column don't call them over here and this in call. These are both of these classes simultaneously under the same calling and the same declaration, so it will make the declaration for both of the deviant tax at the same time. So that's a good feature. And so if I call door column, it will call the daughter column side and call a middle both at the same time. So that's good. So let's make some decoration for dog called him. And the first population I would like to make is Lord, as you discuss it above that, this Lord helps us to align. Some of the you can save blocks off text, and so we want out these both off the Arctic in tax to be lying to be a nine left the text inside these blocks to be lying left. So that's it's OK. And after that we were there. The patty on it would be 10 fixes. So what will this majorly do? This dog column that it will create two unequal columns, for example, this one, a smaller column and this on a bigger major. Call them that florets next to each other that a next to each other like this one will be the 1st 1 and it will be followed by this and they will be next to each other. So this is your calling. Calling will make both of them. OK, so that's good. No, that's moved forward on Call these off the each of these column glasses. Okay, so we'll call daughter column on. As we have added some space here, we would need where daughter again and then call side. Okay. Dark gholam dot Side. Okay. And often that I've led a bitch Do it as I want to be a small one. Then the middle column. So I would add a bit to it, and I would like to make it 25% off the whole screen. OK, 25%. Okay. Where is the percent? It's okay. This is 25%. Save it and I will call the next call him dog or them dot Maybe lighting. So I named it. I hope that I named it middle. Yes, it was middle. And I will make some declaration inside it dot Call them normal. Middle. And have you provided with the remaining rich that I provided the first to be ended and a pride the first remaining 25%. I was right, this one with 75%. Okay, so that's good on. So that's after all. You have got everything properly. Okay, so that's everything we have called every off this deviant class inside it and we have provided it with some style izing this year says, I hope that you understand every point off the CSS style. I think I've done way, have done each of this style izing it with step by step on. And I have been a mere dust this complex You can save a complex to a pager. Then you have got and I hope that we liked it. So let's go in a jacquard dessert. No, If I run my life with you, you can see a beautiful webpages awaiting us on. These are links on by pulling on, like on each of the links on the links on This is the side column which is displayed separately over here at the side. And the main content is that the middle, which is recover emotional daily off the weapons on above it, above all is are heading, which recall the header. So we beautifully stylized our webpage and divided into different sections and made it a little bored. Beautiful. You can make some most highlighting and are different colors and arm or text, and at some images also to this webpage and make it more visualize able. And if you are stuck somewhere, please ask some questions in the Q a section below, so I would see you next time. Until then, I want you to have some creativity with this stuff, I told you, and to learn more things like creativity, more things yourself. So fighting, then. 25. 5 Tips and Tricks Adding Links: Welcome back, guys. Through this video off tips and tricks on this video, I will give you several tips and tricks that will be useful for you in the practical life off Rodwell Ping. So let's fussy I have opened up my like review of my industrial esteem and that we created in the lost video. And so, as you can see, you have evidence that the side called him at the end off it. And I did it by making this main call them off 50% and the side called him to be 25% and that all of that together and made up the 100 person so that good. And now you can also see that over here I'm my links. So in this tips and tricks, I will tell you how you make some proper links in this navigation bar. As I showed you in the first video of the section that we made that I showed you a website in which there was linked through other content on the website and we can go on that content and we can click that button clicking goto the content by clicking the link on this navigation bar on that was very useful. So let's make on that content walls and on other webpages. So let's also connect other webpages other stu metal produced with our links so that if we click a link, we can open the webpage. So that's really easy on. Now that's close this and go back to our ah, go back to our human CSS court. And as you can see it, this No. If you have a do you remember for the these are links and we only gave them names. But we put in hashtags over there so that we can ensure the html that bank leg do nothing in that cause. So I want a human to do nothing. So that's, uh, clear this up and make us team will do something. So, as you can see, have many Ishijima files opened up here. And as you can see those all the same, but the major difference in between them is that I have added a heading in these HTML pages according to the esteem of page name, so that you can visualize the difference between each webpage manically corner webpages. So that's good. So I contact I am a on you can see productively, Shima without the same with all of them. I hope that you have a good feeling with them. So these are all the same epithets with the same styling. But the major difference is that they only have has taken them. Okay, so I didn't go back. And over here I've have a link to other Web pages. The first thing I want to be to the index dot html itself. But what about why I want that? I want that because I want four of the links to displayed a teach time because our teacher webpage, because each haven't clicked on the weapons, you would also want to take the weapons from that or come back to the previous weapons. So we going toe place links on each of the page. So that means that if you want to jump back with the in Dr Taste email, we can use this agent. We've also want that even they just create the same links. So putting this index protest email is very important, So I will give them heading off index. I hope that you understand the dog and the next will be of all doordash demon ish Tiemann Okay, on a ball. Reddish emails. I will put the heading off about the text that displayed in this link. And that is followed by the contact. No, at first less for the products. Good. Html html on the link placing deck will be the link. Name will be productive is also or ducts also Okay on that is followed by contact note html andan they attached. We contact on with the text over here. Okay, long, let's say that and make sure that spellings us the same and extension off each off. The estimate is the same because we want the name and extension to be seen as to board a steamer to go to the right part and open the right file at a given position. So I think that put in everything at the right position. OK, so now let's run the lie, Prevue. Uh oh. Our names are displayed over there, and now that's going click over them. Oh, nothing happens. Um, but its industrialization human cells. So that wouldn't make any difference. But if I go and click on the boat or they estimate that nothing apples became same and the productive esteem and contact or dashing. So why is that? Uh are you hoping that this there would be a change off webpage? I was hoping the same. But why's that Select? Go back and debug a code and see where the bug is coming in our court. And let's go back to a file. That's okay. So now in this file, you can see that there should be a media fold over here in this link fight. So let's start from the bag yourself on. Go forward. So our tag name is anchor. And so the tax is fine and closing tag is also find. OK, so now let's go to the attributes on AC tribute were here the property off their tribute should be the tribute name. I think we have done wrong because it should be h r e f e r e. So we ever done at E. R. That means that we have returned long attributes name, so that means the fold over there. So I did this mistake myself that I could show you all that how these small, small mistakes can make all of your webpage do some bad experience. So let's save them. And now let's go to the file mean file. And as you can see, no, these are displayed on If I go indexer. Taste, humor, reload Start means that the funding bringing Find on. Now let's go on the bolder estimate and we have come about so that's good. But over here again, there are no links because you don't make changes. Intending to this about got estimate. So now that's made changes all of the human files and that's copy and paste them over there was, We don't want to make changes to them as there are going to be the same and all the pages okay, contact or dished email and for ducks toward a human. Okay, so that is fine. Save all of the files on No, let's go around the life preview again. And after that, you might reloads baldo test human. Our about page appears rupture decimal. A productive page appears contact overestimate our contact page appears and back to the indexed or that seem it under intact or Destiny Page appears so that goods that is very good and we are made links to our webpages in our navigation bar, and they are all working well, so you could display different contents and images inside this webpage and who they're some list or address like redress tags. In this contact on in the product, you can productive. You can show the table everything clears all of the products data graphically displayed. And in the bold protest email Utkan use any pictures to show that whole the whole HTML page works. So I want you all to go back and do some creativity with it. Okay, so we have done that all but we have joined all of these issue my pages. But a single thing is also there that all of these ex demon bitches have the same CSS text . So I don't do we need to repeat the CSS there next order and over again in each of the human file. So that isn't good. So that's based off our energy and resources off memories having, for example, and it badly affect the memory off the computer. So how the changes week? This is the an example off internal CSS so we can use an example of externals. Yes, is by making an outside CSS files with the same court and then call the CS despite filed through a link inside each of the webpage ash animal. According so that they could provide CSS styling to each of the weapons through simultaneous single gold. So that could save our energy and memory off our computer. So let's do it. So this is also may just step in making different pages, so I will save your task. Another favorite is I mean, I would give it a name off me and and, as you can see, that from last many times, were using the daughters Deimel extension. So what will be the extension off this file? This file extension would be simple old so and it will be doored CSS CSS CS is sustained so CSS with certain for Kostic aiding style cheat so that you understand and you will save it . And as you can see, that nodded by default. The CSS file recognized by the brackets old so so that good now. But now we left school on Let's go into indoctrination, human and opr all our style styling we have done in us yes, style attacks on control, see and go back and paste it over here. That means that you have no made in beautiful CSS file over here. So that's good. That would and everything is good. So no, hold Ligety's off the human file, so that may endorse TSS external fight. So let's do it inside our head bags on that First, you need toe. Need this title tags over here because I didn't external resource on no left Make a link link tag. Okay, we have made a link back and off this thing tag. We will head and at three, build off rehl, which stands for a relation. Okay, so we lowered this rela tribute and we'll dive in the relation off this for a link via creating toe the file. We want the relation off their files and saw the file. The main door CSS file is the style sheet or C s a style sheet for our ist email text html content. You can see so we will make a relational style sheet. After that, we've been typing another air tribute, and this attribute will be called type Attribute on this type of tribute is for VM maker additional ship off silent on this type. Attributes will be used to make the to select the type off The five year reading through this link on the file is off the CSS file. CSS nationa slash text me that this is a text file on the CSS file. You can understand that all. So that's good. And now we will add the last year tribute on this last that recruited her fact tribute which contains the link or the past. Through the fight and the filing, we're going to add his man Dorsey assess. So we have made a link, was judging. I've ordered told you, hold, make this think and I again refresh you a voter. So I will go back and run the life for you and see that every desk attitude works and all you can see that they are index traditionalist style. So I hope that you got and I will do the same in all of the fires and with the scene with the contact doordash Human, save it production or nation. And as you can see that this all saves much, many, many lines off text. I wouldn't say that how many lines of text are safe right now, and our energy is also safe and it's all. All of the esteem abilities are no specified in style style by the same CSS file. So I hope that you understand at all. So that's on advantage off using all the files under one page one dumpsite on a styling it through one CSS file. And I click on the doctor female about our testing, production contact, all of them must style. So I hope that you understand that like this strips and tricks video on the you should go back and do some creativity with, Like I told before that are different content in each of the webpage and had some images tables this and describing each of the weapons. So s. So I hope that you I understand that all. And if you have any questions, please go to the Q and a section below 26. 1 Intro to Javascript: Welcome back, guys. So from this video, we're going to start another section off the scores. And in this section, I will finally get words the development off the back and you can say the middle back and off the webpage. And in this section we learn about JavaScript and Java script learning. We will understand different scenarios off, according. And we will also understand that whole this Javascript language helps us toe make some area a responsive websites and reactivity in our websites and make are obsessed with the film in war got together tape off website which even collect something. Do something like I'm like, I promise you, when I was making the forum over here that I will make this forum a little bit more responsive than just taking in values and just clicking the burdens. And if I bore around the life review as you can see over here, you can see that it just no do something that just do. Okay. Said some made buttons and doesn't don't do anything, So I would like to make this form a little bit more responsive. Type off. And as you can see, if I I've been my been over here, you can see that they keep appeared over. And if I click on it, a poor pop is over there. So we will also make these kinds of pop up which year on your screen that had the user toe interact with the Web site itself. And when something is something is tribe, then there will be something displayed by the weapon page, and I hope that you will enjoy this responsive website. But I will have you wanting that like ish, human and CSS JavaScript is a little bit more launched, so I will try my best so that you keep understand everything. And it's no big deal if you keep up with me. And he listened to my every word correctly and follow my follow myself. And if you ask questions, and I would like you to ask questions in the Q and A section, and if you do that and you don't fall behind, you can do, learn and master javascript easily, and you can therefore created man and responsive websites who in this day and not our course, we have journeyed through the simple basic HTML, and we learned many is Deimel attacks or two that became with CSS and we did beautiful styling, two different tax. And then we made our first forum and then LA Recently we also made and ah responsive CSS website which you had many webpages and we divided our replies website in tow. Beautiful different sections. Andi, I hope that you played with the website ended your creativity with that website and there are some images to the web site and some tables list sector. So I hope that you will come along with me in this JavaScript section and understand everything you like with depicts off your minds. So I would see you in the next video. Really were will be starting our JavaScript and we will go deep dive into it so good, vital than 27. 2 Writing our first code: guys, welcome to this video. And today, like I said, you before you're going to write our first JavaScript program. So let let's tell you about JavaScript before all other things. And let me explain your whole JavaScript works. So JavaScript is helping to make our estimate, which is more responsive and more interactive. Other than that, it is a scripting language, which is also lightweight programming language. What does this mean is that it is a program original and proper programming language, And if you have being too programming languages, you should know that they are programming languages. Such a C language. Ah, by tone language, JavaScript, annex sector. So it's an alternate programming language of lightweight one on, and it's an important one also, as it is used in many different webpages, and it is a major part off billing webpages. Other than this, this JavaScript language can be used by anyone who wants to learn. So that's good. And all the major posers also like opera Google Chrome more the Love Firefox Internet Explorer, Every ah file browser major filed brother sports, including Sephardi off iPhone and Mac. Other than that, you also have that a javascript is lines off ever executable computer court usually invited there directly in esteem pages. So what does this mean is that JavaScript is an executable court that could be run through a steam. Ellen could be written right in the steamer like we used the CSS tags. CSS style attacks in the previous videos, right in styling, standing quarter off CSS inside HTML itself. So the same is with javascript That this could also happened with JavaScript and Java script could also been written inside HTML itself. Or if you don't want to write the JavaScript inside the HTML itself, you can also use an outer source and outer, Uh, you can say file off JavaScript and you can put javascript cord inside it and you can call it through the inside it. And you can please. You can say different according to like in the job. Okay, so that's done. So now let's go forward and right. Are JavaScript food? Okay, So, like in the CSS, we use the style attacks to write the JavaScript inside the esteem and what tags we use for the job, right? The tag inside they steam. So the tags used to write javascript cord. Inside HTML is the script eggs. And unlike the style tags of CSS, the script tags are usually used inside the body tags off the HTML court. So inside the border tax, I will call the script tags And inside the script eggs, I will may called language attribute Lang attribute. And I will name the language a language. You a g e. I call the Lang story. It would be properly named language. The total name. And I will calling javascript job. Yeah, uh, it's crib. Okay. I hope that you understand that. Have closed. Opening dragon closing tax appears itself. Okay, we have scalded script tags with the at attribute off language and the language attribute has a value off JavaScript. Okay, I hope that you understand it on between the opening and closing tax be placed 1/4 of javascript. So the the heavy mark that we're using JavaScript code inside the script act. So now let's go forward and right. Are JavaScript cord. Okay. So before writing a javascript scored, we can use ah other. I want to tell you and nothing that if we can also add the script acts on call the Java script inside the head tag old. So So we can call Skip tax inside the heart attacks on the same is with the other sections and that we can call these scriptures as many times that you going in the different sections off the steam in court. Okay, so we have all this. It's inside the human and inside it, we can write our ah, anything you want off the Alaska. Good. So how about way can make an external file source for writing our JavaScript? So with the same, it would make an external source. We can use the same script and script tags and inside the script tags have allowed another source attributes. And this source attributes tells the ah computer html that we're to find the JavaScript files from, so it has to make an external JavaScript source file. So I can in here I can go on typing script, anything I want to name my Gest filed javascript file and I would have been script, for example, means man script dot gs and like the the issue minister and turn dot html and CSS Extension door TSS the Java skipping that javascript extension is door DS And so we need to add dot yes, with every javascript file. So I will go and I mistyped it over here. I will go and appeared on maker filed with the same name file New control will be. And so our job Mr Files off married over there. As you can see, the default jobless kept recognized by the by that brackets. Okay, so that's done over here. And we have also made an external If I love yes, so no Before moving on, the words are first called I want to tell you one last thing and this last thing is about the object mortal in javascript. And if you don't understand, what's the meaning off object model? So don't be skeptical at all, because I'm going to explain your so like in HTML and CSS, we used different your tags, for example, using foreign back and informed tag. You had several attributes stood on each up tribute did that a major and you can say, did the men function through the each day. Like if you call the foreign tags and we added, I attribute off, you can say color to it. So that attribute off color made changed the color of the phone attack text in Britain Inside it. So the same is with javascript that if we call in something, uh, using JavaScript, I recall in some function off it like a for gamble in the initial human, their tags in javascript and other programming languages their functions to be, call any function off it and we call it. And so to make the function of our run in some way in some specified way, we will more to call. It mattered. So if you all the method, it will be the same as calling an attribute inside the HTML. So that means that if we call the matter, it will help the issues JavaScript function, running a specifically helping us to do specific house. So you can a good as that that for any object that has a method by the name of the object followed by a daughter than the name off the method and the set off for entities. So this explains how what is the syntax off writing each of the objective method inside the JavaScript, the function and letter. So the function in javascript is called the Met object. So the object or function comes first, and it is followed by a daughter and after the daughter, be right in the method that is used inside the JavaScript and it is Volver appear off Prentice's. As you can see, I will go below on writing some tags. I'm diving for eggs like in foreign tag. We need you to close these tags. The same mystery need you to close these Prentice's after the foreign tax and, um, like in the forint as we needed to write an attribute off color to make some changing inside it. And I want to dive in red. The same is with the matter and in with the object matter inside the JavaScript. And we need to type and mattered each off the object expensive can use to that object and the value of the method. The value of this object matter goes inside this the apprentices like her. The value goes in the same is that the value over here goes in here. So I hope that you understand it Clearly, the objective matter relationship and don't be skeptical about her are deeply understanding it as Java Scoppetta, white based languages, language and way don't. You don't want to get deep inside it. I won't do understand the basics over it and offer understanding the basics. You will yourself skyrocketed. Skyrocket are yourself and I will help you all the way to skyrocket. Rocket yourself above the JavaScript and make your master of JavaScript CSS and Esteem a web Weltman. OK, so now let's Ah, go forward on right off first cord inside JavaScript. So, as I described it before, like to display our first text through JavaScript on our web browser, we will use the if we will be needed so that it runs the, uh, Gordon side descript eggs and dried. The first just report. We need to use the same relationship of objects and matter inside the javascript. And so, the first object, we are going to use his document. So, through this document object we understood. We understand that there's some changes made to the document that we're typing. And so that's the case. And it is followed by mattered or daughter. Right? So this right mattered means that there is going to be some writing inside this document, So that means that some texture is going to be displayed inside the document, so that's the same case. So after that comes apprentices and inside the Prentice's, we will write some text in it and inside programming languages, taxi school, strength, string and so thes strings are text written inside these written and that are often displayed or juice inside the processing off each off the languages. So we were type in our first spring inside document or right object matter on, and this train will be called. We can type any string and forced typing a string inside this we need at first toe speech marks. So e string board inside speech marks. And without the speech marks, there will be higher because there will be no recognition by the JavaScript that is this spring, either string or it's something else or some other object mattered inside this JavaScript. So we need to place this Prentice's do there, type in string, and we will inside these Oh, sorry. Inside these apprentices and followed by inside the speech marks we will stipend attached the stream So the first thing is welcome. Oh, no. That basic string returned by the every person who runs the first time the court inside a language he's learning for the first time is hello, world on It's being ah international thing from the start off the permit programming languages. So I would happen. Hello, world and I will go save it and run the life you and our first extra displayed inside JavaScript. So we turned our first JavaScript court today and I told you everything about Javascript and we learned very much about JavaScript and whole JavaScript works in each off its according and how the objective matter relationship work and hold internal external files off JavaScript work And how script ag word for writing internal ing job. So let's go forward and also make an external run our external dollars file. And so I loved the source attributes and inside the stores attribute. Oh, sorry. Inside the source attributes, I will call the main does mean script rds and I will copy Got cut this and placed inside this file. And so this is the only javascript. Ah, good. We have right now. Okay. And also remember, when writing an external DS file, there could be several our displayed over here on. So you need toe. Remember each off there? Okay, I was saving right now on what they're asking us, right? No. Is several JavaScript matters. So you need to be ready about each of these errors over here and s so yeah, because of these errors, I will make some. I would like you all so that you don't write these cords inside the JavaScript files at ask . You will not solve these. They're easily cause inside the JavaScript file, we would need to import several, import several off other files to run this JavaScript file properly, and so there could be several errors displayed over there. So to avoid these errors, way we need to run it inside the industrialization human, which is much, much more simple than javascript files. Okay, So I will save it and run the die from you. And as we have seen it before, we need our and I forgot to tell you before that, like, just like in CSS, where we have to finish each other discover declaration through a summer. Colin here is the same with the JavaScript bit where we need to finish each off the line off the cord, returned with a semi colon. So I hope that you understood that and Abbott you in the next video. There we will go forward and do some more, according in JavaScript, and write some more text insider. So let's see you in the next video. 28. 3 Javascript with Html: 29. 4 Javascript basics Part1: Welcome back, guys. So I've set it up the esteem for you and we're going to bidding from the Were we left the last time and we are going to make our first ray about inside JavaScript. And it's the most basic part of this language. All the languages and so we learn, also make very evil inside Della script. So they are a set of rules that should be followed to assign name to a very well. Ah, that means that the 1st 1 is that the variable, it's case sensitive, like just like there shouldn't be capital letters inside a small letter method inside JavaScript Just like that, variables are also case sensitive. And when you make ah, small cased Oh, are lower kissed. Ah, variable. You shouldn't call it as an uppercase variable because they will be two different ones north. A single one on the second is that it contains the actress A to zed on digit 0 to 9 and underscore only so you can type in ABC coma. You can alter dive in any number you want, and you can type in underscored. Other than that, any ah, any other, uh, you can change either corrector inside your keyboard, you cannot call that. Okay, so that's understandable after that. Ah, there could be There should be any white space. That means that if you are writing a variable, for example, you have named a variable ABC. So there shouldn't be any space between, like, for example, the space between a B and C. There shouldn't be any space. Okay. And it also does not does not have to exceed the 2 55 characterised limit. So at most, there should be 2 55 characterise off the variable name. Other than that, no more than that. Very well. Ah. Name couldn't be coming. 10 javascript. And there shouldn't be a ford radio with names you shouldn't use any language, reserved words. For example, in javascript. Use document dot Right. So you should You couldn't use document as a variable name inside JavaScript quality. It has already used inside the languages keywords. And you can also not use the ah other keywords, for example. So that should be clear. So, no, let's go forward and jump right into it and see how the Syntex off declaring a variable works. So I'm inside the Java script script eggs and inside that I will declare my first ah, variable name. And that will be war. So far it is. It is a key word of JavaScript, and war is the short for variable. So whenever defining a variable, you should state war before it so that you could The JavaScript should come to know that you are defining a variable over here. So after that war, keyword, I will type in the variable names and it could be anything. Have a name it car underscore name. Okay, so that's good on After that, every type and is equal to and is offered a Z equals two on the right side off there is equal to always comes the value off the variable. So the value when you doing, sir, define inside the dis variable. The value will come on the right side. So over however diving a very But I would name it. Ah, for example, I could name a Toyota. Okay, at the same it over here. And that's fine, Andi. So there's this index of writing and variable, and as you all know, it should finish within semi. Colon and I would save it. Sold syntax over is to start any very ever declaration. You should start with the war keyword. After that, you defined the name of the variable and after the physical who signs the right side off these equal signs comes the value of the variable. Okay, so I hope that you understand that and no going forward. You Ah, you can dive in any ah attached to ah thing over here, for example, you can make it and you did it also or if you like, you can make it a bullion. So bullion is true. War falls so either it is true or it it's false. So anything you would like you can name this variable anything and the very well will judge whether which type off content costa inside it. So over a terrible just for example, I will name dext over here some guest. Okay, so there's also another way to define a variable and that ways, for example, that you can go above here and as I'm going to show you that you could go about here and declared this variable above here over here before putting a value over here so you can even make a very able without a value. And after that, when the near times come and need arise for putting a value, you can put a value inside it. So just like I've done over here, So that's good. So now let's also jump forward on play some, uh, with the text as that that going to that is going to become very handy inside of JavaScript programming, which we are going to do inside the web helping. So if I name this variable Toyota and I typing a document or tried command right, and we're here at first what I would say I will make string. And I would say I on, uh, offer a space. I will under a plus sign and off the deck, I will all this variable over here. I will call the car name variable are name very you, but and that's a string. Very. But they told a string Norton number north a 1,000,000,000 it hold the string. So that's a string variable, and I will type it inside it. And after that, I got also dive in another string and make it a br tag inside it. And c I I love it. Okay, I'll save it over here. And what I have done over here is called Ah, string concentration. So that means that I have concentrated a text inside a single string. So these are three different strings. The 1st 1 is this I own with a space are nine open that comes a string car name. So this card name variable holds a string Sovann call inside the document dot Right method . You can say command this car name string is then accessed. Form the variable and the string is no place inside over here with his Toyota so that ah in the total form Then it will be right. I own a and then it would be the card name will be added to the string and it will be called Toyota. I own it. Your turn. After breaking a line on the next nine, it will be wrote. I love it. So I hope that it's fine with you And no, I will save it and run it in the library. And as you thought, it is displayed. I own a Toyota and as you have concentrated that corn invariable inside over here. So if I go back and if I change the name and I name and Honda so we wouldn't be needing to change anything over here. So changing by changing only horn our here you can go back and go through the lives of you . And if you go and see our then horned eyes displayed over So that means that by changing the value of the car name, the car name string that will be printed by the document or right is also automatically changed. So that's a good thing. Good functionality. So I have we have concentrated are fostering inside, over here, and and other important thing for the variables is that you can you don't need to live in the same tax on and on again. For example, you can go there on go again and bring the same guard name over here, okay? And you can save it and run the live you. So as you can see the same Texas despair tutoring or not users to time so that you would use the same car name on you didn't need toe place $1.2 times on. I need to tell you one more thing that if you go over here you call the variable our name again? Okay, I would call it again. And you you assign and other value to it. For example, you go and assign it a new name for them by libel signed Bugatti. And if I go back and run the life with you as all you would have been expected after the variable was first defined, Honda it d printed out Honda. And when I defined it again and defined it to the value of McCarty the northern corn and was printed out as Bacardi So we can also reassigned variables offer their or originally defined, so that also also good perspective. So in the next video, we're going to jump into javascript operators, and we will see different kinds off operators off and do different kinds off oppressions in the Alaska. So bye bye. Till that 30. 5 Javascript basics Part2: Welcome back, guys. So today we're going to make some JavaScript operations and do some of the Java learned some of the dollars kept operators and run inside them inside. Script tax. So it's OK, I've set it up. My give my ex demon for you all. And now let's do it. So f us to fall every tell you about home. Any kind off operators are there Inside job. They are a Rita Matic operators that are used for simpler marital Matic forgettable plus minds multiply sacra. The 2nd 1 is comparison relation operators, for example, and these relation or comparison operators are used to make comparison between different variables are strings or numbers except crap. And the 3rd 1 is logical practice. So these logical operators are used to check whether something is big or small or equal toe or is an or or sectoral. And the 4th 1 this string operator and the string of murders are used for like, a short in the previous video for concentration. So that s so if you don't understand about those Franken Parker data used in my previous video strongly skeptical at all, I used it only to display the results at that time. And if you don't understand that, don't be skeptical at all, because we are going to learn about all of that in this video. So let's begin. And so the 1st 1 is the automatic operators. So what? The arithmetic operators, our operators such just last minus multiply Dwight and more do this, which is used for checking or the remainder offer deviant some Let's do it. And at first you will type in some variables which are recharge. Okay, I will type a name off this variable, and I will name it. For example, Yeah, number four foot number. And after that I will live in the number for it and ever called the number. For example, I will call the 10 and off that I've declared, and there were even and s numb for second number. And I was for the number inside it, for example, Seven. Okay, that's good with us. And OK, after that, let's introduce you to the Majalla, stripped our automatic corporation operators. So the first operator is the e n B o operator, so you can use them over here, for example, Uh, we can use them by tapping in there. Yeah, but reserved is no. Oh, sorry. Sorry. I will declare a very evil over here and call it resulted because we don't need toe. I've been any white spaces inside it, so I didn't And I had two types such a long variable in. So I, Joe the short one called Result and offered that I will That I will eat it, make it equal to the value off f numb plus the s numb. So over here we added these both numbers. The number off these boats values off these both very butts. So the first variables were used 10 and the second very was value seven. So according to our logical thinking, the results would be 17. And if you're good at mathematics, you should know that. And so now let's bring out the result. Not right result. Okay, so here's our result and that school and trended out. And as you can see, our 17 result has been printed out on that team. Help it. So that's good over here. So that's going really, really good. Okay, So I need to specify another thing that as this result, variable name isn't a string that's why There's no need to type the result. Ah ST Ah, desert name in the document or trite inside speech marks. And they could work without the speech marks. If you tied them inside speech marks, then it will be It will be not access as a variable name else. It will be accessed as a string, and the string will be printed out and are printed out. Statement should be reserved and, as you can see, the result, he sprinted out except 17 because it isn't recognized as invariable, it is recognized as an simple strength, so I hope that you industry that all. OK, so let's save it on. Move on. And so let's Jane, this plus two multi play. Okay, we will go forward and changes to multiply. No, that's save it. And on the Life Review and it should be, 70 ounces would be 70. And as you can see, stem these answer. So that's good. Are automatic working inside JavaScript? We could also minus them. And if I minus them, I was saved them and run the Life review. Okay, you could see that a result over awaiting as a three because 10 minus seven street and they will be also be deviant. So the division is done by the forward slash mark, which is used for the deviant as a 1,000,000,000 operator. So I will run the life we weren't, as you can see, that we're here. You're have Gordon answering the points because seven more than ah, divisional divisible by then a nifty do it five and no, let's go back and re lorded. No, then answers to because five is divisible by 10 by the factor off to okay, lost. You have been seven again. And now I will use the more Dulles Cooperator Arrieta Matic operator. And it is the mortal immortalised are automatic opera trees used as a percent a sign. And what does this do? Is that if the number is not divisible by the A number for example, seven isn't with Tenzin divisible by seven. So then it will print out and remainder off the number. Ah, that because 717 and the remainder is three. So it was print order, um, introductory so that I hope that you understand the concept of remainder inside the mathematics. So three balls bring it over here. So that's good and I hope that you understand that all. Okay, so way have learned about all the arithmetic operators right here. So that's move or and learn about the comparison operators. So the comparison operators are used to run to relate to variables in a way. And these are most were mostly used inside a L statement inside JavaScript. And we're not going right now to learn a statement off JavaScript because that is not going to be much using a Web helping. And ah, I don't think that it will be mostly used, but we'll see as the time goes on. So the competitive operators are used, for example, they are is equal to, uh oh, I will competiting operators. I would show you below that the first compartment operator is is equal to is equal. Do this comparison operators Ah compares the number or the on the life site to the right side and see that if they both are equal and the next days, this competitive or better. And this is that if the numbers on the left and right side Darden what equal to each other 1st 1 those are the equal, and the 2nd 1 is no Are the nautical this tournament is that is greater than fortune? Is it less than on greater than is equal to or less than is equal to It is all simple mathematics in the side, the HD JavaScript. And so I hope that you understand that these simple mathematics inside JavaScript So this is followed by logical operators. So what does the zoological operators do is that they also using defend as statements or why statements, for example And these operators are and then and there no Prechter. And what does this and and who is that? It ah is it is used as an end. For example, it seems that if ah X is greater than 10 and vice greater than one than do something so it does doesn't like it eso that both should be in the right car right area, whereas the second is or just use as these signs as these signs which are above danger And when you were placed shift on the back stress. I hope that you see them on your keyboard and these are used for or ah, operators. And these are, for example, you can use that if X is equal to five and bicycle to fight or five bicycle to five, then do something. So one of them should be inside the crowded area. And this one, this operator sees whether they are not. Then do something. Ah, inside the crowded area, so dirty, you understand. And after that, I lost like I promised you before comes the string operator and this trunk. The string operator, the most woman uses the stream constant, recurrent, concentration operated lies I discussed in the previous video. And what does the same concentration operator does that it concentric existing and contenders to several bars of string under one part. And then you can print Destin goat, for example. You can go over here and and you can go ahead and print the result out in a statement. For example, before Stipe in ah first driving indexed the result off adding adding plus f numb Ah, first number. I really type in first number, so it will go on in the first number. Textor. The first number Ah, value Inside, Over here inside the dock commander tried function and the value is 10. So I will call in that number value and after that I will add another string inside the document or write itself. And I would call this drink Ah, and for space on both of the site so that it is more visualize ever learned. After that, I will call the as second number. Ah, Like I defined before and lost, I would go and right The statement is equal to Los and I will type in the last result Variable. So what is over here? As we have stated the values off the results are that the result off adding or sorry, I would have to place the art of retro where you should have noticed before the result of adding first number and first number over able to stand. The result off Harding 10 and seven, is equal to the result. The result which is going to be, as you all know, if you're good in that, that it will be 17 and we'll run the life review. And as you can see over here, the string is printed out and the result off an intendant 70 go to 17. So I'm going to show you the very much important part of string concentration over here, and that is that if we can understand toe not tow four, for example, then the we don't need to teens that number from here and F number from the result then they would be automatically change, and the result also change automatically. Send if I reloaded. The result is also tin and F number is old suiting automatically, said Axe. Important part as if you have returned it inside the string. You have to go every time and changes to four or whatever you have is choosing the new name new value off it. So that's good part of the string. Consideration on for the same concentration. The plus at plus operators use as it adds several parts of string and combine it under a single part of string and that is then displayed you. If you would like that, it is displayed on the ah webpage. So I hope that you like this video and you should go out there and do some connectivity with all of the protests that I may be learned today and some creativity that string consideration. And then we will meet in the next video and I will show you some off more basics off the JavaScript language. So by vital, then 31. 6 Javascript basics Part3: Welcome back, guys. So in this video, we're going to learn about some other basics. All JavaScript and no, we are finally going toe. Go forward and learn some basics which are related. Do the JavaScript at worst, the web development. So? So our ah basics. Noven start from window or door alert might hurt. So what is mean? Ordered alert My turn. As you all know before that most are diving window windows don't object over here, and it's mattered. Ah, which is the alert mattered so by the name alert mattered. You can understand that there is going to be some alert generated some sirens being played . So there's something like that. And you thought, Ah, something about this writing. So what will be syntax for the alert mattered. So the syntax for this alert method will be Ah that you're You will type in the alert matter inside and you will display a message inside it. A string message inside it, for example, you can write in inside the speech, call them, then you can write a string inside it. Any alert, you can alert that you want to be displayed inside the screen you want and you can say hi. I, um ah, Web developer. Okay, so that school No, let's go back and run the life review and you can see alerted generated. And it says that Hi, I'm a word Welford. And you can say, OK, do it on. That's all that it does. So it's as you know, I've run that actually, we're going to show you again that as ever, no lords and alert is dinner t'd, which is a pop up screen on the webpage. And it's is that high? I am a web developer and you can click OK, and with the pop up screen with closed down So that school Okay, so we have donated at alert inside the jealous creep on. I want to give you an disclaimer that you can also use only that alert mattered except off using the window object. Also, you can type in just alert on if you save and run that I Pruitt will still display the alert. And as you can see the pop up screen, this still appears and it will appear until you click OK, and close it down. So I hope that you understood that. OK, so that school. Now let's get to our second mattered that we're going to learn today's and that mattered is again from the window object and the method is confirm mattered. So now let's go on forward and see. What does it confirm Mattered do is that this confirmed method is used and we can also use only confirmed like just like in the alert matter that we can both use window door confirm or just confirm At first I will show you the nordle confirm and inside the parentheses I will dive in a string message and threw them in the side. The string method. I will dive in that, do you for low. You give decks just for example, and I would save it. And if I run? Going run. Okay. On first gave me the alert and I said, Okay. And then it says, Do you give a tax? I could either do it ok or cancel so in any way it will give that either. If you're Oakar are done An OK. A dented Willard. And okay, or else it will return. Ah canceled. So eso hard. This is a little bit more Ah function able than alert so we can also ah save the message that we have returned to the window door. Other in variable, for example. Reply variable I have made over here. And when I returned Okay, Then there will be a true variable returned a two bullion return and van I return off cancelled then of falls where you bullion will be returned to the variable reply So I could also print it out from doc Commander tribes so that we can cheer dessert and you can visualize it more properly. And I would go and reply a print order reply very evil and if I run it But first the alert of years and after that do you group text disappears. If I do OK, crew will be returned and it will be printed out by us as I printed out the return value and if falls were turned fire on their a game on and if I could turn canceled and falls will return that are totally before. So that means that this one daughter confirm also that returns value so which can be used for processing off some of the things left for in forums or web developing when making Ah, developments inside your rep, Ege. Okay, that's good on. After this comes the window. Prompt mattered. It's also from the window object. And it is window door prom, Two methods. Okay, so let's go in. Do something with this matter of indoor dart Prompt. Okay. And it also has a string inside it and the string inside it that there, in fact, in fact do strings inside it. The 1st 1 string contains a message. You want to thank you. The ah computer, the webpage want to send to the user of the webpage. And the second value is the default value that is going to be displayed inside the text books. So what does this really ordered? Prompt matter does really is that it gives ah, are something through the user that is using the weapons, for example, it asks the user the age and then the It also gives us input box in sideways. The user could type in age, and it could be desert returned to the webpage. So that means that sorry for that. That means that I could typing a message that please They're dying right your age. Okay. Andi, The default value over here. The default value is the value that will be by default displayed inside the the input box. So it could be any text. For example, I will have been that it should be in teacher I in in teacher okay, and often that have it and mark over there, and I will save it. And if I go and run it, okay. And if I go and run that you can say it has also please write your rich. And it has also given us our default. Your diving in, Peter. So I will happen. And then teacher and a leader, for example. Uh, that's tribe in 26 age on. Okay. And the true value of the first documentary writer and editor. So we returned the value to our that page JavaScript. And so we can also save the value over there. Okay, So to save the value, venuto first, just like we did in the window, confirm. We need to display strong value inside a variable also. And to do that, we will make a variable call age and let's is equal to the value to it. And after that, well documented tried the value on the screen. Let's before believe it. I don't want you to come in the way and I will document dot right north right on inside it . I would I pin my age. My age is and the very was inside it On the age I will consider the each variable we did. And now let's save it and run the life for you. Okay, Okay. I would have been made. That's dive in 26 again And okay, my age is 26 so that it could be used in web helping when you can return something to the user and then process it at the back end with javascript and then send it to the user again . So that's really helpful. So we can also do something like that that if we can use that cross that. And if you believe this, you can also use prompt only inside of in order, prompt, and it would still work. So don't be confused with that. And the first rival for that, even asking for the age off the person, the name and I've been string because the name is the actual off course. So it couldn't be an indeed your it should be a strength on after that, A bill. All sauce came is Ah, No. Okay, so that's enough. That's enough On I would say my name is Oh, I didn't eso viol Copy and paste ings please remember that you would change everything you have. You want to change and I dont the name loud in name it first name and our f name altogether and often that travel Add in this under concentration and I will do that. My age is unless on a judge And after that I was concerned it on full stop our dad so that it looked nice And if I run the light review you can see right? No, that you stopping the string that air please write in your name on a high note in my name John just a Rendon name and offered Dad I would type in a leader 26. My name is John, and my age is 26. So that school Okay, so we, uh, done it on. So that's good. We have been following Very good. I want to tell you another thing that the in esteem abused brake line tag we jump onto a new line inside the HTML, so that line will continue in the next night. In JavaScript instead of brake line, this forward slash and tractor could be used, which could be used to go on to the next line. So that's unhealthful corrector over here. And if I save it and around the life you you can see that I will type in John 26 60 eight on my name is John over session. So for West Action was printed it and stepped off, taking us to the next line. That means that we have made and the syntax mistake, so you should not be confused with that. What is printed out. You should immediately go back to your cord and debug the court immediately. Of course, there's some problem being held inside your court. So what's the problem so immediately? Go back and see what's your problem there and on who hoped that you find the problem easily without so much finding it. So my problem here was that instead of former slash, I had to do the backslash and I made a mistake over there. So don't make the small mistakes and I did it to show you that sometimes syntax that make you confused. But you should go back and all this. Look at your court because the computer don't do mistakes. It is the one you, the you is the one who is making the mistake. And sure, you should always go back and check your court every time you have a mistake inside it. And it doesn't run as you thought about it. So I hope that you have enjoyed this video very much. Didn't know. So I think that is enough for today. And we didn't meet next time in another video, So bye bye till then. 32. 7 Tips and Tricks checking entry: Welcome back, guys to this tips and tricks video. And in this video, we're going to learn something new about JavaScript. And I'm going to give you some tips that will help you in the ass. Gmail lab developing with JavaScript. So, in this video, I'm going to tell going to tell you some tips about the input the resident user gives input and how to process staying put in the JavaScript. So in the previous videos, we learned about how toe make a user prompt and ask users something. And when the user types in that thing, then you can return it through a string. So what about you processing the on service the user has given us through the prompt? How about that? Like we asked user who give two numbers for multiplication or divvy in or adding. And we add it in case. So how do you do that? Okay, So first revealed, we want diluted as it will take up our time. I was give it journal. Look, you do this talking under tried. Okay? So I really find the first variable, and it will be f and, um for flushed number on the second variable as end. Um, for the second number. Okay, I hope that you understood that offer that in the first prompt, I will first send them right in the message I want to send to the user. And I want to do ask him to enter your first number. Okay? And I want to center the Ford Value and in danger, please. Okay. Or yes, Jen. Number, please. Okay. Number really find also. And after that, I will also in the second number, I would ask him for the second number. Enter your second number and I will tell him that the four value is and number, please. Also over here. Okay, so that is done. That is John. Okay. Offer that in the next line. Well, we will process the two values and save it in a result variable. So which will be displayed afterwards? Several create a variable off results, and I was process the values. So we need to add both of the numbers. So the user s typing us a number both or two numbers, and we need to act both off the number. That means that your that Effingham less s no. Okay, so that's him but offer that we will want to print our dancer on. I will. A type of document or trite mattered thought right on inside it. I will see. This is the added result. Okay, on I will consented this with the strings. The result. Okay. And I will save it for See that all the variables name are the same ones. If you type in the wrong variable him then added with originated and the court when north work as you thought. So after that, after checking that boat with life through and run it and inside life with you, as you can see it also us for the first number I were typing, for example One okay. And to Okay, so the result over here should be no. Three, as you expect. So I would have been okay again. And but in place off the there was to So dish 12. Why's that? You should think about it. And I think that many off the clever ones between you should have taken out via this ever happened. He said it happened because the javascript concentrated one with do in case off adding it so it didn't add it. Whereas it concerned retreated. So where's the problem? So the problem donated over here is somewhere here. We're it in case off adding those number, it added two strings. That means that value returned by this prompt function is the A string value. So that means that these both are strings. So to convert these strings to numbers so that we could add them and take up result, we need some special functions in javascript. And so these functions are four converting a value to an in teacher. The function is bars and teacher bars I and D and inside the apprentices, we will put the variable we want to change into in teacher. So this will change the contents off F number first number into parts and parts. And that means it will change the F number content into an in teacher or a number. So we want the to be same with them and ever happened. Parse. Indeed, you do it also, Andi, those air inside the apprentices and I know it'll save it. So that means our for converting the string to a number. Then they will take out results. And then we would expect to get the right result. So I will go back and run the life real. And as you can see over here, I live in one and two and the results would be three now. And as you can see, there is artistry as expected. So these are a few tips. Ah, OK, I've done it once more. For example, if we don't type in whole numbers retyping decimal numbers. So if you tap in 6.5 and 5.4. So what did we get down to 11. So the fight on doesn't JavaScript does not look at the desserts after the decimal. It only sees the whole numbers and job off the decimals. So how do all make javascript also see the decimals in the ravines? I did inside the problem function. So we go back and we change this intelligent do float. So no Florida in programming languages means of ah, the decimal numbers. So in place of converting into in teachers know it will convert them into decimal numbers. So I hope that you understand that, And if I go back and read or the speech on at 6.5 5.5 and OK, and as you can see. Nor is our distress or just real order than sure you want again. 3.2 5.6 and others are reserved for in date, inside estimates. So that's good. And we have Gordon Prue result now, So these are futile absent tricks for you and tow using JavaScript and esteem according so that you could get the results right reserved for you. So left to you in the next video where we will jump more deeply inside JavaScript so by brighter than 33. 8 Accsessing Html in Javascript Part1: Welcome back, guys. And as the title suggests today we're going to do some exciting things and you will off course enjoy them. And don't get over excited about it. I want you to learn it at your at most power and learn what you can get Gross and other things. If you can girls them you can ask me in the queue a section or as the course continues, you will learn about them as the we meet again and again and we use the same court again again for different stuff. So you will learn about it all. So don't get confused about today. I will try my best to explain you everything I could s so that you can understand every bit part off this. Ah cord. We're going to write today. So that's go forward and right accord. So today we're going toe may 1st make a forum and in the forum, like I recreated before it will ask the user about the some about some imports and the user input something, for example, even import his name. And after that we will to Jalisco make the Corp scored in the name printed out off the person, which is true JavaScript. So isn't it cool? Ah, accessing the HTML course through the JavaScript on afterwards, you can use the same thing toe in big Forum than processing the esteem, according the JavaScript. And then we're printing off outputs which can be used in the physical front end Web building websites Toe s. Oh, this will be a very good head start for you all. So let's begin and keep your for all focus on the score that I'm going to write Pretty. So the first attack we're going to create is the forum tack off course for cause your boob gate before him over here and inside the forum. Dag, I will copy and paste some text so that no time is wasted off you. So give me a minute. Okay, So I'm cooperate in some court and as you can see, I've given the niceties of the forum so it will be easier to access. And as you can see, the first we have made a label. So if I have not told you about the level attack, so please focus on it. Labour tag is attack that is used for making placing some touched inside HTML just like the paragraph track. But it is used in most in forums. Took some good, good looking touched and stable looking tax inside it other than pair paragraph for HTML. So these are labels, Not any other text about labels. Uh, so I hope that you understand that. So these label tags are for text for ah, placing the text to tell the user Varty want toe entering the input tag we use next. And so Ah, we everything create user name O r. We can also have been something that lease anger your name and this will be no displayed on the webpage. Okay, so that's John. So I have copied it in so that no time is wasted off you because we have already learned about all the off these forums tax. So I hope that you have known about all of them. And this label attack is not off course success by JavaScript because there's no need to. It's just a place holder of text for the user to see and learn what he has to write in the into tax. So this is the liberal attack. Okay, I hope that you understand that no, followed by the label. Dag, we have the import tax. So import taxes, the input medicine, bow tax type the text in both attack. So inside this text input tag, the use ever type in some text and in this text box on the user will get an answer through jobs recording, which we learn our more forward. So we have, uh, certain i d for it, and it will be accessed by JavaScript. So we need an i d for it so that javascript can access it through its i d and access the text, the user resident and inside it. So now we can finally access are use a text, the user resident and inside it through Jolla script. Okay, Stack means that use is going to write his name in societies input tax. Okay. And we have set a maximum of 25. I hope that you understand that all. Okay. Ah, there's no need for the ending tax. I just added them for your convenience on after that comes off course, the very known but in tax. So previously we worked on the input tax and they're type but in tax. But there are also button tags out there, which are most commonly used when you are coming towards the JavaScript side. So I didn't use them before because I know I knew that you want and like the event ever off . No use because we haven't jumped into JavaScript right now are right then So they are using the button tax are used mostly in just strip tag because big of us extra functionality Soto the JavaScript to access them easily. So these taxes will score success about your escape, because when the user clicks the tags after writing in his name, the use the Job Street will print out the text saying the name off him. And inside this button tag, we are given a tidy through this idea that Oscar will access that act. And we have also given a type off Burton, which means that it is a simple but the northern image button or ex sector. All of them we learned in the previous videos, and inside them goes in the name that will go inside the Burton Burton and there will be the Britain closing tag. So I hope that you understand that that every click this button on the yeah thing. Well, you printed out. So all of this was which we have learned for in our forum section off the course. And I hope that your industry that all so that's OK. Okay, so that's good on all here are for him. Guts ended after that, comes after the forum tags, comes up at a paragraph tax, and inside the paragraph tags is where the results will be printed out. So right now it's empty. But when that it will be accessed by JavaScript. So we have also given their toninety through which it will be accessed by the JavaScript. And then we will print out this. Ah, this in the job a strip through the JavaScript when you print off the result in which it was saying the name off the user. So I hope that you understand that. Okay, I will save it over here. Okay, so I hope that you understand that all Save it. So these are the mannish Deimel court everything right now. So I hope that you understand that all. So in the next video, we will go forward and go inside deep inside the JavaScript Court that we're going to write and see what True? How the Jost record with you do go for forward for Java. Javascript. Good. OK, so now let's see in the next radio go deep inside dollar scrip. So to have you accessed the HTML forms. So bye bye for now. 34. 9 Javascript basics Part4 Functions: Welcome back, guys. So in the previous video, we jumped into the ist Yemen on how toe xs esteem and javascript uh, successive human elements from JavaScript. So we only road HTM and the previous sector. So before going toe the javascript apart, I wanted you learned something is some thing mawr some 22 things more about Javascript and I will cover them in the next in this one and the next video. And we After that we will go into the JavaScript part off the form. So I wanted them. Because these are the basics, or JavaScript. And they will be very much used inside of JavaScript when doing world helping. And I wanted you toe be part of them. So the first thing I wanted to do is in this six part or for ah Joss trip, I will tell you about the functions as you have been pulled from the title off the video. So in this I will tell you, Bob, uh, how the functions works inside JavaScript and how they help you toe make your job script cord more sustainable. So what are functions? Functions like are in daily life. Ah, function off break is when the brake is clicked, then the car stops. The same is with JavaScript, another broken programming language. For example, we created a function in JavaScript for just for example, that needed to apply, Ah, to print out something to print out to your name. Then the ah function was applied. Then it will print out the name. So how to make a function? Because the pros off the function are that the function helps us toe maintain our cords visually ability for ourselves. And it also helps us to access the function whenever in the cold. So just like the car, whenever we want to call the brick, we press it on the break. It's called and the car stopped. The same is with the JavaScript, as whenever you would like toa call. It brings out your name you call the function and name will be printed out, so let's do it. And so the first thing we need to learn is how to make a function. So make a function you need toe right? A defined a function first. So let's define our first function. So ah, like like when we were defining variables like over here we ride the variable or war keyword over here so that javascript could come to know didn't offer that we are going to define a variable. The same is the case with the function. So at first we needed to type in the function keyword function, key word so that the JavaScript could come to know that now, after that, we're going toe make a function. And after the function key word, I will We will write in the name off the function. And the name of the function is ah, friend, no. Ah, Brent the name. Okay, I hold that you I hate the name. And after the function name, we also need to add some Prentice's so like just I like I told you before, like in this document or write function, there are some Prentice's over here, So it s o these Prentice's mark that, you know there is an ah function over here and dysfunction documented right function prints out something you would like to dive in it. So the same is regretted. It said that after every function you need to place Prentice's so inside the Prentice's goes in some attributes that we will learn later about something there during the course. So after that comes the curly braces. So inside these curly braces or cause the multi line chord you want toe perform When the function is called the thing, the function is called off perverts. So Ah, we need to print the name. So at first we need type in. Let's at first commanded, scored out. That's command this code out. Okay. And inside this function, let's go forward and write some good. So I want to print the something when the function is called. So I want oh, call documentary, right, So that something could be printed and displayed on the screen or printed just and average typing some string on my caller. My name is John. Okay, so I will save it over here. So we have made a function, and inside the function were defined that when the function will be called somewhere, then this tax would be displayed on the screen. So that's OK. So if we go right now, I run the life you and check that nothing would be displayed because you haven't called the function right now. So to print our distressed over here, we need to call the function so that this document dot right matter could be run. So I would like Toa Go Dahlin, virg and call the function. And we can call the function by this typing in the name off the function brain the name on importing some Prentice's afterwards and saving it. That's OK. And now eso through this we call the function right of it. So they're small way to call the function print type in the name and offers over some Prentice's So Mark my words there these Prentice's afterwards, whenever you are writing a function or calling a function, these Frenchies are are totally important when you are writing enough from the functions name defined when defining the function and Wenger calling the point function. These are at most important things. So I will save it right now and run the life review. And as you can see, our name is sprinkled So that school thing. So that means that whenever you like, we could call the function And I would like to show you another thing that if I go where and right on something learning Okay, so think of ordered. What do you expect that this line off old should be printed for the string or district should be printed first. Think about it. And now let's go and check the moment of the truth. Ah, as you can see, learning JavaScript is printed for My name is John. So why is that? And some of the clever ones off you should have expected that. But why that does did happen. Why did it happen? So let's go back and analyze accord so or here We created our function and we are made the function bring toad and dext. So the function when coiled with print order text. So first, let's go forward and check Hold the JavaScript roost accord. So JavaScript comes to the function. It sees the function and finds a function units memory offer that it doesn't read the content of the function at all. It moves forward and goat goes toward this line in which document or try it is over here and in this document art, right. And so inside this documentary, right, we print out this learning dollars group text. So after seeing the name off, the function comes over here and see the prints out this learning javascript and after that goes over here and here, the function school and a vendor function, it's called. It goes back to the function and sees the content of the function and then runs the content of the function. Sadok means the after seeing this learning JavaScript. It then goes back to the content of the function because you call the called the Function opera words. And then it bring solves a document or trite eso that the cool from personality off the functions as it helps us to call the function whenever it more if we want. And until we call the function, its content will not be printed out. So that school. So I hope that we learned or a lot about the functions today. Ah, and so in the next video we'll meet and learn about some of the other functionalities off the Oscars and some of the basics things off Alex. So let's see in the next video 35. 10 Javascript basics Part4 If Else Statements: Welcome back, guys. We start we start in this video from the very left in the previous video and in this video we're going to learn both something more about the house. Good basics. And after the functions come, the dollars get basics off if else statements. So what are these? Everything else? Statements. So these if n l statements work like if ah, like you say something through the you say something to a person that you event a person comes into your office. You asked the person every time that what is your name and are then you process the name that if his name is John, then let him enter the office as don't let him into the office. So this is the way the javascript FNL statements also works that they work by that If a person is If this is this, if this is happening, then do this as do this. So that in one case do this. And if the case isn't that is the case isn't acceptable. Then do this thing. So I think that it is clear to you all know So now we will go forward and see holiday If I know, state mentioned decks works savage over here and create an infernal statement and of writing if and if is a key word and often that ever make a statement that if this is this like if you can see if one is greater, then one is greater than do it is it isn't so. That's why it won't work. Then do the faltering things then, friend Oh, sorry. Sorry. Don't commander type no commandant right over here on. Then one is greater. Then do. And if isn't this the case, then do this, which is document or tried, and one is lesser then to So that's save it. And let's command this out so that this doesn't runs and get into our if, Anel statement. Oh, yes, you have commented this out and let's save it on. Go to lie preview. And as you can see over here, right on, nothing gets sprint. But why is that? The reason is that we have a syntax mistake. So did, or the thing that we want toe typing as the you can say as the you can say, Uh, you can say that thing that we're going to see that it is true or falls, then the if statement will work. It should be inside apprentices. So I want to make a this error myself so that I could make this syntax clear to you all know I have a back and reload this than they sprinted out. One is less evident to So that's the case off course. If you're boarding, that's okay. So regard the answer. So we go to know how they defend l statements really work. And if there is the the FNL statement and the court goes like brackets and if the dis conditional this condition over here is true than the if treatment will work and if it is falls, then the else statement will work. So I hope that you I learned about it. So now let's go forward and let's and put this if an else statement insider function and do something crazy about it. So let's remove these comments. All documents, that's do you need it? Okay, so I haven't also to get this over here and I want to take this Ah, prompt. Over here, I want to take these bombs, and I was copy them and paste them over here So I pasted the forms over here inside the function and after the bombs. Over here, we need to type in our name and age and let's take out the age over there. And let's be simple and working with the name and after the name, let's it would FNL statement check that whether the name off the prompt over here is equal toe a man's name and if it is equal, we will print our that you are allowed in this website. So that's jacket. So let's see that if name F name, we'll call the Athenaeum. And over here the the comparison we learned about the comparison All pictures are before and the previous tractors I told you about them over here. No, they will be practically used. So the competiting operator to see that if two things are equal to each other are is equal to is equal. So they compare the thing on the light and right and left each other Well, we're here, so I hope that you understand that. Enclose it inside brackets and I will see that f is f name equal Do a string of the string will be John If he's John. Let let him access to the website else. No access for him to the website. Sorry. So, yeah, that's a brained da commando. Try it. And over here is said that if f name is you got is equal to John at me, that if f name is John, then we want to run this block off board, and it will be you are allowed on this website. Okay? And if he isn't John or he's something else. So we want to go with the else statement and let's run the absurd burn and see him that we went out. That you Sorry. You aren't allowed. So that's good That lead this, um, that's commended out so that it doesn't comes inside. According and van parenting. A multilane cord. Always remember to close the court multilane comments when entering of model and comment over there. Because when you not enter a closing multi language mint, then it could cause errors, has some lines off the court. You want to run, don't run because of dis comments. Okay, so we go it, ask us to write your name is say, for example, John and you are allowed on this website Okay, so reload. The patients say games, then it will say so. Ridge warrant allowed. So our defend l statements worked beautifully. Okay, so that's refined fine with us. Now let's go forward and let's do something else. Let's see that weather. That's also a problem the user for his age and offer from prompting the user for his age. Well, no. Ah see that if the length off the name and the age is ah, for example is ah, for example, No, no, that's rephrase it, that we will see that if the name leant over his name is destined three. If it is less than three, then we will think that it is not a valid name and ask him to rewrite his name because I don't think that there many names with less than three directors. Okay, and and the if statement will only learn. Run Vanda F name Lent is more than three, and the age is more than 10 because this website is going to be off 10 plus skates. So let's do it. And now we'll go forward and hold to access the length off the athlete. So to ecstasy, the length off death name we wouldn't want and build and function off JavaScript. And it is dark length function. And the daughter length function returns a number to us so that that means that we can compare that number toe. Ah, you can say we can compare this number to one in teacher. So that means that we can type in three over here, x Ah, other than tapping s. So that means that we can make use offered as in number. So that means that we can also see that rather dis greater or smaller. So we need toe enter the people with their name which led very whose dentist greater than three. So the greater than sign over here and so this dot land function will see the number of characters inside the F name variable string and if they are greater than three, know that you are allowed on this website and I said that and we will also check the age. So here comes the use off the logical operators we learned about in the previous video. I told you about them and that is the end and operator. And so this Aaron and but you confounded by clicking shift and 77 Here comes the end, and this and and opera logical operators helps us toe run two simultaneous conditions, this condition and the age condition. And after that, if even one off them isn't true, even one of them is false. Then the if statement want to be learned. So that means that both of them should be true for the if statement to run. So after that, we'll dive in another bracket. And inside this bracket, I've type in the age H. I will call the age variable. And as you can see, when you were writing the is very evil, I will have it again. The job JavaScript. The brackets told us that the east was a string age variable, the strength because we have except excesses from the prompt. So as not only do the tips and tricks video, so this is variable shouldn't know are converted, being going to be converted into the you can see the number, so no, let's use that function. We learn and reduce the pars and teacher and in closing inside apprentices and save it. And no, we will compare it to the A number. We'll say that if it is greater than 10 then a law in the website, so it should be greater than 10. Okay, so this is a 10 plus website and then if you followed both of these conditions, then it will be printed to you as this really printer to you. So that's going see the moment on fruit that if we have succeeded or not, though, the problem occurred again, as I thought, because we have not have it in the right syntax off the if certain mint. So why is that why we haven't returned the rights in tax off the first statement. So the problem over here was that the all the conditioners should be included inside a single Prentice's. So I had a two different apprentices and I differentiated these condition ALS just for your sake, but have seen in the real practical JavaScript, we need to make them all inside a single practices. So I removed the apprentices that differentiated them and know if you turn the light for you, you can see North Works hard assets for the name ever type in John. It is four director sore descriptor than the three director Mark, and it's also sin age on every type in 69 six 69. Okay, you're allowed on this website. And if I reloaded again I was Mark and a smaller word than three characters. And I said yes. And if I even I type in a bigger number then 10 for example, I live in 56 you saw then it will displace or you are in the Lord on this website cause one or one off the statements over here wasn't true, so I wouldn't go back there. And I have a I ride nor type in ah name with more than three characters and ever type in an indie jer less than 10. I've been nine. If I do it display again So you aren't allowed because one off the street, it wasn't turning again. So I hope that you love this final statements and the functions we learned in the previous video. And I would like that you go back and you have some funded this according and you go back and do something of creativity with these offenders statements and learned about new and make some new condition als and make some new functions that do something creative. So I'd meet you in the next video. We will very finish our forum Funk form, dollars group Park over there. So by back then 36. 11 Accsessing html in JavaScript Part2: Welcome back, guys. So this time we're finally going to make our JavaScript part off the small forum set up you're going to make which asked about the name to the user. And so it's to finally the time toe right in some court off jog Skip so that we're gonna get ah, the user name and then printed out afterwards inside HTML. So how we're going to do it on, we are going. Firstly, you're going to use some of the tricks and some of the things of our basic Dallas trip we learned in the few years few would use. So you learn about first we'll create a function which I talked to you about in the previous videos and that indeed, in that function, the function will go into this html and get the extra and inside this name field. So after getting the test inside richest name field, it will get the this print area off result and then it will make the text being returned on this result area. So let's see, how does it work? So the first thing is that we go forward and right in a function which gets the name field over there from where the user would write in his name. So let's do it. So the first part is defining ah function. And it really would find by function. And I will name it, get name and this get name function will grab the name field from its place. Okay, so that's doing so. At first we'll go inside the function and first rights in some curly braces and once in the side, the function we will write in some good And this court. First of all, we need to get this name feel name well, over here, over for this place. Okay, in this function. So that's called the Name field. So I will save the value inside the name feeling a variable called Let's name it name or name is the JavaScript keywords. So left Use another variable that scalded user name. Okay. And inside this very evil I writing I will call the document object and a method of document or jet is get element by i d get element my 80. So this is it's mattered. So it's get the element bi i ity and the I. D V type in their sprint is's it goes along all of the elements off the East Union page and get that element by i d. So let's see, How does it get society? So let's first typing I d off the knee input next. And it is the name for you, lady and I would be street over here and we don't want to get diet e. We don't want to get the text box itself this time. We want to get the value or the text that the user residue train inside it. So that acts. Do you use a resident inside it? It it is it's value. So let's get guts. It value from there. So we'll type indoor value mattered. And well, since you're over here, so that is the is the line off ward that gets the value from there. Okay, so we did the first part. Now we also need to access this batteiger off from here and call it inside the function so that when the need arises, we can save this. Ah, this value off this function in this paragraph tag so that it could be displaying on the esteem and screen. So let's do it. So let's save this paragraph tags inside some variable or ah, name result. Okay. And inside this variable we will again all the document object and get this paragraph by its i d. And if in place off i d we have defined class or we have given it a name. Then we could have also used got element by a class or got element by name matters also So these are these are more matters also there except these ones And inside these we will die pinched i d which is a result. Okay, so we have to have been the result i d and we don't want to get the value of this paragraph . We want to just to grab the paragraphs when the need arises we can put this user name string in it so we don't have, you know, for the door value mattered again and close the line over there. So dash in. We have got the two things we want to excess from html, then writing a javascript court. So now let's do the processing off them so as we can no excess this paragraph tags from double script from this to where you believe so below. Let's call the variable name, and when the function is called Ah, when the button is clicked, then we want this variable air dent to be called so that some text could be displayed inside this paragraph tags. So let's call this variable below and be born through typing next content inside it. And then we'll use the text content method and the test one tent inside, which is going to Britain inside. It is going to be the the user name is on. We will learn the off course we allowed after that. The user name. Very evil. Okay, so we have or order function, which will get the two elements we need, and then it will finally give out. The names are print out their name result inside this paragraph tax. So now let's go below. And when the user clicks this spartan, which were named print your name the Denver we want dysfunction to be learned. So let's go below and write some more cord. So for us to do something when this button is clicked, we need to first toe get this burden inside JavaScript so that the person something would be done when the button is clicked. So now we'll get the Burton in charge. JavaScript and have been named variable for the burden. Is name name Burton As simple as that. Okay. And off that avid, you were the same object in matters of, like, above. And I will call the get element by i. D. And the idea for the button is sub Burton or sure for submit Burton. I relented myself, so that's good. And inside Ah, after that, Very close it. So I hope that you understand how to grab the Okay. So dash done. Op Annette. Well, right in the cold name Burton and we will add and even listener. So what does this even listener do is that it stays inside the east email, and just as the user clicks the Burton off the esteem forum then at the same time it score comes towards the JavaScript court and do something that VF stated inside this even listener method. So we'll called, called it. Even listening mattered at the moment, listener, and it will set it equal toe. You set up some practices over here, and we we want to run it when that even happens off. For example, that something is clicked over there. So I will a click even when the button is clicked. And after that I will write in. Ah, I think the thing I want to do, the function I would want to perform and this button is clicked on. The function right there I want to perform is to get name, function, get name function. And after that, if the function does your overcoat, something else happens. And what should be the alternate, the alternate? It will be false or just do nothing for the burden. So I hope that you understood that all so we are did have added three different attributes inside it. The husband chose when what to do sacraments. Your vento first ranchos run to do a 2nd 1 chose what to do and the Thurman shows. Ah, when what to do when there's nothing and the thing does not work. So the second auction for So Dash done so at last we will type in Sam I golden in Tibbett, and it's see whether it works or not. So page open, open. They're fine. You type in the name John. Andi asked him to print the name and the user name is printed. John. So it totally worked. So I will dive in something else on Bring the name under the sprinted. So that's just amazing. A piece of work by Javascript and dash. Very good thing about JavaScript. So let's ah, finish over here. Finish up over here and that's making a meet. In the next section, we will make up or we will together all the stuff we have learned previously inside the scores and gather it at one point and then make a big function functional website which will have everything from less than forums from division tags, still colors inside the text, so let's do it. 37. 1 Project Demonstrations: welcome to the new section guys. And this section is going to be a lord Lord more exciting than any of the sections as this is the final section. And in this finally section, we are going to make our all the best Web vibe website. And in this we will learn about all of the vertebral thing we have done in the previous few sections and we will all gather them and put it in one place. And so it will be like and re my reminder to you for all of the things. And it will also work you for a practical demonstration off hall going. We're going to write world Welding website in the real world. So this will be a lord off Practical help to you. All the things we're going to discuss in this big website we are going to make are going to be the same as we have discussed in the previous three sections. All the same haggle the same attributes, all the same functions, etcetera. But this simple Mr Simple difference over here is that we are going toe, make them all gathered together and we have going to make them in a large scale. So let's see, what is our practical demonstration off the website we're going to make And according to that website view of your going to make a child already ready the website so that I could show you the practical demonstration in this video. And if I click on index stored esteem, our beautiful, you have side boobs up. As you can see, there's some deviant tags here and deviant acts there a heading there and this device just all off the website. And we can also see that there is, ah, video over here and there. See YouTube video, of course. And you can join Judy videos over here, hiding over here, a navigation borrower. So that's a cool website. No, let's go forward. So now let's move towards the second page. And that is about about bitch on a navigation bar on this about page contains Ah, nice list over here with gutters and a nice you can see a nice images over here with some borders on it. And that's good. No, let's move forward. Brooke products And we have some rocks over here, and some cars over here and there. Mortals and a nice little table over here. Also, some special offers over here with the extra doting over here. And at last, the most important page of all is the order each. And here it is in forum, which is in responsive form, like if you type in your name and diving all the very fields over here. And Soit responded the Jalisco run long background response to you accordingly, I give him and in comments I love it on order your dream, right, Burton, And no, uh, alert appears and says you, Jake, are formally welcome to the stock cars were Jill is a Rino Horn called mortars. Your payment will be done to carry car so it picks up the name on the mortal from over here . And then it says the extra features that will be added. You're lucky, our love humorous. So the click or you don't prayer fuels You click on here in the job the check box are added over here, and there is also the mood or through the radio button, the mood of payment. It's all started over here, and the countries all started from the drop down list and so it is returned and you look over here. So that's a good website and we will make all of these tables attached. Editing images, adding a video to your website. All off it inside are inside this section and we will make this beautiful upside. And you can mold this website the way you want. You can add some extra cutters of extra images and some extra navigation bars are some other type of forum or etcetera. So I hope that if you meet in the next video where we start building this beautiful page so bye bye four. No. 38. 2 Building up the main page: Welcome back, guys. So finally, we're going to start making our Web page the practical demonstration off the first webpage on the full of weapons we're going to make from all the sections combined. We learn everything we're going to put in this single website so that we could get a practical demonstration off what we learned and hold that it could be used inside a webpage . So let's go forward and do it. So the first point over here? Yeah, I've centered Update html Beach. Simple issue memories for you. And in this video, we're going to make a simple HTML page without any CSS or JavaScript Sacra. A simple CSS speech. And the title I've given over here is the stock cars. Tigerland by have given this title because we're goingto make a weapons off cars company, and it cause companies doing the marketing from there. And it is showing the world of which mortals they have and the pictures off the mortals on a video or their sector. And the car companies also giving the users ah, a chance to buy the car from the website itself by using a forum. And the javascript makes the forum responsive one like ashore during the previous video. So let's do it and no, let's go and jump right into it. So I'm going to hide the body tax on. I would make my first Vivian tags. Andi. I would call this deviant tag heading tag the levian I got. Give it to class off course, and inside I will put the hiding off the web, the webpage off course. So I hope that you understand that. So I report that last name over here as the heading class on inside the heading Medical off the webpage on inside it haven't included h one tags off course for headings and D. C H one tags have the heading heading. Okay, so Dr heading the floss After that we need to enter a navigation bar inside our webpage, so we will add some links to it. And so let's make a second division class and called it the navigation class And inside this navigation glass and we will make a navigation bar off all the links off the different webpages. We have included an insider website, so I would go forward and I will create another day of class and inside the glass. I will make name, give it a class attribute and give it a name off navigate short for navigation so that we again understand that this is a navigation bar over here and that we will are some links over here to the other webpages for no, as you don't have the other webpages included right now. So we will only well only right nor just make them simply some hash tag addict. And so that estimate does not get confused over here and just passes over it as we have, including hashtag over here. Like I learned you before this sabdarat another it egg and inside of it all that HR Yep. Tax and I made a spelling mistake of off. So please correct it. I've learned under another hash tag over here off the dead linked to no, that's copy and paste this so that our time is invested because we have learned it before also, So we operated on navigation bar, but with some links inside it. So we will finish the navigation bar deviant tag over here and start into the TV intact. And this deviant tag will contain the most off the body the most of the content of the body that goes inside it, and so did the major content. You can say deviant tag over here on the major content goes inside it, and I would give it a class Attribute. Andi, let's go over it with your content itself. So I recorded major content so the major content goes inside it. So just to put all the side columns and the major, call them inside. ID with most of the content. Go on undressing. Same deviant close. So I hope that you understand that on after this let's make another TV in class Jadeveon tag and I will call this to be intact. Give it a class attribute off, and that's called it Let's call it the side column or the column side Azaz. Ah, stretchered. Before that, we will give all of these all of the division classes under the this deviant tag the same starting with the column and after the space even named them side or the middle. The columns they are. So let's make the side column and inside the side column avalanche, raise free Dag three. Dag, Andi. I will call it side. Call them So is the same procedure we did in the previous. You can see previous testing when we added some. Ah, that page isn't stylized them inside our this section four and learned about the deviant tags over there. So I hope you remember them and have allowed paragraph drag and I was golden. The kiss is the place the, uh, side or side north school. Okay, so that good, that's good. And after that, I make another deviant class off course for the central page invested or in the center of air. All of the content will go inside, So I give it a class meeting. Call them off course Golden will go first. And after a space, I will enter the middle on it. This middle specifies that whether it is on the side or the middle off course, there is decide. And here's the middle. So this is the middle one of the major Urban were the most of the content goes inside and in this mid middle month vehicle at a nation to dag on call days to Dag middle content. Sorry for so much ems over there. A middle on dent. Bold inside. Over here. I've learned an exclamation mark enough that I would go forward at and paragraph Dragon? Yes, right in some thing over there. So that I especially that here I have added a paragraph back on after that, have a copy. This called him aside. Column one DV intact and pasted over here because we would like to side columns one on the right side, one on the left side and a middle column in the center where the major content goes in. So I hope that remember that when you created the previous time and I showed you also in the video in the previous time. So we have created our three deviant tag Ah, off them in them. Inside the deviance, the tag off the major content off class mature content Every a created a being tagged with a class navigation and I did some links inside it which are not right now, given some links to other websites because we are great. Those website rather are given hashtag so that we could pass through this legs. We don't getting in the water and we have Gordon Hedrick haggled so heading Debian gloss. So we have made the base html of this website right now on, I would go and see what we have got over there. And so this is a basic human right now off all of the websites, all of the webpages we're going to including this website. So we are in this website. We're going to call simply the middle content side. Call him on day two side columns and a hiding tag. Having Davian and the links to other webs webpage is over there. So all of the webpages in this website will follow this procedure or this template over their Soviet creator of basic human template. Over here in the next video, we'll create a basic a CSS template on. After that, we will start writing different webpages and create the style. I stable, stylized this on some forums and some responsive Jolla scriptwriter going. So let's back up over here and I will meet you in the next video where we'll start adding some CSS to this content and make it some stylized. So bye bye for now on we would meet in the next video 39. 3 Styling the main Page: so welcome back, guys. So this is the next video over here, and you're going to add some CSS toe are a steaming page over here. So whats Yes, I said we're going to add off course. We are going to add some CSS to these deviant tags over here with some, uh, patterns, margins and some background colors through this navigation bar and some link decorations over here and after that, via goals work to add some decoration to our content. Over here, this content off are a paragraph tags and some h H tags going turned over here sector. So I hope that you understand that. So let's begin and write a CSS. So, as this is, we're going to write a basic template. CSS on this CSS will be used in many different wrap sides of the pages on the same website , so we could really will create a central main door CSS webpage were all over. All of the webpages will access that may indoor CSS from from the thinks they have insider so creative new file on I will save it as me and or C S s on it is before Lee named a CSS Gold of Door TSS extension. And after that I was going toward the head tax on Have a at the link to it. Link bags, think dags and inside the link tax over there than attribute off at your yet for to show that we're going toe attached. This Weps a webpage esteem a template to the $1,000,000 CSS after their dive. It ah also said the type off the the type off the link on the ty