Emmet = Faster HTML & CSS Workflow!
Vložit
- čas přidán 5. 07. 2024
- 👉 Become A VS Code SuperHero Today: vsCodeHero.com
In this video, I'm going to give you a quick crash course into using Emmet. Emmet allows you to dramatically speed up your HTML & CSS workflow! In a single line using Emmet's abbreviation syntax, you can save yourself from writing hundreds of characters and multiple lines of code. We will cover the basics including siblings, nesting, multiplication, grouping, and much more.
Emmet is built into Visual Studio Code (VS Code), but it is not exclusive to VS Code. It can be used with Sublime Text, Atom, and many other popular code editors. Visit the link to Emmet's website to download it for your editor.
Emmet:
emmet.io/
Emmet Cheat Sheet:
docs.emmet.io/cheat-sheet/
Timestamps:
00:00 - Introduction to Emmet
01:00 - HTML Boilerplate
01:35 - Basic Tags
02:25 - Classes
03:03 - Id's
03:24 - Content
03:41 - Siblings
03:57 - Nesting
05:05 - Climb Up
06:02 - Grouping
07:02 - Multiplication
07:22 - Numbering
08:45 - Attributes
09:36 - Implicit Tags
10:37 - Forms & Inputs
11:26 - Lorem Ipsum
12:15 - Advanced Structures
12:50 - CSS Abbreviations
16:21 - Custom Emmet Snippets
_____________________________________
📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: treehouse.7eer.net/codeSTACKr
_____________________________________
🛠️ Tools I use:
🟠 Theme: marketplace.visualstudio.com/...
🟠 Font: STACKr Code (Exclusive to my VS Code Course - vsCodeHero.com)
🟠 SuperHero Extension Pack: marketplace.visualstudio.com/...
🚢 Deploy for FREE on Vercel: vercel.com/ambassadors/codest...
_____________________________________
💖 Show support!
PayPal: paypal.me/codeSTACKr
_____________________________________
Watch Next:
Web Development - Beginners Roadmap (2020) - • Web Developer Roadmap ...
Playlist: Web Development For Beginners - • Web Development - Begi...
_____________________________________
Connect With Me:
Website: www.codestackr.com
Twitter: / codestackr
Instagram: / codestackr
Facebook: / codestackr
_____________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
#codeSTACKr #Emmet #learntocode
![CSS Units of Measurement [rem, em, vw, vh, px, %]](http://i.ytimg.com/vi/8UTMS3WTM0k/mqdefault.jpg)
![CSS Units of Measurement [rem, em, vw, vh, px, %]](/img/tr.png)
Thanks for all of the support!!
Next up Learn Sass in 30 Minutes:
czcams.com/video/BDOzg4lXcSg/video.html
📚 My Favorite Web Design Books 📚
Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link)
amzn.to/2JaiCL8
Boa tarde!
this guy needs way more subscribers . he is straight to the point , gives you only what you need , a great teacher , some guys basically just read through the code as they type without explaining anything . this channel is a gold mine for any beginner who is looking to get into front end dev .
Thank you! I really appreciate that!
Totally agree. I've been wasting my time following noob coders who spend an hour just giving you the basics. codeSTACKr goes to the point and shows his skill and proficiency in every video.
Just found the channel yesterday and couldn't agree more! Kind and humble vibe makes all the difference as a teacher. Should have way more subs.
The best and most detailed Emmet tutorial so far !
Thank you!
Extremely useful. Typical example of "easy to understand" when someone knows how to transfer his/her knowledge. Thank you
Glad it was helpful!
I've been coding for 8+ months now and had no idea how powerful Emmet was until this lol. Great video.
Bro keep them coming, your channel is gonna be a rock star in 2020😎 .Great content 👍
Thank you! I really appreciate it!!
Subed and can’t stop watching your vids honestly i watched many youtubers but no one is even closer than you i mean you go straight to the point you dont waste much time with long ass intro or any other shit that they do nowadays this video is 20min long and it’s worth it so much info i stared to work with emmet and im liking it a lot thank for your sharing man we all appreciate it very much
I really appreciate that!
When I first discovered emmet, I was like omg, why i didn't use this earlier!
Exactly! I'm embarrassed to say how long I coded without it, lol.
VS Code + Emmet are the first two things every aspiring coder should learn and master!!
@@rudrig6106 there is still some life left in sublime text tho
Oh my God!
I can't bro 😭😭
This is just heavenly content out here
I remember whenever I used to see Tutorials using Emmet I always found myself dumb to understand that
But after this video I was just coding along with you and boom 💥🤯💥
Thanks a ton😇
ooh my God this is insane...so many tricks going on here haha i'm not sure i can remember them all and use them
Best Web-dev channel so far.......
I used to be so intimidated by emmet, and resorted to using compiled tools like Pug to write html quickly in my projects. This video showed me how similar it is to write compared to Pug. Will definitely be trying it in my next project!
That's great!
So helpful! Thank you!
Fascinating, thanks for the information man! I will start using this.
Glad it was helpful!
fantastic video, thank you
Thanks for this video. I wish I could like more than once
thanks broo ! ❤️
I feel so dumb for not knowing the lorem emmet, usually I'd search for the text on google LMAO. Apparently still a lot to learn
So did I! codeSTACKr made me look like a fool using those online Lorem Ipsum generators LOL. Thanks #codeSTACKr !!
This is just awesome. Thank you
You're very welcome!
awesome guide!
great tutorial !!!
Awesome & Cool!! TQVM!
sooo helpful tutorial thanks bro
Man you're #1 in web developing vids keep it up
Thank you!
@@codeSTACKr No, actually thank you!
this video is very useful. Thanks
Great video, really professional.
Much appreciated!
Super helpful. Thanks!
You're welcome!
Brilliant video, very informative. Thanks!
Thank you!
Awesome video, thank you.
Thank you for your support!
just fantastic....
OMG, that's awesome and you are ✨. Thanks for this insightful tutorial.
Glad it was helpful!
Top video, thanks for the presentation.
Thank you for your support!
Thnk you so much..
Now I can code more efficiently from this video, I immediately subscribed!!👍🏻
Love from India 🇮🇳
hey bro i have a question about snippets in vs code.Are you able to help me a little if you know?
@@alexpapas5535 snippets about what?
@@vishwanath-ts custom snippets for html and CSS..but in vscode when I go to the Emmet extension in the sector "Emmet extensionPath" I can't set the path like codestackr but instead there is this option:edit in settings.json...why ?
@@alexpapas5535 Even I don't know how to set custom code snippets, but I can give you the link of the video about the same topic, this might help.
czcams.com/video/JIqk9UxgKEc/video.html
@@vishwanath-ts thx a lot bro!!
It's a WOW for me.
This is crazy.. Can't watch it all at once
bravo brother! you are the best
Thanks!
In the Emmet extensions path there is no input field only 'Edit in settings.json'? I am unable to navigate to the snippets.json folder on my mac? Amazing Tutorial Videos Thank you
Great video! How'd you do the timestamps in the video player like that?
You just add them to the description and CZcams takes care of it 😁
Thank you.
You're welcome!
Thank You
Welcome!
So much useful. Thank you, sir
Thanks for watching!
@@codeSTACKr Keep making these type of videos. I'm sure at a certain point of time, when these videos reach more people, your subscriber will increase incredibly follow the youtube algorithm. Don't be discouraged
Nice!!!!
Thanks!
Thank you sir, for the Tutorial. Please, may I ask?
In my VS Code code completion, suggestions and Emmet suggestions, when I scroll to the right suggestion and type enter on my Keyboard, the suggestion or code expansion fails. It just cuts off from cursor position!
Any idea why that's ? But it's okay by Mouse click. The Tab key also fails!
Thank you for this useful video. I like your theme in vscode. What is it?
Thanks! It's the Material Dark (High Contrast) theme.
I go over most of the extensions I'm running in my 10 Best VS Code Extensions video: czcams.com/video/c5GAS_PMXDs/video.html
Check it out! :)
Subscribed...
Nice one, this is awesome, I use visual studio code.
Thank you for your support!
@@codeSTACKr You deserve it, can you make a video about "how to make user registration login and logout form" also store the data in database for login in the future?
@@israelnicodemusyakubu7296 I do have a video on creating a login form, but it is UI only. I can definitely create another video showing the back end functionality.
czcams.com/video/X9Eh7_FUYzw/video.html
I need help please if you could help it will make my day. When i first downloaded visual studio the code was in blue color and its so annoying. How do i change the html tags to red like in the video?????
Please someone help me.
At 12:44 for the 'click here to continue' example I type exactly the same abbreviation but the 'to continue' text ends up on the same line as the anchor element. Why would this happen please?
So what's the name of the VSCode extension? I get a lot of results.
When you say "enter" , do you mean "tab"? Or did you change your settings? Or is my plugin older. Because I have to hit TAB, not enter.
Interesting.. tab or enter both work the same for me. All default settings.
Seems Emmet is only for HTML/ CSS. Is there something like it for JavaScript?
About cursors?
Hi. I noticed that I need to be very careful when i hit enter or when I backspace. For example when I am writing something in the curly braces and pressed space and then backspace (for when I messed something up), the Emmet function disappears and when I press enter the emmet code would not execute. Is there a feature/extension that would allow me to still use the emmet function when it is no longer valid? Another caveat is that if I want to add something in the middle of the emmet code, I can't press enter when the cursor is in the middle because it won't turn the emmet code into html...hittin enter in the middle of an emmet code will just make a new line.
If the suggestion has disappeared, you can open it up again by typing ctrl+space. You can also enable "Emmet: Trigger Expansion on Tab" in the settings. This will allow you to trigger Emmet by using the Tab key even if the suggestion isn't shown. However, with either case, your cursor needs to be at the end of the line.
@@codeSTACKr wow. Thank you! This was actually super helpful! Even though the cursor has to be at the end of the line for this to work, my problem with the suggestion going away was fixed. Thank you again! I love your content btw.
How did you erase that whole block at 2:17 ..... that maybe a dumb question...sorry, I'm a newbie.
Bro, I checked Emmet escape filter is not working. Will u help me?
How to enable it ?
How can i download emmet in vs code in ubuntu
Hitting Enter as you did isn't working for me! Any idea why?
sir what is boilerplate mean?
It's like a template. A starting point to work with.
@@codeSTACKr like this syntax '!' In vs code we get templete html ready to use?
@@TheWandererDoc That's right! 😁
@@codeSTACKr thanks it's high standard English lol
I could not add the snippets.json file to my id
Would it be completely wrong to call Emmet dynamic snippets. Or interactive snippets...
It sounds and looks cool and helpful but as a starting designer i already feel overwhelmed with the built in resources that auto-complete stuff
Just focus on the basics. Once you get those down then these features will become very helpful. Don't give up! Keep learning.. you'll get there.
I actually find that the Emmet extension makes your learning easier but of course each individual learns differently
But how to set all these thing?
So that’s what it was? I was wondering what VS Code was asking?
Do you really type div.class1 to get a div with a class name? I just type .class1 for a div with the class or #class2 to get a div with an ID. Am I making a mistake?
No mistake. You are doing it right. You can use div.class or just .class and the div is implied.
@@codeSTACKr Thanks for the reply. I found that later in the video. I didn't realize emmet used implication. All my knowledge is by trial and error and seeing emmet coding in other videos about html or css. Still wondering about the use of #{&}__ . never saw that before. I like your videos and subscribed, keep up the good work.
please where do i get the cheatsheet at
The link is in the video description :)
@@codeSTACKr thanks
hey CODE i have a problem can u help me??
how to add value?
Value is an attribute. So you could use: input[value="my value"]
But that comes by default in VSCode
Yes, that's what I mention in the video
this gay is one of the best web techer i have ever seen 👍
Wtf😂🤦🏿
This is basically aimbot in csgo
Sir could you please share the snippets with us ? @codeSTACKr
Hi, I would like to ask why these shortcuts from Emmet are not working for me? For example: bg+, bdb+ - or let's say all shortcuts that are plus. @codeSTACKr