Up next in 10
What is EMMET_ Faster Code Html & CSS
7K views
Mar 25, 2024
"Discover the power of Emmet in speeding up HTML and CSS coding processes in this enlightening video. Emmet is a productivity tool that allows developers to write HTML and CSS code faster and more efficiently using simple abbreviations and shortcuts. Join us as we delve into the features and benefits of Emmet, learning how it can streamline your workflow and boost productivity. From generating complex HTML structures to quickly applying CSS properties, Emmet revolutionizes the way developers write code. Whether you're a seasoned developer or just starting out, mastering Emmet will undoubtedly enhance your coding experience and accelerate your development projects."
View Video Transcript
0:00
Today, I am going to tell you about Emmett polygon
0:03
In this video I will complete guide you about Emmett, its introduction, installation, and why most developers
0:09
like this package. Hello guys, my name is Tanvi and you are watching Dark CSS channel
0:15
So first of all, if you are new here, please subscribe my channel and hit the bell icon for
0:20
notifying about my upcoming videos. Now what is Emmett? Emmett is a third-party polygon for web development
0:28
It reduces most of developers time on writing HTML and CSS code
0:32
Amid is a toolkit that helps developers to write down large code block in HTML in a few
0:38
lines using Amid shortcuts. Amid shortcuts help us to writing large email code blocks in few seconds by just writing few lines
0:46
of code. Amid is a plugin or package that we can install it in any text editor, like Atom, VS code
0:53
subline, bracket and extra. In this video we will install this package in the video
0:58
item text editor. So let's start. I have you already installed atom text editor
1:04
So open the item text editor and go to the top of the menu and click the file option
1:10
Then click the setting and then go to the install option. You can see here search books
1:15
So simply write here Emmett. Now you can see here the Emmet Pelican is showing with option install
1:23
So in your case it shows you install option. click and install it
1:29
After the installation is completed, then close the item text editor and restart it
1:34
Now you can see here we have created a file name Emmett. HTML
1:39
Here we will practice of Emmett shortcut. So the first shortcut is exclamation for writing a starting text of HTML code
1:47
So here the top here write exclamation and then press the tab button By pressing it it will write all starting HTML text including meta text So if you don want to write meta text then you can simply write here DOSC4
2:04
Click the tab button, you can see here automatic Emmett write starting HTML text without
2:10
meta text. So you can see that how Emmett is useful for developers
2:15
Simply rewrite one later hour and makes it a complete code. That's why most of the developers use this polygon in
2:22
their text editor. Now the second step is how to write another text in HTML 5 like paragraph tag, heading
2:30
text, ETC. So for heading tag we simply write HVN and press tab button
2:36
It automatically makes it heading tag. For paragraph tag we write P and press tab button
2:41
It makes the paragraph tag and for another text write the name of tag and press text to
2:48
make a new tag. Now the child tag. To make a tag and write a tag inside a parent, we simply use image shortcut
2:56
Write parent tag and then add greater than sign. Then write child tag, press tab button
3:03
Simply we have add tag inside tag. Another example of child to make a nave tag by its child dual tech and ally tag
3:11
Now to make sibling of tags, write a tag then add plus
3:16
By this we can make multiple siblings' tags. Grouping our tags. By this method of Emmett, we can make a parent tag inside its siblings and then its child
3:26
To make it, simply write div at small bracket, inside it a header tag, then greater than
3:32
sign, then UL tag, then UL tag, multiplying by two means two ally tags
3:39
Close bracket plus another sibling tag, footer, inside it paragraph tag. Press tab
3:46
You can see here we write a shortcut and Emmett makes it complete. This is why most of viewers use it Now for the ID and class attributes For class attribute simply write dot and without spare write name of the class
4:01
Press tab, automatically class will be added inside a div. And if you are adding class else div, then simply write tag name, then add dot and class name
4:12
Press tab button. It's easy way to add class or ID. Adding multiple classes in one tag, then write tag name
4:19
Then dot class 1 name, dot class 2 name, dot class 3 name
4:24
Add the last press tab. Simply we can add by this way. Now for the ID attribute, write tag name, then write hash, then name of the ID and press tab. Multiplication
4:37
How many times one tag you are going to write? For that way, simply write parent tag, then its child
4:44
Multiply how many times then add its child. Press tab. You can see here
4:49
We have added one take many times by multiplication shortcut. Inside it, we can add classes to all text by multiplication method
4:58
And class name changed by numbers of it changes by adding dollar
5:02
Press tab. You can see classes are changed, class 1, class 2, class 3 and class 4
5:08
Now for linking external file, we have shortcut, link, and press tab
5:13
Now put here file name with extension. CSS shortcuts using Emmett. Now we are writing CSS code with AMA shortcuts
5:22
For this, we are lacking basic properties and values in CSS. So for margin property, we write M, press tape
5:29
And if you are writing margin left or right, then write M colon R for margin right and
5:35
M colon L for margin left. And method for padding right P, press tape, for add padding right, PR, for padding left, PL
5:46
For clear property write CL For color right C press tape and for maximum width write M Minimum height write MIH For width write MIV
5:58
Now for font, write F. And for font family, write F F F F
6:03
If you are writing font family with value, then write FF, then column, with value for times new
6:11
Roman font simply ff colon then t press tape. That's all. For Vardana font FF colon H
6:20
Now for font weight shortcut write FW and with value write FW colon B for ball
6:28
FW colon value like 600 or 500 to value 500 or 600
6:35
FW colon L for font lighter. For text decoration, write TD press tape and colon태 for value
6:44
For text align with value, TAL colon R, for text line right and TAL colon L for left
6:51
For background property, write BG and for background with default value BG plus press tape
6:58
For background image property BGI press tape. For background color BGC press tape
7:05
Transparent background value press BG plus. T press tape, for content property, CNT press tape
7:12
Now for color right C press tab and color with value RGB, then C colon R press tab, for border BD
7:21
for border right, BDR, for border left, BDC. So this was a short tutorial about Emmett
7:28
Here I am teaching you simple use of Emmett. For its complete shortcut in HTML or shortcuts for CSF properties, I have provided a
7:38
chat sheet slide of I met in description. You can download and learn from there
7:44
I hope you liked this video. Please like, comment and share with your friends. Thanks
#Programming
#Scripting Languages