Тёмный

Write code faster in VS Code with Emmet shortcuts 

Coder Coder
Подписаться 495 тыс.
Просмотров 143 тыс.
50% 1

🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
Using Emmet in VS Code will help you write code more quickly and efficiently. Here are my favorite shortcuts!
0:00 - Intro
0:27 - Adding boilerplate HTML
0:53 - Writing tags without having to type in the brackets
1:23 - More tag examples
2:15 - Add class and id values to a tag
3:03 - Creating div tags with class and id doesn't require typing the tag name
3:38 - Creating child/nested tags
4:34 - Creating sibling tags
5:21 - Create any number of tags at the same time with the multiplication
6:21 - Adding in placeholder "lorem ipsum" text
7:05 - Using parentheses to create groupings of generated tags
7:56 - Bonus! VS Code shortcut, toggling word-wrapping (I use this constantly!)
_____________________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.com/responsive/
🌟 Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- vissles.com/?ref=mu96kxst5w
💻 Other gear -- www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- coder-coder.com/best-web-deve...
📺 My Favorite Courses -- coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming

Наука

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

 

16 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 295   
@tasnimul
@tasnimul 2 года назад
You missed this one: ul>li*4{list-item-$} this will create 4 list items inside an ul and each of them will have an innerText of list-item-1/2/3/4 there is also something called wrap abbreviation which can be accessed from the command palette and can be used for wrapping elements with containers after creating them
@TheCoderCoder
@TheCoderCoder 2 года назад
Thanks for sharing! Great tip 🔥
@ilovemanga442
@ilovemanga442 Год назад
yeah yeah. and we can also use it for tags: div[class="divs div-$"]*4 will create 4 div items with class "divs" and a unique class for each div in order "div-1" div-2" "div-3" "div4" classes.
@kishorsarania9176
@kishorsarania9176 Год назад
Thanks dude ,,,,,
@joelcurtis562
@joelcurtis562 2 года назад
Just started using VS Code and this video is a great jump-start to efficiency. Excellent content. Subscribed.
@mikhalodinsword513
@mikhalodinsword513 Год назад
I've been struggling to create a website for a month because i don't know what this type of shortcut called. Now i already created 2 websites in just a month bcs of this vid. Really, thanks!
@MohamdZahran
@MohamdZahran 3 года назад
I am a completely new to the coding world, and your tips are very helpful. Thank you so much for making this video.
@lilianmoraa9621
@lilianmoraa9621 2 года назад
Learning coding and am using vs code as my code editor. Your tutorials are just simple and easily understood
@charlz.
@charlz. 3 года назад
I watched this video few weeks back. Since then I've been able to write more codes in a shorter time. Thanks Alot, this really helped.
@ashleyhunt4831
@ashleyhunt4831 2 года назад
I've been using VSCode for a while and realized recently that I didn't even know how to utilize emmet! This video was awesome and super helpful =)
@WackLantern
@WackLantern 2 года назад
HEY thanl yu so so much for this video! I moved from Sublime to VS and was absolutely lost on how to use shortcuts for the code typing. This video was incredibly helpful, thank you again!
@keronwilliams5392
@keronwilliams5392 3 года назад
Thank you!!! You always get straight to the point! Love it here 🍻
@midnightcat6116
@midnightcat6116 3 года назад
You deserve more subscribers & have the best tutorials I’ve found on the web so far. 🙌☺️😬🌿
@ReadyDesignerOne
@ReadyDesignerOne 3 года назад
Nice, love the one which saves you typing div before the class
@beccuh
@beccuh 4 года назад
Ahhh! This is literally everything I needed to know. Definitely bookmarking this for future reference 😅 Thank you for another great tutorial!
@TheCoderCoder
@TheCoderCoder 4 года назад
yay!! There are a lot more shortcuts I could probably take advantage of, but I haven't learned them all yet haha 😂
@nalleswarannaganathan3783
@nalleswarannaganathan3783 3 года назад
@@TheCoderCoder But we would definitely learnt the all the things from u. 😉
@mosessamuel6918
@mosessamuel6918 2 года назад
you all prolly dont give a shit but does anybody know a tool to log back into an Instagram account..? I was dumb forgot the password. I would appreciate any tricks you can offer me.
@MYRZO28
@MYRZO28 2 года назад
1 more Emmet shortcut she didn't tell in this video For creating type of a tag Example Input:submit Result,
@mintesnotmelese7912
@mintesnotmelese7912 2 года назад
@@MYRZO28 Thanks! Loved it
@rakshitarenja7123
@rakshitarenja7123 4 года назад
Thanks, these shortcuts were much needed
@kevinbegin3049
@kevinbegin3049 3 года назад
just what I was looking for. awesome stuff. thank you for posting.
@372dev2
@372dev2 3 года назад
Thank you for the great video. I needed this since I'm trying out the emmet
@mohitkumarsahu3494
@mohitkumarsahu3494 3 года назад
great video to watch when starting web dev as a beginner. loved this video.
@PeterEvans0
@PeterEvans0 3 года назад
That's really helpful, will definitely contribute to my html productivity! Thank you.
@gotem370
@gotem370 3 года назад
ive dipped my leg up to my ankle into programming and web development and I am honestly just gobsmacked at the amount of learning, memorization and skill required to code professionally. How do you not just go full Office Space on your hardware?
@thecodingsim6003
@thecodingsim6003 2 года назад
YOU ARE SO HELPFUL!!! Thank you so much !
@shrihansini1199
@shrihansini1199 3 года назад
This is what I was hunting for since long days ..! Thanks.!
@SkyKosiner
@SkyKosiner 4 года назад
thanks so much for the useful shortcuts just discovered you from instergram a few weeks ago
@medeirosbrendon
@medeirosbrendon 2 года назад
Eventually I always come back to this amazing video!
@tariqsaeid9856
@tariqsaeid9856 3 года назад
Exactly what I was looking for, Super Explanation , thank a lot
@merowareinstance
@merowareinstance 3 года назад
That’s a pretty awesome tool!! Thanks for sharing.
@suchitsheth1192
@suchitsheth1192 4 года назад
Thank You, it was a great video. I also like wrapping the tag functionality of the emmet.
@TheCoderCoder
@TheCoderCoder 4 года назад
Glad you liked the video!
@ilovemanga442
@ilovemanga442 Год назад
Thanks for your great effort, very informative as always!!
@SaiVocals
@SaiVocals 3 года назад
Thank You helped me, from now on i will watch all your videos.
@rusca8
@rusca8 3 года назад
This is awesome. Wish I knew it long before, but I'll put it to good use from now on. :)
@knit22knit
@knit22knit 2 года назад
Thank you. I appreciate you for such simple explanation of information.
@bluesdog88
@bluesdog88 2 года назад
Amazingly cool tips, thank you!
@ankitgoswami1822
@ankitgoswami1822 3 года назад
These are all my favorite ❤️ Emmet shortcut.
@987Stephen1
@987Stephen1 4 года назад
Nice concise, practical video - thanks!
@jellythecube
@jellythecube 3 года назад
That was so helpful! Thank you so much!
@dazecm
@dazecm 3 года назад
Thanks for sharing Jessica. Who doesn't like cool stuff that saves time and lessens the pain-points of writing code?
@stormybear4986
@stormybear4986 2 года назад
Brilliant tutorial! Very informative and useful!!
@polka.dot.
@polka.dot. 4 месяца назад
During this whole video, I was just like: WOW! so so so cooool!
@boyzie2504
@boyzie2504 3 года назад
this is really helpful. i really appreciate this!!!
@kieran2347
@kieran2347 3 года назад
Thanks for the video, it helped alot cheers. Happy New Year in advance!
@matthewhayes9734
@matthewhayes9734 Год назад
Thank you for this video. It's saved me a lot of time!
@claudia_ramirez
@claudia_ramirez 3 года назад
thank u so much!! this is a timesaver and its so useful 🙌
@GeekyLOAF
@GeekyLOAF 2 года назад
This is what i was literally looking for tnx!
@valandilluinwe7332
@valandilluinwe7332 3 года назад
I love your channel on youtube, thanks for help me, greetings from Chile
@TechnicalMoinBD
@TechnicalMoinBD 3 года назад
I learn a lot from this video. Thanks
@allyonightmare
@allyonightmare 2 года назад
What a great video! Thank you so much!
@sofiagalli5559
@sofiagalli5559 3 года назад
You are my coding hero!
@ataylortca
@ataylortca 3 года назад
Excellent and simple! Thanks!
@glorian.8043
@glorian.8043 4 года назад
thank you! I learn a lot from you. Which theme are you using in VS Code?
@afeezbabatunde5023
@afeezbabatunde5023 2 года назад
You have really helped me with these tips
@basalduat
@basalduat 3 года назад
Thank you! You are a good instructor.
@kishorsarania9176
@kishorsarania9176 Год назад
I have been looking for this for last one month
@JorgeEscobarMX
@JorgeEscobarMX 3 года назад
Wonderful I didn't know you can do this. I'm writing an eBook so this will help me a lot.
@walkingin6375
@walkingin6375 3 года назад
Thank you
@favouritejome
@favouritejome 4 года назад
Thanks for this video, especially the word wrap. I've also wanted to figure that out.
@TheCoderCoder
@TheCoderCoder 4 года назад
Awesome, I'm glad this could help!
@dorgivaljuniorr
@dorgivaljuniorr 2 года назад
this is so great, thank you soooooo much 😁
@DecentralEyes
@DecentralEyes 4 года назад
Wow amazing productivity booster. Now I need to wean myself away from the mouse and more toward keyboard shortcuts.
@edlynpamittan194
@edlynpamittan194 3 года назад
More videos of this please I am making a list of this for reference just put it on the wall and if I need it I will just pinpoint it. Btw thanks for this video it helps a lot. Blessed you.
@Ipdxcreative
@Ipdxcreative 4 года назад
Solid video and great audio quality btw
@hetvishah926
@hetvishah926 2 года назад
save lot of my time and help me to code fast thank you coder coder
@ProgramWithErik
@ProgramWithErik 4 года назад
Good job! Nice video :)
@samiulislam2100
@samiulislam2100 2 года назад
thanks for making this video. very helpful.
@dandavis8971
@dandavis8971 2 года назад
Thanks for the video. Really was very helpful.
@futurecoder7824
@futurecoder7824 2 года назад
Wow! This is going to help out a bunch. I'm still a new coder, so is this package I need to get on VS Code? What are some useful tips you have for a beginner learning Frontend Development?
@okinurkholis8447
@okinurkholis8447 3 года назад
Aaw thank you so much! This is really helpfull!
@YOSRRI
@YOSRRI 2 года назад
thank you so mush this helped me alot
@micomoreno489
@micomoreno489 3 года назад
new subscriber from philippines , very informative video appreciated , ill surely copy this
@aseembaranwal
@aseembaranwal 3 года назад
Came after watching your video on freecodecap. You go girl.
@charityngoma8052
@charityngoma8052 2 года назад
Thanks alot for this video.. They are very helpful
@Crispypoyo
@Crispypoyo 2 года назад
Excellent tutorial.
@keithhunt7175
@keithhunt7175 3 года назад
Awesome stuff! Thanks!
@user-hv7kc5zy6f
@user-hv7kc5zy6f 2 года назад
That makes my life so easy Thank 😄
@Saaad2
@Saaad2 2 года назад
Not sure either you are excellent programmer or video editor cos we watch your videos for programming stuff and you inspired us with your editing skills!
@scottsaccenti
@scottsaccenti 4 года назад
Super helpful, thanks for doing this
@dheepankarthiksworld6419
@dheepankarthiksworld6419 3 года назад
Could you make a video on the pre-built-in VS Code Shortcuts and how we can modify those VS Code Shortcuts?
@KineticMusik
@KineticMusik Год назад
you can press crtl + enter to enter a new line below the one you're on; instead of going to the end of the line and then pressing enter.
@emmasiji7586
@emmasiji7586 3 года назад
Hi 👋🏾 Thanks for the shortcuts Pls what extensions can i use to get the autocomplete function for bootstrap classes on vs code?
@rubenmedios
@rubenmedios 3 года назад
Excelent video, thanks, really i don't know the commands for emmet in vscode, in sublime text are another thing. What extentions do you use in vscode?
@lautarogarcia8038
@lautarogarcia8038 2 года назад
This was great!
@shutterbugtraveller1004
@shutterbugtraveller1004 Год назад
Very helpful. Thanks!
@yoddha621
@yoddha621 2 года назад
Thankyou ,it was very helpful
@LesCarbonaro
@LesCarbonaro 4 года назад
Very well explained. Clearly you put a lot of work into producing these tutorials. So thank you for sharing. You mentioned you do a coding live-stream? Could you post the link for that? Thanks again, and do keep up the excellent work.
@TheCoderCoder
@TheCoderCoder 4 года назад
Thanks so much!! 🙏 I have some playlists created with my live coding streams-- hope you enjoy!
@abedhabib6633
@abedhabib6633 3 года назад
Coder Coder I think live coding one is the greatest one for me.
@user-gw9yk4eu2z
@user-gw9yk4eu2z 2 года назад
Hey, thank you for the video!
@military_grade_dev7087
@military_grade_dev7087 Год назад
Absolutely amazing
@fighter8931
@fighter8931 Год назад
you deserve a subscription❤
@Xavier-vr1ku
@Xavier-vr1ku 2 года назад
Great video!!!
@jayleebernarte9967
@jayleebernarte9967 2 года назад
I was wondering about the shortcut you use in your videos Tnx for this
@clemencetan9274
@clemencetan9274 2 года назад
Thank you so so much !!
@parthpatel-hd3cp
@parthpatel-hd3cp 3 года назад
Thanks a lot for this video.😀
@jaggyjut
@jaggyjut 4 года назад
awesome. Thank you for this.
@udaygohil4875
@udaygohil4875 2 года назад
Thank you so much! I had a doubt, is there a short-cut, which adds tag to the sentence?
@progtom7585
@progtom7585 4 года назад
wow... you did an emmet video!!! cheers!!
@TheCoderCoder
@TheCoderCoder 4 года назад
haha yes! Thanks for the suggestion last time! :)
@vikramadetyaveer5405
@vikramadetyaveer5405 2 года назад
great video , thank you !!!!
@aunglaychannel4918
@aunglaychannel4918 3 года назад
thank you for your sharing i am study form online this is very useful for my life
@sklldllm
@sklldllm 2 года назад
Great video! You can write p*5>lorem20 instead of (p>lorem20)*5, at least I find that easier :)
@maheranam318
@maheranam318 2 года назад
Thank you so much!
@revvnijaa4177
@revvnijaa4177 2 года назад
Cool teacher ever lots of love from india..
@sydneysolomon5500
@sydneysolomon5500 Год назад
Very good do you have a video, on how to code a full website, with VS code?
@ujjawaljoshi6420
@ujjawaljoshi6420 4 года назад
Being a beginner it meant very helpful..
@Jeireme
@Jeireme 3 года назад
Thank you sooo much!
@michaelmolter6180
@michaelmolter6180 2 года назад
Can you have the cursor jump between tags? This would be huge when filling out multiple tags (when the {text}) syntax isn't enough).
Далее
Stop wasting time when you're learning to code!
6:56
Top 20 VS Code Shortcuts
17:00
Просмотров 99 тыс.
Best ASMR 😳
00:26
Просмотров 20 тыс.
Eddie Hall VS Neffati Brothers
00:11
Просмотров 1,7 млн
The Best VSCode Extensions 2024
9:29
Просмотров 286 тыс.
Learn web development as an absolute beginner
12:57
Просмотров 2,8 млн
15 Useful Shortcuts to Code Faster with Visual Studio
12:01
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 905 тыс.
Code faster with these VS Code shortcuts
8:44
Просмотров 312 тыс.
30 VSCode Keyboard Shortcuts You NEED to Know
17:15
Просмотров 60 тыс.
CSS Tips And Tricks 2 | I Wish Somebody Told Me Before
12:36
How I setup VS Code for a beginners front-end workflow
12:18
Rust's Alien Data Types 👽 Box, Rc, Arc
11:54
Просмотров 134 тыс.
VS Code shortcuts & tips to help you work faster
7:46
ПОКУПКА ТЕЛЕФОНА С АВИТО?🤭
1:00
Bardak ile Projektör Nasıl Yapılır?
0:19
Просмотров 6 млн