Guys we saw a lot of things in the last video All I'm going to say to you guys here today is that while accessing this playlist, just open the VS code and create a new file, because HTML is not a big deal. That's why we are not going to waste too much time. But yes, I will give you an understanding because I have promised that the course will be for beginners. So here I will quickly die this exclamation mark And here you guys are watching Emmet Abbreviation, a lot of people have said what is this Emmet So here as soon as you write this excla mation mark and hit enter So, look here it has automatically given me some auto complete And as you guys can see here I will tell you people here that it is better to do this than to ask such questions. Yes, do a google search See, Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML So, what is Emmet doing? Emmet provides help to you people whenever you are writing HTML it provides you a medium to write fast HTML. Just understand this and it comes built into the VS code. So, you have the VS code, then you have Emmet because the VS code people have adopted Emmet and Emmet comes built into the VS code. So, I have put a boiler plate here and along with installing the boiler plate I will also write the title here quickly. So, I write Heading Paragraphs and Emmet Ok To save Ctrl + S And as soon as I live server, which will click on go live My live server will start as you guys see here And here i just set the title and nothing more And for the first time here we are going to write something in our body So, I am very excited. I would say you guys just write h1 and you guys will get a suggestion hit enter and write in it write in it Harry, write my name, ok then type a p and hit enter and type in This is Harry, okay And you guys will say what are you getting written Harry brother what is this p letter, what is it h1 So, h1 is our heading tag Anytime I talk about tags then a tag ends with an opening tag and a closing tag. opens with the opening tag h1 is the opening tag and this is the closing tag here And as soon as you see I am clicking here then I am getting arrows So, I would like to do h1 to h2 so it will be like this But here I'll just put h1 And I will show you people how my content came So, under the heading I have written a few paragraphs Now I wrote h1, h1 is the biggest heading And we have, we have h1 as well as one we have h2, we have h3, we have h4, basically, we always have till h6 So here I will show you people till h6 and look here how the size varies watch it, it gets bigger to smaller And a paragraph is a paragraph So, this is our paragraph tag Anytime we have to write a paragraph, I will write p here If I have to write a new paragraph, I'll write it here this is new paragraph And here you guys see this new paragraph has come by writing I'll just delete this paragraph, ok And here I will tell you people that whenever you people are writing your HTML page, any website you are making. There should be only one h1 text in it And it should not happen that you are using headings to make the text bold this is absolutely wrong. Heading means heading, so use it as heading Because if you do not do this then your search engine optimization will be bad, SEO will be bad. That's why we'll use the heading where we actually want the heading. Now here from h1 to h6 I showed you how the size varies I should write h6, yes, it is correct now So, after doing this, you guys look here very well I see the size being varies from h1 to h6, okay Now here I want to show you the power of Emmet Suppose I want to produce dummy text Now as I want 10 lines Either I'll copy from the internet, or I'll do this And it's too messy to do But what is in Emmet if you write such Lorem And after Lorem you guys write as if 4 and hit enter So, 4 words it gave me by inserting 1, 2, 3, 4 And if I do Lorem40 and hit enter then look at this it gave me 40 words inserted And to remove this horizontal bar i will go to Command Palette type toggle word wrap here and hit enter look this my text will not fall out now So anytime you want your text not to fall out Clicking the Gear, Clicking the Command Palette, Type the Toggle Word Wrap and select it If it is copying then it will not come out and if it is not coming out then look at the text and you will get the horizontal scroll bar Its shortcut was also written their Alt + Z although I did not remember And here Alt + Z does not work then we can do like this I have saved here with Ctrl + S To save to do Ctrl + S And look here obviously our page will be updated And look here the words that were here are here And if I do not write this here and do Lorem404 then 404 words will be inserted and look at this such a big paragraph has come here So, here's Emmet's power Right now, I need only 4 words I am working with Lorem4 now So, what did I do here Put a heading, put a paragraph, okay And as you guys see here, took all the words I wanted, with the help of Emmet. Now suppose I want to insert 4 paragraphs then what will I do I will write p*4 and hit enter See I have got 4 paragraphs So, I will then press something like first, second, then i will press tab, 3rd, then I will press tab 4th, so in this way I can bring multiple elements of the same type in this way So here you can see first, second, third, fourth these are all paragraphs And with Emmet's help you guys can bring it, right So, this was Emmet's power At the same time, you guys see one thing whenever I write p like this and i will close it see automatically VS code has given a closing tag Because p is a tag that needs to be closed So here the vas code is so smart that it understood me and closed the closing tag Very nice VS code And here I insert some more words by writing Lorem34. And look here, it looks like this right now and I will talk about some more tags Look nothing happens in HTML, only tags happen. And along with tags there is attributes as well, right? Like h1 is a tag, h2 is a tag, title is a tag, meta is also a tag charset is an attribute of it So, this is just a collection of tags There are only a few selected tags which are important So, there is no need to memorize at all how many tags are there remember yourself as you will make a website, okay Keeping this point in mind, let's move on And now what we will do here is to see about strong tag here So, if I write strong here Ok strong so, it suggested me I write this is strong inside it And I'm here to show you what effect it had in this is strong it will make it bold Ok And if I put an em tag here along with strong em means emphasis So, i write here, This is emphasized That is, the one who has this portion has to show it in a different way. See, This is emphasized look, by default it's made it in italic way but with CSS we can change What does the content inside our emphasis tag look like and what does the content inside our strong tag look like? For now, it looks bold I zoom in to see the page a bit But right now, we are not using CSS that's why the pages are to be seen ugly to us. So, you don't understand why the pages are appearing ugly Pages will look ugly now, will look useless But in the coming time when I will tell you CSS and we will decorate this page with the help of CSS Then this is exactly what good websites are like As if taking an example of a very good website It would look like this, okay and google.com looks fine too and youtube.com also looks fine too And there's a lot of examples like this, right Anyways, Now what I'll do here is that I'll be back on this page and I'll show you next Now see if you have to take a line break how do you get it I'll show you one thing first I'll write here first, and I'll hit enter this is a new line Now you guys must be thinking that this first will come first and this this is a new line will come in a new line But if you show people here then, first this s a new line There is no new line after the first, why did this happen? Do one thing and add new lines now let's see whether it has come or not. still not come Let's reload the page, still not come So, what's wrong No, there's nothing wrong What happens in HTML is that whatever extra space you add, HTML ignores it, right? And if you need space, line break then what you have to do You have to use br tag And I have written this br tag here so, there will be a line break here. But you people will say, Harry brother, br tag is written here but where is its closing tag and where is its opening tag? So, this is a br tag, this is a self-closing tag Unlike h1 h1 is not a self-closing The br is a self-closing tag that's why it closes automatically, no need to close it Just put it where a new line is needed and there the line breaks Look, we put a br and a new one has come If I will put 2-3 br more Look, I copy and put a lot of br So, I will get the same number of lines breaks See if I want so many lines, then I have applied br, br But what is it that to bring line breaks by br, br it is not a good practice and I will tell this further when we will talk about the CSS. For now, we can apply the br whenever we have to break the line which is there. and start from the second line below this is our br tag Along with the br there is a hr And hr means horizontal rule And the horizontal rule is also a self-closing tag And what it does is make a ruler Look that hr I wrote it, it made a straight line here And if you want to insert lines like this then you can and hr helps you in that. Now here I would like to tell you that there are bold italic tags inside HTML too, ok but since HTML5 came It's not recommended that you guys should use them. Absolutely you can use them No one can stop you from doing the thing that exists you. Like i write here, bold is here And you guys see here bold is here got bold You guys should make it strong instead of bold and em tag it instead of italic And if you want to bold italic anything else, then use CSS But just to let you know that bold italic tags are there. I am using bold italic here And I'll close it over here like this And look here italics have also come, okay So, there are bold italics too, but not recommended To make modern websites, you should do strong, use em, okay Now here we have seen br, hr, they are self-closing Along with that I told you here in VS Code that how you guys have to create multiple instances of any element using Emmet Like here I am writing div. And or div, I haven't told you yet If I will write p*34 then 34 paragraphs will come So, this you guys can do and here you can replicate very well without copy-pasting things Emmet gives you a lot of power During this video i will tell you the features of Emmet I will keep telling you people during this series. As I use the features I just want you guys to keep listening, taking notes and practicing with me. And definitely you people will also know these techniques I will tell you some such techniques which you might hardly find in any book. Now as if you are writing something as if I wrote a paragraph here I hit enter, I write This is a paragraph Now I don't want the mouse to use it i want to keep my hand on the keyboard i come to the new line So, I'll press Ctrl + Enter and I'll come to the new line Ctrl + Enter Ok, i'll write it here ctrl + enter to jump into the new line, Ok Oops ctrl + s for save Now here if I had made such a new line, then look at it, it would have broken I do not want my paragraph to be broken ctrl + enter then i will come in new line So, hope you guys have understood I have also given a link here which is what I have used And here I will also write one more time Lorem23 for 23 words dummy text and write it well dummy text with 23 words, ok or here, for dummy text with 23 words Come on, now you guys will understand here So, hope everything is cleared If you guys like these videos, then definitely like And make sure to access and save this playlist by clicking here Because that's where I'm going to update everything. And here I will take this course very far I Hope You People Like This Videos Thankyou so much guys for watching this video And i will see you next time.