Rapid Webpage Creation With Emmet (HTML & CSS)

hello guys how all were doing welcome to a new video from my pillow is today's one we're gonna talk about faster image or faster web page creation on HTML using image so if you're on our image or what image is M it isn't like a toolkit for web developers which allow you to clearly create web pages very quickly and fastly in in a really really nice productive way so we're just gonna help you a bus or if you are like what developer Emmett is just the best choice for you so if you type I feel getting bored of typing a chemotaxis girl and over again a lot like the same thing tables div like a lot of times and creating a lot of HTML tags for a single web page and or if you're dealing or if you're actually a freelance you are dealing with a lot of web pages and you're getting bored of retyping the same tags over and over again image is the right choice for you to go ahead and learn the signs of all that it's really very simple and very easy for you to use since if you are what people call your ordinary CSS and image sensor SS have some like prerequisites shared between both of them so yeah you can clearly understand image right on the box so here's the image I owe the the official website of the Emmett's Emmett is available under code editors like Visual Studio code and add some pre-installed on that as well as sublime so if you're like one of the lovers who love or use one of these code editors so you can just use it right on the box beside if you have any other code editor make sure to go ahead and download that and one style for the particular one and this in our case actually I'm gonna use Visual Studio code because it's the right thing it's the best thing or the best code editor for me and for a lot of people actually are saying that this is the best one for web developers so make sure to download it or use your code editor you can take a look on an old documentation and stuff so I told mass this like a cheat sheet a very cool one an official one you can get to the dog stop em at the IO four slash sheet dodge so this is gonna give you the shittiest of the you can just go ahead and take a look whenever you forgot how to type something or a specific element how to do something in mncat Aviano if you want to learn from it this is the basic way or this is from where you need to go ahead and start just start looking on how things actually get to work start by the step and example and here copy paste them and you go you will learn obviously so let just go ahead and start with M it sorry this let me just go ahead and open up features to do cup so let's go see how like a very basic projects in here at oz ha it does have two index to move to points actually an HTML file an HTML page and a CSS style so M it's actually both works for the HTML and CSS it's works more like better for the HTML web pages or more sophisticated for HTML web page now as I've said which is the darker it has that installed automatically now if we try to type HTML only if you remember if we want when we want actually to create an HTML page you need to go to through all of that we created the HTML tag we create the dark side we create the header will create the body we create the footer all that different things but with MS all we do is just type in HTML it's because you would get this really nice until Isis thing you can see here can take a look there's image elevation and we can send select HTML the fifth version on HTML XML we select system over version just by pressing the tab key on your keyboard you're just gonna give you that really nice boil very quickly and how we have with I like a boiler pan or web page boiler pad set it up for you right out of a box you can use it it's very simple as you say as I've said it's very very basic thing to setup and pretty easy to get started with so here's how you can create a very quickly an HTML page using image now let's say you want to create a depth like a div elements very quick for using image all your talk is a dev you click the tab and here you go you've got a depth and created for you successfully if you want to like an h3 you get text you just put like this click tab and you go you can have like small you can do that you want saying input you do that it gives you the type automatically for you you can add all the Jews as well as owners or fourth so really quickly but that won't be that great thing what image aren't a lot of other things you can add custom attributes or classes and ID's of the elements by typing the image ms command let's say we want to have like a dev elements or a div tag elements and that's we want to class a customer class and we want this class to be my class and an ID my ID so to do that we type in the dot the dot represents or tell instill em it's not gonna like putting a class in here so it's gonna be our class for my class and you tell it what we want some ID is parts and bypassing it or giving it a hashtag so hash tag then my ID now if we try asking to make sure together I hope this one on visual pseudo code make sure to get the the inter license thing here that will ensure that image is working pretty much fine for your project just by pressing the tab key and here you get so you get the class automatic a nod for you you get the ID or the matter if you aren't for you you get the dev thing and you can just stop adding elements right up into it with no problems let's say you don't do that you will want to add an h3 with this one you have like a class and with an ID of title you press that and here you get your game pad so you can type in the text in here and so on and so forth now let's see this h3 or you want and a P element or a paragraph element inside that paragraph elements list is sensitive paragraph you want some text inside that using curly braces just by curly braces in here you can put in text by also putting quotation in here just double quotations and you can put in whatever text in here blah blah blah so blabla or something I don't know just by typing the the tab key and here you get you get bands between those as you can see we get the quotation over here you can just remove them here so you want like with occupation actually we just put that using this as you can see press the tab and we get the text and I've added for us automatically so yeah really quick really very easy makes our lives way much more easier with what developers recreate pages a lot and if you're like trying to get into freelancing or if you have your own company your own projects you're actually facing a lot of damp or a lot of HTML web pages creation so this could be the best solution for you you can have for now let's say you want to have like something else you want to create a list so like ul lists inside that you have like a list or list item and so on and so forth so how we can do that you will use the URL so remember we do that we give it this but we don't want the UL only you want a ul with the children and a large so or what mid list with an item as us of child in fact we don't want actually one item we want like ten items on that so it's gonna be really boring to go ahead and create that manually like the first item the second one the third even though copy pasting could be like a little bit you know ugly and I'm not good at all so to do that we use the like the right direction arrow that means we're gonna like import the child and which tried we want is an aligned so that tell it we wants a ul ask the others appearance and aligned as a child of this parent so the airline you want to give it to class so the class is gonna be they can find him and we want to give it an ID of my ID simple just by pressing the tab and as you can see we get only one so in fact what it wants is not only one we want to ten so ten we use the multiplication sign so the x sine x once time a number so times ten done as you can see we get ten items inside that let's say you want like two or three but less items each one that is ten items inside out time or an inside line let's so here we give it like three then the alloy we give it time ten so if we try to do that make sure to delay the last letter and just put it again in order to get the nth alliances and you can omit recognized successfully just by putting that as you can see we get 3 UL list inside each one of them has a 10 li list or Li items and we with the classes and everything very very basic thing very very nice for us to do let's say we want to like you LS inside an MRI and we want on the class gets numbered from one to ten like an ascending order so the item or the class we want is the first one is like a 10-1 the second one item - 2 - 3 - 4 and so on and so forth so we won't do that's how we can do the numbering just by using the dollar sign so the double sign just we can catenate the dollar sign with a class or even with the Iron Age is going to work pretty much fine so this will add the numbers to the one Ibn and on numbers to the class now if we try to go ahead and do that we press the top and as you can see gets item 1 item 2 item 3 item for item 5 and as I want to so forth we can use the data just by just putting the nation' here if you really want to do that pretty quickly and as you can see we get that so we are you can do a plenty of other things in here you can use tables and some tables you can create other elements and so on and so forth using times using the ID using the and have the things that events offer socially so you can take a look on this class under the sheet sheets because it's very important for you to take a close look in here just gonna make your life much more easier let's see we're gonna like create three different tag elements of it so to do that like we want to give n AP and like an h3 on a small so we want to Deb to tell us that we want to create it yet with like my class and we want to create another element just by typing one single command we use the plus sign now we give it the second lmf you want let's say one like an h3 then the plus we want a small with an ID of 90 of ID just simple just pressing that as you can see we get three elements by the order that we have sized the dam then the age to read and the small with the ID in the classes and everything is pretty much working fine so I was cursing here you can you can't do a lot of other things using the plus sign here means that you need or you actually going to concatenate multiple tank elements with their classes and their IDs you can here multiplication to create people support elements you can add inheritance or parent and child when using the rel like the right arrow and someone and so forth you can do a plenty of other things so especially in here you can you can do that you can create also like inputs really quickly you can create like input color and import number and checkbox just by putting that right away so let's say we wanna I can input and an input password so just by typing that we get some inputs of a type password and the name just an empty and on again empty you can just fill out like freely from your world from your gun passwords and you can you can do plenty of all those things you can just go with like an input checkbox or you can just go ahead and copy dance just for learning purposes and typing the next one and you get the type object Boston someone and so forth you can just go ahead and middle any pants you can use them and I'm here to know more about that you can just put in near like scripted pure if you're trying to put a Java Script in yours near and you can do that so yeah it offers a lot of things a lot of things to do here with the sources sources x objects in area and medians and stuff like that i will recommend to go ahead and check this cheat because it's like an official cheat sheet and it's free for charge so just go ahead just putting that on your bookmark in here also what people are gonna need it over time so yeah it's gonna be very helpful for you as your as you going on your career so for the CSS right now so CSS is pretty straightforward actually you don't have that much of complicated thing but image makes it more simpler even more simple actually so you can add just only a pause means a pledge a position of relative pause pause and a colon and as that means position of static and absolute relative text and yadda yadda yadda now if we try to like to go with the style and let's say like we have a class for my class and let's say like we have a position so we want to like a static position on here report that anyway gets a position like a static position to go back I don't know let's go with the I don't know something that drifts into bits well let's go with like background color clip no no clip so let's go with the let me see that so like background color and we give it the base black color so like just by BG that means the black color you can change the color in your over you once you can give it up for the whites and vice versa you can just give it a another hex color value and so on and so forth so you can you can do a plenty of other things let's say you want to like do something else would say like we're gonna do black board or something so as you can see we have like a border - left - color transparent so just by putting down vdl so in DLC just pretty much it gives you a bottle left color but it quickly you can you can type down snippets and here and it's gonna give you that really nice things so let's say like a text align so text online here take some line left or fun size as or like font style and you can give it the phone style like a board or something and yeah but this CSS it's actually on its own it's very basic and very straightforward but emails make your life even more easier to use and more easier to understand so yeah that was actually for the image as you can see as you have seen on the demo that's allowed us to creates and tag elements a lot of them I shall be very complicated hierarchy in a very short amount of time in a very quick way in you can you can be more productive about that just by reading the shitty is gonna make you way much more powerful in this if you really intended to learn that if you really want intending to be like a good web developers specifically or especially for the front end because you create webpages in here that means you're gonna need to learn image because payments are being the most important things now in what develop ins a lot of what you've also sexually are trying to learn that's because it's just that nice thing that you need to add into your toolbox to your career and stuff like that and you need to learn it on your own your career so yeah I'm not sexually guys for me for this job story or that was very basic thing just learning about the image for those of you who doesn't know about the existence of such plugins of such toolkits make your life way much more easier actually so I think that's watching again I really hope you enjoyed overview and make sure to take our website for any other tutorials in here may have like 24 other tutorials if you really want to check them out just Church or get to the Torrio's go to the categories you can find another really nice ones so as I've said I will catch you all guys in the next video story