Emmet For Faster HTML & CSS Workflow

[@TraversyMedia]

Make sure you guys check the cheat sheet to see all of the abbreviations. Also, if you have any other practical uses and features of the Emmet plugin be sure to let us all know....thanks for watching! Love you guys!

[@rne1223]

Traversy Media Similar functionality as pug.js aka jade

[@md.akib5124]

Love you too Brad

[@ricardolca]

Love you too Brad, thank for all you teach us!

[@ankityadavin]

I don't understand how can people dislike you're videos. So much free information which these people will pay thousands if not more.

[@TraversyMedia]

Ankit Yadav i have a lot of competition both free and paid

[@mri912]

I learned a lot from you dude, front-end was my weakness until I found your channel. It helped me do a boring but useful task at work - redesign of the web-app. Do you plan on doing more back-end in the future? Maybe dive into authorization/authentication, not necessarily with js?

[@n_fan329]

That’s killing me too :(

[@godmakoto1041]

"Thousands" also 26 dislikes vs 2.6k do some math kid

[@JayantBB78]

@@TraversyMedia Hey Brad, Thanks a million for your all videos. I am not an IT guy. I am Graduate in Automobile Engineering and an FEM FEA specialist. Your videos made my concepts clear. Now I guess I know what I should learn for my project. Can you *Make* or *Suggest* a video to *Setup Web Application Hosting Server, & Make It Secure* on Digital Ocean droplet (or something like it) with CentOS, Apache, Python, PostgreSQL? Thanks a lot. Keep posting videos.

[@JamesQQuick]

Love emmet! Makes me so much faster. As far as I know, Emmet support is built into Visual Studio Code. That's one of the things I've really liked about VS Code so far! Thanks for the video.

[@Sean-Smith-Photos]

Been using Emmett for years. Can't imagine developing without it. It's absolutely brilliant.

[@andressuarez3079]

As a begginer (for not saying "newbie"...) this information was what I needed to feel I am making a progress. Thank you bud, appreciate this. Cheers.

[@seedme]

This two years' old clip answers my wonders why this type of automation in IDE is called Emmet... it is originated at Emmet. Although not really need to install this nowadays as it is pretty integrated in most of IDEs but impressed to know its origin. I am sure this was much helpful back in two years before. I genuinely learnt a lot from this channel. Thanks Brad.

[@vpstyle7]

Thanks for the run through! I was part way through a course when we switched up editors from sublime to VSCode, and your quick and dirty run down of Emmet helped explain what was going on tremendously. Again, thanks for all that you do!

[@prakad97]

Guys..who thinks he is going be the next Bucky (new Boston) for youtube..with most quality content..he deserves more subs..!!! Love your videos.! More on free style coding app..or JavaScript algorithms..or node and angular apps..!!

[@dunstontc]

1. Fire, 2. The Wheel, 3. Emmet

[@ergurkha3157]

4. Brad T.

[@shortcutDJ]

he just did, google it.

[@AhmadFadhlibinMahjuddin]

you miss electricity...emmet doesnt work without it :D

[@WenGriffin]

@@AnkitSinghudaipur He's referring to noteworthy inventions

[@gauravcool76]

I am begineer started coding 3 days ago can u pls yell what are they and thier advantage pls

[@yt_bharat]

Excellent, comprehensive and an actual useful video on emmet. I ve genuinely learned a lot from this channel. Thanks man!

[@caybokotze]

Every time I see that Traversy intro it makes me happy. I know its gonna be good!

[@ralphalper1995]

As expected from you, a clear explanation of the use and benefits of Emmet! I'm just getting started with VS Code after years of using notepad++ and I was pleased to discover (from the comments) that VS Code has Emmett built-in. Thanks for this excellent video.

[@scottrowe533]

Great job with this video tutorial, Brad. I'm new to development and two different friends have advised me to begin using Emmet as a means of accelerating my code-writing workflow. Your tutorial really opened my eyes to the many possibilities offered by this very worthwhile extension, and I expect to make heavy use of Emmet going forward. I'm also subscribing to your KZbin channel, as I expect your many other tutorials are every bit as useful to new developers as this one. Thank you!

[@fullstackpal3401]

Best channel on youtube with lots of practical information. Keep up the good work.

[@sunraiii]

I love the irony of writing HTML code with CSS syntax using Emmet, just to then convert that HTML syntax again into CSS using Tailwind :D Great video!

[@MattKnowsTech]

5:43 Wow, I've had Emmet installed in Sublime Text for as long as I can remember... never even thought about using that. Thank you for the great content!

[@sayantan033]

Thank you so much for this video. I did learn to use emmet myself with the cheat sheet but there are still certain things in the video which helped me to learn more about emmet. Keep up the good work Traversy Media :)

[@surinfarmwest6645]

Brad, thank you very much, downloaded Atom this afternoon (with a few issues but sorted now) and this is very informative for an inexperienced user like me. How anyone can give this a thumbs down is beyond belief. Farm West

[@mirzasisic]

I've been using it with Atom for a while, it saves time.

[@AhmedAli-lu8wg]

Thank you for showing us how the Emmet plugin works. Really appreciate it :)

[@SethuSenthil]

Why isn't this a standard in every code editor?! This is just lit!

[@coolworx]

Jesus... No wonder I love this guy! He's a Bosox fan! 8 game winning streak going into NYC. Boooya!

[@ablanchi]

Favorite feature of Emmet is the $ feature, used to dynamically number class names/ text, etc. Like: ul>li.item${item$}*5 creating 5 class names and text values with appropriate naming and numbering "item1", "item2"

[@crocodilecrox3758]

Your channel is a gold mine brad!

[@indrakhatiwada9860]

brad is the best teacher that i have came across

[@TheGazanews]

thank you , still beginner and this tutorial helped me a lot, i don't need to type the whole tags anymore. this was a life saver :)

[@mateuszszydowski9962]

*Atom shortcuts and this tutorial form an incredibly powerful and helpful duo. Thanks, mate!*

[@coder236]

not gonna lie mate your tutorials are awesome, thanks for taking the time on these and keep them coming.

[@pakistanmerijan1212]

its like i am addicted to your videos .. 5 videos a day keeps the doctor away :P

[@CamPerry]

I heard about Emmet a couple months and it really is a lifesaver!!!

[@uunz4075]

Thank you for your efforts in making this video. I have your Udemy bootstrap 4 course, and it saved me from my awful college course. Seriously man, thanks.

[@perfectwebsolutions]

Emmet or Zen coding is really a life saver technique for smart editors and smart developers as well, It's one line coding technique. :)

[@DanBoyleDC]

Thanks for the post. Never heard of Emmet and it looks like it will become my new best friend.

[@SteveRobinett]

Outstanding! Thanks for producing this. I'll be sharing this with my college web development students

[@TraversyMedia]

Thanks! That's awesome :)

[@mootimadness7825]

welcome back brad i hope you enjoyd your vecation :)

[@TraversyMedia]

Thanks :) I did. Good family time. Wish it could have been longer. Back to work now though :)

[@tabiApo41013]

regards to your son.

[@onecarwood]

Traversy Media I thought you went to Udemy live. For a minute I thought you had a Bears hat on but then I remembered where you are from lol!

[@ksktozt]

Oh man, your voice makes me super interested and excited about things. Thank you very much once again, cheers!

[@ark5458]

emmet and vim go so well together

[@sc-nc6bb]

no me arrepiento de suscribirme en tu canal de youtube, realmente veo todos tus videos ;)

[@TheRealFaceyNeck]

Jusdt started using VSCode last week. Even without Emmet it's still all that I wanted in a text editor. Well, a graphical one anyway. When all I have is a tty it's Vim or nano. I'm so spoiled. It's a good time to be writing code.

[@getrekt1386]

this is the video that introduce people to traversy media

[@Green-Clean-Energy]

Brad , you are an interesting and helpful Teacher, you have real skill how to explain stuff. I learnt very well. Many thanks. Wishing you all the best and you be on the top of your competitors

[@sanghvian]

Just saved enough time to go learn another language. Thanks a lot Brad ! You're a lifesaver

[@bayrockdev]

I'm familiar with the Jade templating language and the Emmet syntax is extremely similar. Cool!

[@samdavepollard]

Brad Traversy is more of a rockstar than Mick Jagger could ever be. Many Thanks for sharing your knowledge. (FWIW, on Visual Studio Code at least, ENTER instead of TAB also works.)

[@JorgeDev92]

I have just discover that VScode has Emmet by default, 1 year working with it :D

[@lemueljunior]

Thanks, Brad! As always your videos are helping me a lot with learning tricks and many good stuff. Thank you for sharing your knowledge with us =)

[@dannyg7422]

Didn't know VS Studio have this in default and also about Emmet (Newbie ). Thanks for this video it helps me a lot with my workflow.

[@waynetomlinson9282]

I love using emmet but I am having issues with some abbreviations: select+ - I get table+ - I get ol+ - I get ul+ - I get Any ideas on what is wrong. I am using Visual Studio Code

[@code_ar4266]

you are amazing man >> i started with you from zero and now i have youtube channel

[@sachinsaini1806]

Hi Brad, I told my friend about your channel around 1 month ago and he gave me a party today. He was so happy that i told him about traversy media. :) cheers bro. keep up the good work. i want to know how long it has been since you joined gym. well geeks don't usually pay attention to their fitness. Just curious...

[@JesusHilarioH]

Awesome bro, super helpful. I've been looking for something like this. Totally cuts productivity. Great explanation, not to fast.

[@donnguyen5164]

I liked the content that you covered and liked seeing the examples live.

[@aronpop1447]

Awesome video man!! Really appreciate it, also eagerly waiting for the beginner series continuation

[@jrdevelopment2714]

Thank you! This will save a lot of time in the future.

[@nicksid9378]

i was going to request this on the next video..i love you man xD

[@shady9458]

Thanks @Traversy Media. I have been looking for ElectronJS tutorial for desktop apps, I have not found ones that are productive. Can we get the series for it please. Thank you.

[@prateekthapa4127]

Welcome back Brad, can you please do a tutorial on new foundation-xy grid.?

[@sayedakbarali5650]

Very Good and helpful Wrk, lots of appreciation

[@j4y0785]

Keep up the GREAT WORK Brad!!

[@muhammadshahrukh4985]

Brother You Rocked Thank you So much & Sooooo Helpful. Keep that Spirit and keep going

[@Stoney_Eagle]

I've been doing stuff the hard way... Nice tutorial!

[@Naniy55462]

when commenting a single line ,dont need to select the entire line ,just put the cursor on it and enter "cntr+/" ,thats it

[@artaway6647]

Basically I can't live without emmet

[@nmaqsood]

Awesome! Always well explained. Thank you

[@ae_holic]

I like how Emmet is set by default in VSC. But okay it's 2020 now, was to be expected but still nice.

[@fakhruddinmasalawala9525]

was waiting for this...thnx mate!

[@JohnEthan777]

I modified the snippets.json folder as instructed in the video but I erroneously created a new snippets.json folder in the sandbox directory and created a new value in there. After rewatching the section on the file path for snippets.json , I navigated to that path and copied and pasted the modified file(snippets.json) into that folder. However, now several of my abbreviations are no longer functioning. Is there any fix for this?

[@yabba234]

brad, youre the best ! thanks so much!

[@a1productsource410]

what's your thoughts on CSS Grid seams like a good way to design sites if your going to manually code your site

[@ywl94]

have been looking for this, thank you!

[@RahulGupta1981]

I am having issue with Tab key usage. It adds Tab equivalent space between starting and ending tags. I am not sure how to fix it.

[@vickylance]

I believe VSCode has Emmet built in and ON by default

[@TraversyMedia]

Yes it does. All other editors should take note

[@onecarwood]

vignesh sivakumar yes it does. I use VSC all the time now. I used to use Dreamweaver then Atom but VSC beats em all! Oh yea and I used to use Coda 2 because of the sync was easy with all my machines but they want to charge you 7 bucks to use Emmet. I don't get that when every other editor allows for free. Because of that I don't use it anymore what a crock of shit.

[@EvanZamir]

PyCharm/WebStorm also have it (not turned on by default, I think).

[@NoahNobody]

lol, that's why I didn't find it in the plugins.

[@vickylance]

Noah Nobody there is a plugin.. not for Emmet but a very useful plugin for js.. ESlint.. check that out

[@safiparman415]

Thanks for the video 👌Makes it much more easier for me to code

[@carolmckay5152]

You are a most excellent teacher sir, thank you very much :-)

[@hakunamata_tuh]

can you do every Saturday or Sunday making apps, like js app, nodejs app or website layout/design. and every Friday for tools

[@babitabisht4563]

The tutorial is awesome 💖💖💖 I luv it 💖💖💖 Thanks sir It helped me a lot ...

[@Knards]

Thanks for the refresher! I totally forgot using the :

[@nineironshore]

I didn't understand what grouping does div > (ul>li+p)

[@csudh-abarton]

Excellent overview - thank you!

[@misterjaypeasmith]

Great video - and we can see you! 🙌🏾

[@videogamesare1]

This is so, so awesome...thanks for the super helpful tutorial

[@brod515]

@9:21 I think the last angle bracket is redundant

[@ColinsMatas]

Emmet is great! This video is amazing!

[@ritik84629]

you haven't linked .json then how did snippet worked? It didnot in my sublime text3

[@hanisster]

Hi what vs code plugin you recommend for code formatting? I'm setting up environment for a laravel project..

[@tomvito]

Very helpful tool. Thanks Brad :)

[@kasmanialisaad]

This is amazing content. Great Job!

[@98luk45]

Sometimes it's just faster to type the entire thing than to use the abbreviations. A good autocomplete and intellij style keybindings are good enough for me, at least until I start getting comfortable with emmet. Good overview btw.

[@marineoutsource]

as per instructions i did unzipped at plugins folder but it's not reflecting in my Notepad++ any suggestions?

[@khalidelgazzar]

Great tutorial. Thank you 😊

[@fearless-112]

Can you suggest editors or atom plugins which help beautify php . the beautify doesnt work for php

[@gizachewalemu4534]

I've learned from your video. Thanks

[@khalil_rahmani]

Thank you Brad for this video. I just have a question ! Can we integrate an IONIC App with ELECTRON as a desktop App ? Thank you again ;)

[@quete_noub]

The abbreviations did not work for me in VS Code.

[@deividaskrupstas]

Thanks for another great video tutorial!

[@NERO-ez1mn]

i see 5 shits of people who are hating the VID but don't really LOVE PROGRAMMING :-)

[@bappybd]

Great tutorial video as usual.

[@alleefattah8045]

You are always special !! Thanks

[@pothny3371]

Thank you for sharing this with us

[@dawntraci]

"AWESOME!!" said the new coder. :)