Use Emmet to up your HTML game

Emmet is one of those things that I honestly struggle to work without these days, and is something that many don't use to its full potential, so in this video, I cover some of the most useful features that it has :).

//// Chapters
00:00 - Introduction
00:39 - HTML5 Boilerplate
01:32 - Basic tags
02:15 - Classes and IDs
04:17 - Nest elements
05:02 - Multiply elements
06:35 - Sibling elements
08:46 - Link to CSS
09:11 - Filler text
10:52 - Outro

#html

--

Come hang out with other dev's in my Discord Community

---

Keep up to date with everything I'm up to

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[greenonionsalad]

One more thing to add which is one of my favourites is adding a $ which increments each item by 1. For example, ".colors$*5" will give you 5 divs each with their own classname (color1, color2, color3, color4, color5)

[mirshahbazali]

You can also do
ul>li*3>a[text here]
To add filler text

[MrJbramirez]

this channel is gold. you deserve a long life kevin!

[metalfacemartinez]

I LOVE Emmet. It cuts down on the tedium of hand writing HTML. Imagine using it with voice recognition. Now you're the programmer of the future, baby.

[marcelino-dev]

I have been using Emmet for a long while without knowing that I could just hit the Tab button to move inside the elements. You just taught me something really valuable. Thank you!

[Wukwuk]

I learn web development for 3 years in Vocational High School, and never ever my teacher teach me this at ALL, and I wonder why I'm so serious about school lessons/projects while I can learn better on youtube. imagine having a teacher like you in my school, probably could launch my own website company with 3 years of your teaching. Thank you so much, u might be my dad on my web dev journey! xD

[marcotronic]

Great! Didn't know about emmet at all :) To those who are also wondering (like me) why it doesn't work out of the box... You don't have to install any plugin/extension. Just make sure you save your empty file as HTML file first - then it's working ;)

[skillzorskillsson]

One thing that i like about emmet is that i may have a wrapper div and inside that div i make a nav like .wrapper>nav>ul>li*5>a but then below the nav tag i may want to have a div.container and inside that i may want a div.content. I can use parentheses like this so that is even more advanced but it is so useful. I love emmet

[karinarodriguez]

I don't get tired of saying that you're AMAZING! Thank you!

[taipham]

My friends have been recommended to your channel, so I really grateful for that.

[mohan]

Amazing "Kevin" and "Emmet", I love you both.

[Pfoffie]

When I learned about emmet some years back…
I have never been the same again.

[SerilaBuck]

One of the usefull thing I set up in Vscode is the shortcut,
so I can make a selection, or multi selection or place the cursor wherever I want(even in non html files), hit the shortcut, and wrap or insert my emmet generated html in place.

[ghomri]

My mind is blown! I have been coding HTML for 9 years, and I didn't know it could be this easy.

[seggremalac]

Hi Kevin,
First of all thank your for this video. I'm new with VSCode and it will help me a lot.
I really admire your knowledge and love your calm and relaxing presentation style. I started one of your courses on Scrimba and that's brilliant too. I know a lot of the topic but my knowledge is outdated. You fill up the missing parts and help putting it together.
Thank you!

[adnanamin]

That GLASS looks cool, Kevin! :) Awesome tut!!

[PaulMcCannWebBuilder]

Emmet has other 'implicit' tag completions too. div>.classname will give you a child div but a>.classname will give you a span (since a is inline, only inline elements should go inside it). ul>.classname gives you a li, and table tags build themselves. Something like:
gives you all the proper nested html.

[mikematenkosky]

Kept forgetting about that Lorem Ipsum "trick". I'm just a "hobby web designer", so I always learn something from you. Thank you and keep up the good work!

[StephenMoreira]

Life changing. Something I always knew of but always ignored. Thanks.

[gbdaeye]

I noticed how quick you were able to add the tags in one of your last videos, so this video is much appreciated! I tried typing 'html' after watching your sass video at the start of a VS file (without any extension loaded I know of) and it came up with the declaration. I have learnt so much from this new video. You are so cool. I am headed to your courses.