Тёмный

Use Emmet to up your HTML game 

Kevin Powell
Подписаться 917 тыс.
Просмотров 65 тыс.
50% 1

Get your Emmet cheat sheet here: kevin-powell.ck.page/f197c78a95
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
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

 

16 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 227   
@botleydot
@botleydot 3 года назад
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
@glory_av 2 года назад
This is in the cheatsheet👍
@MoHafiz71
@MoHafiz71 Год назад
So nice too, great 👌
@CaioMGA
@CaioMGA 7 месяцев назад
that's nice
@dysania1832
@dysania1832 6 дней назад
oh you meant (colors1, colors2, colors3, colors4, colors5)?
@metalfacemartinez
@metalfacemartinez 3 года назад
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
@JannisAdmek 3 года назад
sounds really awesome but tbh I feel to lazy to talk abd rather type :D
@sicfxmusic
@sicfxmusic 3 года назад
Imagine a person beside you in the office or a coffee shop constantly talking to his computer 😋 and occasionally yells at it 😂
@MrJbramirez
@MrJbramirez 3 года назад
this channel is gold. you deserve a long life kevin!
@taipham6799
@taipham6799 3 года назад
My friends have been recommended to your channel, so I really grateful for that.
@mirshahbazali2727
@mirshahbazali2727 3 года назад
You can also do ul>li*3>a[text here] To add filler text
@oxyaego4594
@oxyaego4594 3 года назад
Didn't know this one! Thank you
@utkarshagrawal3640
@utkarshagrawal3640 3 года назад
Wrong u have to use curly braces for inner text!
@PaulMcCannWebBuilder
@PaulMcCannWebBuilder 3 года назад
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
@EyeIn_The_Sky 3 года назад
@@PaulMcCannWebBuilder Nice one, thanks!
@hjetwd
@hjetwd 3 года назад
a[text here] - a[attribute="value"]{text} - text li*3>a[href="#$" title="its $ link"]{$} - 1 2 3
@marcelino-dev
@marcelino-dev 3 года назад
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!
@mikematenkosky
@mikematenkosky 3 года назад
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!
@karinarodriguez2055
@karinarodriguez2055 3 года назад
I don't get tired of saying that you're AMAZING! Thank you!
@gbdaeye
@gbdaeye 3 года назад
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.
@seggremalac
@seggremalac 3 года назад
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!
@adnanamin1843
@adnanamin1843 3 года назад
That GLASS looks cool, Kevin! :) Awesome tut!!
@danjmillier
@danjmillier 3 года назад
Fantastic video, Kevin! Love using Emmet, it really saves time!
@hash5one600
@hash5one600 Год назад
I just love your videos, Kevin!! - Thank you for putting out such great, hight quality, content.
@esagecantu
@esagecantu 3 года назад
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.
@fionamorris8093
@fionamorris8093 3 года назад
Wish I could hit the like button more than once! Thank you for such clear and kind teaching!
@top10information25
@top10information25 2 года назад
I have been following you since I started learning programming, thumbs up!!!
@sprtlife6261
@sprtlife6261 2 года назад
Dude, this was super valuable! Thanks!
@mohan9285
@mohan9285 3 года назад
Amazing "Kevin" and "Emmet", I love you both.
@StrengthScholar0
@StrengthScholar0 3 года назад
MIND BLOWN... Thanks for the amazing content man!
@dhpcode
@dhpcode Год назад
That's very cool bro! Absolutely wonderful!!!
@Wukwuk21
@Wukwuk21 3 года назад
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
@axwax2
@axwax2 3 года назад
Thanks, this is super helpful, and getting a cheat sheet too is just the cherry on top!
@StephenMoreira
@StephenMoreira 3 года назад
Life changing. Something I always knew of but always ignored. Thanks.
@skillzorskillsson8228
@skillzorskillsson8228 3 года назад
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
@skillzorskillsson8228 3 года назад
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
@skillzorskillsson8228 3 года назад
Btw, if someone just wants to try emmet before downloading it, you can try on codepen. They have emmet implemented already :)
@RameenFallschirmjager
@RameenFallschirmjager 3 года назад
Nice refresher.
@romewithbuck3513
@romewithbuck3513 3 года назад
Awesome video!!!! Currently learning html5 /css/js. Save me so much time!!
@techslugz
@techslugz 3 года назад
Looks really powerful. I will def use this in the future when my html and css are more productive
@djshiva
@djshiva Год назад
Wow. This is so handy! Your videos are so fantastic. Thank you!
@marcotronic
@marcotronic 3 года назад
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 ;)
@zafaris
@zafaris 3 года назад
Great video Kevin! I'm sure this video will save hours of my time, as well as many other people's time. Thanks! 🤩👍🏽
@tammywoks8997
@tammywoks8997 2 года назад
You are just brilliant Kevin
@MelodicMethod
@MelodicMethod 10 месяцев назад
I had the same reaction you did on the code gen. This is awesome.
@rohan1765
@rohan1765 3 года назад
Awesome , extremely helpful
@theresco2961
@theresco2961 3 года назад
Very interesting and easy to follow , thank you ❤️❤️
@digigoliath
@digigoliath 3 года назад
Awesome!!! TQVM!! Emmet makes programming fun.
@yashkumarsinghpatwa9267
@yashkumarsinghpatwa9267 3 года назад
Really Amazing to learn all these shorthand tricks .....Thank you, sir ... Looking for more such tips and tricks
@briancross4415
@briancross4415 3 года назад
Awesome video Kevin. Emmett is fantastic.
@coderkushal
@coderkushal 3 года назад
Thank you so much for this video, This is super helpful!
@anihe8892
@anihe8892 2 месяца назад
WOW. Really great and will help a lot. Thank you very much for this video.😊😊😊
@robertodepasamonte3434
@robertodepasamonte3434 3 года назад
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).
@urssounds
@urssounds 2 года назад
Wow! That's super helpful!
@SerilaBuck
@SerilaBuck 3 года назад
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
@KevinPowell 3 года назад
Yup, wrap with Emmet Abbreviation is the best :D
@godmansarah
@godmansarah 3 года назад
Yes, I saw Kevin using this in a video, and added my own shortcut key for it also. Love it!
@geoffreyguez
@geoffreyguez 3 года назад
perfect combo with Tabnine (AI auto completion extention) Nice video !
@rubensmailbag
@rubensmailbag 3 года назад
Kevin, you are the man, man.
@BillWhammers
@BillWhammers 2 года назад
that was bloody amazing
@hectorg362
@hectorg362 3 года назад
Wow. I really wished I knew this earlier. Thanks for this!
@ABMA79
@ABMA79 3 года назад
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.
@lunaya9
@lunaya9 3 года назад
WOW!! Thank you!! This is awesome ! SOOOOOOO FAST!!!
@onestepwebdev
@onestepwebdev 3 года назад
Thanks Kevin, very helpful
@thelittlenatureshow
@thelittlenatureshow Год назад
Fabulous. You are my hero!
@minzcode
@minzcode 3 года назад
Great video. Very helpful. 😉
@Pfoffie
@Pfoffie 3 года назад
When I learned about emmet some years back… I have never been the same again.
@LearnWithSazzad
@LearnWithSazzad 3 года назад
awesome video. thanks man. you are amazing
@1230124
@1230124 2 года назад
Very useful video~!!!! so clear and help me a lot thanks you!
@frujunior67
@frujunior67 3 года назад
This makes you look like a pro 😎 Thanks 👍
@voyagernz4172
@voyagernz4172 3 года назад
Keeping your cheatsheet behind a email newsletter aye... I see you know your Judo well! Subscribed 👍
@bradburyrobinson
@bradburyrobinson 3 года назад
Get your hands off my p-tags!
@RaynellJamal
@RaynellJamal 3 года назад
Wow! love this!
@1337ghomri
@1337ghomri 3 года назад
My mind is blown! I have been coding HTML for 9 years, and I didn't know it could be this easy.
@Elliot7676
@Elliot7676 3 года назад
Kevin You'r a saviour :) thankx
@uchihaitachi2185
@uchihaitachi2185 3 года назад
Thank you as always : ) . A random question : do you recommend using Bulma as a CSS framework ?
@chrisbenjamin3072
@chrisbenjamin3072 3 года назад
Thank you for this video!
@PaulMcCannWebBuilder
@PaulMcCannWebBuilder 3 года назад
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
@KevinPowell 3 года назад
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!
@masoodkhanpatel
@masoodkhanpatel 3 года назад
this is sooo awesome!
@InfinitelyScrolling
@InfinitelyScrolling 3 года назад
So cool, so handy, I love this so much.
@hankbrown8421
@hankbrown8421 3 года назад
U saved me so much time ty
@CodeSigmaStudios
@CodeSigmaStudios 3 года назад
you are a hero!!!!
@ofek15
@ofek15 3 года назад
Thank you Kevin, now I can make full website with one line of code
@abhijeetvishwakarmaa
@abhijeetvishwakarmaa День назад
As a beginner it's awesome to know this
@AmandaLucaseu
@AmandaLucaseu 3 года назад
Love this!
@blonduose
@blonduose 3 года назад
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
@JanCabanik
@JanCabanik 3 года назад
Cool. I love your videos. Thx
@aniketbhalla1521
@aniketbhalla1521 3 года назад
That's awesome ☺️👌. I got to learn about making siblings in this. Thanks sir.💯
@RealNaps
@RealNaps 3 года назад
Thanks for making me better at css
@miku6701
@miku6701 3 года назад
Yes, I learnt something new today.😊
@JohnBortins
@JohnBortins 3 года назад
Outstanding!
@Parthivi56
@Parthivi56 3 года назад
Mind blown!! WOW!!!
@StoryTeller8692
@StoryTeller8692 Год назад
I think you might have just changed my life. Mostly the life of my shift-finger. How did I not know this.
@98toxic1
@98toxic1 3 года назад
You can also name classes with numbers in order.. for example if you wanted etc... just type .container--$*2
@heyt0pe
@heyt0pe 3 года назад
Why am I just finding this out?!!!!🤩
@nourpubg-184
@nourpubg-184 3 года назад
its amazing kevin keeeeeeeeeeeeep going
@gruanger
@gruanger 2 года назад
Thank you!
@idsign4uar843
@idsign4uar843 3 года назад
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
@KevinPowell 3 года назад
Yes, that's a great way to speed things up even more :D
@juanignacio4208
@juanignacio4208 Год назад
How did it go?
@CharlesSmall
@CharlesSmall 3 года назад
You are the king
@JigneshPosarekar
@JigneshPosarekar 3 года назад
You're the best sir 😇👍🏻
@moonlightmelody5527
@moonlightmelody5527 Год назад
Amazing!
@donaldabanoub6382
@donaldabanoub6382 3 года назад
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
@MoElkomy
@MoElkomy 2 года назад
Thank You so much You are Great
@YoungDen
@YoungDen 3 года назад
Gonna try this on Brackets
@vahidjamshidnejad9525
@vahidjamshidnejad9525 2 года назад
very useful 👌
@teslad4real
@teslad4real 3 года назад
OMG This is awesome
@erikbrewer3161
@erikbrewer3161 3 года назад
That was awesome
@ozzyfromspace
@ozzyfromspace 3 года назад
So, we all love Emmet. Anyone named their son that yet? 😂😂
@SRG-Learn
@SRG-Learn 3 года назад
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
@ozzyfromspace 3 года назад
@@SRG-Learn you, sir or ma’am, are why I love the internet haha. Thanks 😊🙏🏽✨
@sicfxmusic
@sicfxmusic 3 года назад
Then you can just tell your kid to EF (or normal people would say Eat Food)
@hectorg362
@hectorg362 3 года назад
My college professor is named Emmet lol.
@Mast3rDesign
@Mast3rDesign 2 года назад
Hahah Its cool name btw
@prateek4524
@prateek4524 3 года назад
super awesome💪💪🔥🔥
@animefanboy842
@animefanboy842 3 года назад
lol first time in history i know this all lmao
@Dexter101x
@Dexter101x 3 года назад
Lorem*15 is fifteen paragraphs of Lorem ipsum 😂😂😂🚀🚀
@joeldcanfield_spinhead
@joeldcanfield_spinhead 3 года назад
@6:20 Did not know you could tab from item to item.
@SonAyoD
@SonAyoD 3 года назад
great video
@RoyerAdames
@RoyerAdames 3 года назад
Thank you
@pradhumansharma2658
@pradhumansharma2658 3 года назад
Nothing and nothing is valuable than time, great video, thanks __IN
@hamzanaeem7277
@hamzanaeem7277 10 месяцев назад
Wow, awesome
Далее
You can do that with margins?
14:40
Просмотров 184 тыс.
Avoid These 5 Awful CSS Mistakes
20:42
Просмотров 188 тыс.
Fudbol hozir vs avval😂
01:01
Просмотров 478 тыс.
Customize your Emmet Snippets in VSCode
10:57
Просмотров 10 тыс.
5 important HTML concepts for beginners
14:37
Просмотров 116 тыс.
Protocol Buffers Crash Course
36:07
Просмотров 234 тыс.
CSS is getting better, but Sass is still relevant
18:42
Flexbox or grid - How to decide?
18:51
Просмотров 701 тыс.