Use Emmet to up your HTML game

[@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)

[@glory_av]

This is in the cheatsheet👍

[@MoHafiz71]

So nice too, great 👌

[@CaioMGA]

that's nice

[@dysania1832]

oh you meant (colors1, colors2, colors3, colors4, colors5)?

[@mirshahbazali2727]

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

[@oxyaego4594]

Didn't know this one! Thank you

[@utkarshagrawal3640]

Wrong u have to use curly braces for inner text!

[@PaulMcCannWebBuilder]

Square brackets give you attributes, curlies give you text content, and you don't need the li, since emmet knows what goes in a ul. ul>.item$*3>a[href=#]{text here} gives you li's with numbered class names, placeholders for link urls and text inside.

[@EyeIn_The_Sky]

@@PaulMcCannWebBuilder Nice one, thanks!

[@hjetwd]

a[text here] - a[attribute="value"]{text} - text li*3>a[href="#$" title="its $ link"]{$} - 1 2 3

[@skillzorskillsson8228]

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 .wrapper>(nav>ul>li*5>a)+.container>.content>img*5 so that is even more advanced but it is so useful. I love emmet

[@skillzorskillsson8228]

i also really love that it works for css so i can just write bg and hit tab and it completes it and make background #000; for me. Or i can do pos:abs and hit tab and it makes position:absolute; or i can write w for width or h for height and so on

[@skillzorskillsson8228]

Btw, if someone just wants to try emmet before downloading it, you can try on codepen. They have emmet implemented already :)

[@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.

[@JannisAdmek]

sounds really awesome but tbh I feel to lazy to talk abd rather type :D

[@sicfxmusic]

Imagine a person beside you in the office or a coffee shop constantly talking to his computer 😋 and occasionally yells at it 😂

[@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!

[@Wukwuk21]

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

[@MrJbramirez]

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

[@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 ;)

[@taipham6799]

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

[@karinarodriguez2055]

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

[@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!

[@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: table>.row$*4>.first+[colspan=2] gives you all the proper nested html.

[@KevinPowell]

Oh, that's a great point Paul! I forgot about that to be honest, I always write span when I need one. Something for part 2!

[@RameenFallschirmjager]

Nice refresher.

[@StephenMoreira]

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

[@SerilaBuck]

One of the usefull thing I set up in Vscode is the "editor.emmet.action.wrapWithAbbreviation"keyboard 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.

[@KevinPowell]

Yup, wrap with Emmet Abbreviation is the best :D

[@godmansarah]

Yes, I saw Kevin using this in a video, and added my own shortcut key for it also. Love it!

[@Pfoffie]

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

[@mohan9285]

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

[@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!

[@donaldabanoub6382]

H$[Heading $]*6 This will create from h1 to h6 With text saying heading 1 till heading 6 , the $ sign count from 1 until desired number , this could be quite handy in some situations like classes or lists Ex Ul>li.list-item-$ *4

[@robertodepasamonte3434]

Thank you for these tips on Emmet -- definitely time savers. One request -- could you do a video on how to use snippets in VS Code. Would be great time saver to have HTML & CSS snippets for the (1) logo and right-aligned nav , (2) hero section with bg image with titles and buttons, (3) row with three or four column flexbox (&/or css grid) layout, and (4) four column footer layout using flexbox (&/or css grid).

[@top10information25]

I have been following you since I started learning programming, thumbs up!!!

[@1337ghomri]

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

[@adnanamin1843]

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

[@98toxic1]

You can also name classes with numbers in order.. for example if you wanted etc... just type .container--$*2

[@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.

[@digigoliath]

Awesome!!! TQVM!! Emmet makes programming fun.

[@dhpcode]

That's very cool bro! Absolutely wonderful!!!

[@tammywoks8997]

You are just brilliant Kevin

[@sprtlife6261]

Dude, this was super valuable! Thanks!

[@StrengthScholar0]

MIND BLOWN... Thanks for the amazing content man!

[@techslugz]

Looks really powerful. I will def use this in the future when my html and css are more productive

[@MelodicMethod]

I had the same reaction you did on the code gen. This is awesome.

[@fionamorris8093]

Wish I could hit the like button more than once! Thank you for such clear and kind teaching!

[@rohan1765]

Awesome , extremely helpful

[@geoffreyguez]

perfect combo with Tabnine (AI auto completion extention) Nice video !

[@esagecantu]

Love the video. It has what I needed since I am still working on my skills but time is the essence to get project done. Thank you.

[@ofek15]

Thank you Kevin, now I can make full website with one line of code

[@rubensmailbag]

Kevin, you are the man, man.

[@RealNaps]

Thanks for making me better at css

[@abhijeetvishwakarmaa]

As a beginner it's awesome to know this

[@mariarodriguezva3606]

Dude! you rock! This is gold

[@heyt0pe]

Why am I just finding this out?!!!!🤩

[@djshiva]

Wow. This is so handy! Your videos are so fantastic. Thank you!

[@hash5one600]

I just love your videos, Kevin!! - Thank you for putting out such great, hight quality, content.

[@romewithbuck3513]

Awesome video!!!! Currently learning html5 /css/js. Save me so much time!!

[@danjmillier]

Fantastic video, Kevin! Love using Emmet, it really saves time!

[@hectorg362]

Wow. I really wished I knew this earlier. Thanks for this!

[@anihe8892]

WOW. Really great and will help a lot. Thank you very much for this video.😊😊😊

[@axwax2]

Thanks, this is super helpful, and getting a cheat sheet too is just the cherry on top!

[@briancross4415]

Awesome video Kevin. Emmett is fantastic.

[@BillWhammers]

that was bloody amazing

[@ABMA79]

it is an amazing and educative video. Thanks a lot for the wonderful tips. I would love you to make a series of designing a whole website from scratch. This way, we can follow along and learn the tricks necessary for us to keep in mind regarding design in general and also, learn some new tips about CSS and how to make our page responsive and control its responsiveness. If you can achieve that series, I will be in debt to you forever brother.. I think you are the best that has ever explained CSS, HTML, and bootstrap so far.

[@frujunior67]

This makes you look like a pro 😎 Thanks 👍

[@ViorelMocanu]

Somehow this never caught on with me. I've known about emmet and used it occasionally since it appeared, but there's something about hand-crafting each and every HTML line by myself that really gets me thinking about structure, microformats/structured data, semantics, accessibility and ARIA properties and so on. It's somehow easier for me to write code manually, it's built into my workflow. And while this is rather suboptimal as far as speed goes, it just fits my obsessive-compulsive tendencies I think. :)

[@voyagernz4172]

Keeping your cheatsheet behind a email newsletter aye... I see you know your Judo well! Subscribed 👍

[@bradburyrobinson]

Get your hands off my p-tags!

[@yashkumarsinghpatwa9267]

Really Amazing to learn all these shorthand tricks .....Thank you, sir ... Looking for more such tips and tricks

[@ozzyfromspace]

So, we all love Emmet. Anyone named their son that yet? 😂😂

[@SRG-Learn]

Emmet Brown (I've look it up and the name really is Emmett. You can look how many in wikipedia en.wikipedia.org/wiki/Emmett_(name))

[@ozzyfromspace]

@@SRG-Learn you, sir or ma’am, are why I love the internet haha. Thanks 😊🙏🏽✨

[@sicfxmusic]

Then you can just tell your kid to EF (or normal people would say Eat Food)

[@hectorg362]

My college professor is named Emmet lol.

[@Mast3rDesign]

Hahah Its cool name btw

[@thelittlenatureshow]

Fabulous. You are my hero!

[@CodeSigmaStudios]

you are a hero!!!!

[@urssounds]

Wow! That's super helpful!

[@miku6701]

Yes, I learnt something new today.😊

[@zafaris]

Great video Kevin! I'm sure this video will save hours of my time, as well as many other people's time. Thanks! 🤩👍🏽

[@theresco2961]

Very interesting and easy to follow , thank you ❤️❤️

[@animefanboy842]

lol first time in history i know this all lmao

[@chrisbenjamin3072]

Thank you for this video!

[@InfinitelyScrolling]

So cool, so handy, I love this so much.

[@onestepwebdev]

Thanks Kevin, very helpful

[@coderkushal]

Thank you so much for this video, This is super helpful!

[@lunaya9]

WOW!! Thank you!! This is awesome ! SOOOOOOO FAST!!!

[@YoungDen]

Gonna try this on Brackets

[@StoryTeller8692]

I think you might have just changed my life. Mostly the life of my shift-finger. How did I not know this.

[@Dexter101x]

Lorem*15 is fifteen paragraphs of Lorem ipsum 😂😂😂🚀🚀

[@1230124]

Very useful video~!!!! so clear and help me a lot thanks you!

[@LearnWithSazzad]

awesome video. thanks man. you are amazing

[@idsign4uar843]

Hi Kevin: I'm not sure if this is part of Emmet or not, but at 05:37, as your cursor is between the "", you can press the left "Alt" key (not the "Alt Gr" that's on the right) and hold the mouse button while dragging down, which lets you enter text in all those lines at the same time (in this case, you can put the # used as a placeholder while developing a website). Oh, don't forget to press the "Esc" key once finished to go back to normal. Hope that helps. Thanks & greets from Argentina (Hope it is from England someday) IDsign4U (Marcelo Miguel Bazan)

[@KevinPowell]

Yes, that's a great way to speed things up even more :D

[@juanignacio4208]

How did it go?

[@Parthivi56]

Mind blown!! WOW!!!

[@Elliot7676]

Kevin You'r a saviour :) thankx

[@RameenFallschirmjager]

I was watching this while I had a huge smile on my face. My roommate asked me what I'm watching that made me so amused. I showed the video to her, and then she took a step away from me with a frightened look on her face! Not everyone is a nerd!😂

[@KevinPowell]

😂😂😂

[@gruanger]

Thank you!

[@Felisha1976]

Thx! Really useful!

[@hankbrown8421]

U saved me so much time ty

[@aniketbhalla1521]

That's awesome ☺️👌. I got to learn about making siblings in this. Thanks sir.💯

[@blonduose]

wow that Lorem thing got me....how many times did i google lorem ipsum :D the other ones I already knew thanks to you :D

[@CharlesSmall]

You are the king

[@frugodwill]

Is there no west go going into and element and doing some stuff and coming back out of the container to do some more stuff? Eg. H1>lorem5lorem20? Where < is coming back out of the h1 element

[@minzcode]

Great video. Very helpful. 😉

[@MoElkomy]

Thank You so much You are Great

[@sebastianurbaniec9225]

I'm using also script:src and input:number. Very handy

[@masoodkhanpatel]

this is sooo awesome!

[@JanCabanik]

Cool. I love your videos. Thx

[@JohnBortins]

Outstanding!

[@RoyerAdames]

Thank you

[@victor25021983]

tq . we will rewind yiur video few time to understand more

[@erikbrewer3161]

That was awesome

[@JigneshPosarekar]

You're the best sir 😇👍🏻

[@nourpubg-184]

its amazing kevin keeeeeeeeeeeeep going

[@27sosite73]

thank you

[@rudyNok]

I understand that we can go a level deeper with >. Is it possible to go level up? Let's say I do : .section>ul>li*5 and then I want to go back up and continue? Something like .section>ul>li*5

[@moonlightmelody5527]

Amazing!

[@CaioMGA]

this is magic