Write code faster in VS Code with Emmet shortcuts

Поделиться
HTML-код
  • Опубликовано: 25 авг 2024

Комментарии • 298

  • @tasnimul
    @tasnimul 3 года назад +49

    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  3 года назад +8

      Thanks for sharing! Great tip 🔥

    • @ilovemanga442
      @ilovemanga442 Год назад +4

      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 Год назад +2

      Thanks dude ,,,,,

    • @todsapon9854
      @todsapon9854 Месяц назад

      thank you

  • @beccuh
    @beccuh 4 года назад +81

    Ahhh! This is literally everything I needed to know. Definitely bookmarking this for future reference 😅 Thank you for another great tutorial!

    • @TheCoderCoder
      @TheCoderCoder  4 года назад +9

      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 года назад +4

      @@TheCoderCoder But we would definitely learnt the all the things from u. 😉

    • @mosessamuel6918
      @mosessamuel6918 3 года назад

      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 года назад +4

      1 more Emmet shortcut she didn't tell in this video
      For creating type of a tag
      Example
      Input:submit
      Result,

    • @mintesnotmelese7912
      @mintesnotmelese7912 2 года назад +1

      @@MYRZO28 Thanks! Loved it

  • @joelcurtis562
    @joelcurtis562 2 года назад +10

    Just started using VS Code and this video is a great jump-start to efficiency. Excellent content. Subscribed.

  • @mikhalodinsword513
    @mikhalodinsword513 Год назад +1

    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!

  • @WackLantern
    @WackLantern 2 года назад +1

    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!

  • @dazecm
    @dazecm 3 года назад +2

    Thanks for sharing Jessica. Who doesn't like cool stuff that saves time and lessens the pain-points of writing code?

  • @lilianmoraa9621
    @lilianmoraa9621 2 года назад +2

    Learning coding and am using vs code as my code editor. Your tutorials are just simple and easily understood

  • @ashleyhunt4831
    @ashleyhunt4831 3 года назад +1

    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 =)

  • @ReadyDesignerOne
    @ReadyDesignerOne 3 года назад +1

    Nice, love the one which saves you typing div before the class

  • @charlz.
    @charlz. 4 года назад +1

    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.

  • @thecodingsim6003
    @thecodingsim6003 2 года назад +1

    YOU ARE SO HELPFUL!!! Thank you so much !

  • @favouritejome
    @favouritejome 4 года назад +11

    Thanks for this video, especially the word wrap. I've also wanted to figure that out.

    • @TheCoderCoder
      @TheCoderCoder  4 года назад +2

      Awesome, I'm glad this could help!

  • @polka.dot.
    @polka.dot. 6 месяцев назад

    During this whole video, I was just like: WOW! so so so cooool!

  • @KineticMusik
    @KineticMusik 2 года назад +1

    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.

  • @mmazatae
    @mmazatae 3 года назад +1

    I am a completely new to the coding world, and your tips are very helpful. Thank you so much for making this video.

  • @suchitsheth1192
    @suchitsheth1192 4 года назад +5

    Thank You,
    it was a great video.
    I also like wrapping the tag functionality of the emmet.

  • @medeirosbrendon
    @medeirosbrendon 2 года назад

    Eventually I always come back to this amazing video!

  • @midnightcat6116
    @midnightcat6116 4 года назад +3

    You deserve more subscribers & have the best tutorials I’ve found on the web so far. 🙌☺️😬🌿

  • @keronwilliams5392
    @keronwilliams5392 3 года назад +2

    Thank you!!! You always get straight to the point! Love it here 🍻

  • @gotem370
    @gotem370 3 года назад +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?

  • @kevinbegin3049
    @kevinbegin3049 3 года назад +2

    just what I was looking for. awesome stuff. thank you for posting.

  • @rakshitarenja7123
    @rakshitarenja7123 4 года назад +2

    Thanks, these shortcuts were much needed

  • @bluesdog88
    @bluesdog88 2 года назад +1

    Amazingly cool tips, thank you!

  • @shrihansini1199
    @shrihansini1199 4 года назад +1

    This is what I was hunting for since long days ..! Thanks.!

  • @therealboyzie
    @therealboyzie 3 года назад +1

    this is really helpful. i really appreciate this!!!

  • @TechnicalMoinBD
    @TechnicalMoinBD 3 года назад +1

    I learn a lot from this video. Thanks

  • @kishorsarania9176
    @kishorsarania9176 Год назад

    I have been looking for this for last one month

  • @RadhadasiMinsk
    @RadhadasiMinsk 2 года назад +1

    Thank you. I appreciate you for such simple explanation of information.

  • @edlynpamittan194
    @edlynpamittan194 3 года назад +1

    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.

  • @CodeWithRVR
    @CodeWithRVR 3 года назад +1

    my favorite emmet shortcut
    div*50>{$}
    1 to 50 numbers wrapped with div tag

  • @walkingin6375
    @walkingin6375 3 года назад +1

    Thank you

  • @valandilluinwe7332
    @valandilluinwe7332 3 года назад +1

    I love your channel on youtube, thanks for help me, greetings from Chile

  • @mohitkumarsahu3494
    @mohitkumarsahu3494 3 года назад +1

    great video to watch when starting web dev as a beginner. loved this video.

  • @ProgramWithErik
    @ProgramWithErik 4 года назад +4

    Good job! Nice video :)

  • @jellythecube
    @jellythecube 3 года назад +2

    That was so helpful! Thank you so much!

  • @PeterEvans0
    @PeterEvans0 3 года назад +2

    That's really helpful, will definitely contribute to my html productivity! Thank you.

  • @aseembaranwal
    @aseembaranwal 3 года назад

    Came after watching your video on freecodecap. You go girl.

  • @ankitgoswami1822
    @ankitgoswami1822 3 года назад

    These are all my favorite ❤️ Emmet shortcut.

  • @hetvishah926
    @hetvishah926 2 года назад

    save lot of my time and help me to code fast thank you coder coder

  • @LesCarbonaro
    @LesCarbonaro 4 года назад +9

    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 года назад +6

      Thanks so much!! 🙏 I have some playlists created with my live coding streams-- hope you enjoy!

    • @abedhabib6633
      @abedhabib6633 4 года назад +3

      Coder Coder I think live coding one is the greatest one for me.

  • @ilovemanga442
    @ilovemanga442 Год назад +1

    Thanks for your great effort, very informative as always!!

  • @rusca8
    @rusca8 3 года назад +1

    This is awesome. Wish I knew it long before, but I'll put it to good use from now on. :)

  • @sklldllm
    @sklldllm 3 года назад +5

    Great video! You can write p*5>lorem20 instead of (p>lorem20)*5, at least I find that easier :)

  • @tariqsaeid9856
    @tariqsaeid9856 3 года назад +1

    Exactly what I was looking for, Super Explanation , thank a lot

  • @dheepankarthiksworld6419
    @dheepankarthiksworld6419 3 года назад +2

    Could you make a video on the pre-built-in VS Code Shortcuts and how we can modify those VS Code Shortcuts?

  • @allyonightmare
    @allyonightmare 2 года назад +1

    What a great video! Thank you so much!

  • @matthewhayes9734
    @matthewhayes9734 2 года назад

    Thank you for this video. It's saved me a lot of time!

  • @DecentralEyes
    @DecentralEyes 4 года назад +1

    Wow amazing productivity booster. Now I need to wean myself away from the mouse and more toward keyboard shortcuts.

  • @futurecoder7824
    @futurecoder7824 2 года назад +1

    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?

  • @dorgivaljuniorr
    @dorgivaljuniorr 2 года назад +1

    this is so great, thank you soooooo much 😁

  • @GeekyLOAF
    @GeekyLOAF 2 года назад

    This is what i was literally looking for tnx!

  • @ygcjayalal
    @ygcjayalal 3 года назад +1

    your guiding way is awesome. thank you for it. but i can not get the tag or any shortcut on my mac. did you install special apps for it . or it comes automatically please help me. i am using the latest version of vs code and already i have install some apps for python programming and javascript
    thank you

  • @sadafwaqas3959
    @sadafwaqas3959 3 года назад +1

    Wounderfull vedio , very helpful.
    plz can you tell me how to move multiple lines in right and left direction (in visual Studio codet) to look code better. thanks

  • @SaiVocals
    @SaiVocals 3 года назад

    Thank You helped me, from now on i will watch all your videos.

  • @austinMANIFA
    @austinMANIFA Год назад +1

    After using shortcuts to create the elements how do you move cursor from middle of angled brackets to the end of the line? Are you just simply using the "end" key or is there another shortcut?

  • @sofiagalli5559
    @sofiagalli5559 4 года назад +1

    You are my coding hero!

  • @wcandillon
    @wcandillon 4 года назад +1

    Great video 👍🏽

  • @charityngoma8052
    @charityngoma8052 2 года назад +1

    Thanks alot for this video..
    They are very helpful

  • @stormybear4986
    @stormybear4986 2 года назад +1

    Brilliant tutorial! Very informative and useful!!

  • @372dev2
    @372dev2 3 года назад

    Thank you for the great video. I needed this since I'm trying out the emmet

  • @merowareinstance
    @merowareinstance 4 года назад +1

    That’s a pretty awesome tool!! Thanks for sharing.

  • @jayleebernarte9967
    @jayleebernarte9967 3 года назад

    I was wondering about the shortcut you use in your videos Tnx for this

  • @ujjawaljoshi6420
    @ujjawaljoshi6420 4 года назад +1

    Being a beginner it meant very helpful..

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

  • @revvnijaa4177
    @revvnijaa4177 3 года назад

    Cool teacher ever lots of love from india..

  • @user-hv7kc5zy6f
    @user-hv7kc5zy6f 3 года назад

    That makes my life so easy Thank 😄

  • @987Stephen1
    @987Stephen1 4 года назад +1

    Nice concise, practical video - thanks!

  • @progtom7585
    @progtom7585 4 года назад +1

    wow... you did an emmet video!!! cheers!!

    • @TheCoderCoder
      @TheCoderCoder  4 года назад

      haha yes! Thanks for the suggestion last time! :)

  • @clevermissfox
    @clevermissfox 10 месяцев назад +1

    One shortcut I always see is how users are able to delete the whole line their cursor is in without selecting it. I have to experiment when I get on my computer because I found a ton of answers and not sure which is correct… cntrl + L , cntrl + C , cntrl + shift + K, cntrl + alt + K ….. ?

  • @Nasir127sb
    @Nasir127sb 2 года назад

    I am bigner coding.very useful information

  • @khaledelhoushi8834
    @khaledelhoushi8834 Год назад

    I know another cool trick you can do that no one's talking about if you do this code "(li*5)*5" it will create 5² li elements which is 25.

  • @ataylortca
    @ataylortca 3 года назад +1

    Excellent and simple! Thanks!

  • @samiulislam2100
    @samiulislam2100 2 года назад

    thanks for making this video. very helpful.

  • @slzrkatereeen
    @slzrkatereeen 3 года назад +1

    Hi you know what I learn HTML and CSS in just one of ur videos its really helpful can I ask something can I make a voting system just using vs code?

  • @clemencetan9274
    @clemencetan9274 2 года назад +1

    Thank you so so much !!

  • @dakshvideoeditor
    @dakshvideoeditor 3 года назад

    I knew this,
    after
    seeeing this video

  • @SkyKosiner
    @SkyKosiner 4 года назад

    thanks so much for the useful shortcuts just discovered you from instergram a few weeks ago

  • @claudia_ramirez
    @claudia_ramirez 4 года назад

    thank u so much!! this is a timesaver and its so useful 🙌

  • @YOSRRI
    @YOSRRI 2 года назад

    thank you so mush this helped me alot

  • @afeezbabatunde5023
    @afeezbabatunde5023 3 года назад

    You have really helped me with these tips

  • @JorgeEscobarMX
    @JorgeEscobarMX 3 года назад

    Wonderful I didn't know you can do this. I'm writing an eBook so this will help me a lot.

  • @michaelmolter6180
    @michaelmolter6180 2 года назад +1

    Can you have the cursor jump between tags? This would be huge when filling out multiple tags (when the {text}) syntax isn't enough).

  • @Crispypoyo
    @Crispypoyo 2 года назад

    Excellent tutorial.

  • @MuhammadImran-be7xf
    @MuhammadImran-be7xf 3 года назад

    you are Solve my lot of problems
    thanks you !!!!!!!!!!!!!!!!!!!!

  • @basalduat
    @basalduat 3 года назад

    Thank you! You are a good instructor.

  • @shutterbugtraveller1004
    @shutterbugtraveller1004 2 года назад

    Very helpful. Thanks!

  • @parthpatel-hd3cp
    @parthpatel-hd3cp 4 года назад +1

    Thanks a lot for this video.😀

  • @MizbahHossain
    @MizbahHossain 2 года назад +1

    The first one used to work, but suddenly for some reason it doesn't work now. If I type the exclamation mark now, it's just showing the exclamation mark now, not the boilerplate HTML. Can somebody tell me the solution?

  • @emmasiji7586
    @emmasiji7586 3 года назад +1

    Hi 👋🏾
    Thanks for the shortcuts
    Pls what extensions can i use to get the autocomplete function for bootstrap classes on vs code?

  • @imtheonehero9305
    @imtheonehero9305 Год назад +1

    when i click enter after inputting my text, it just moves the end tag to a new line.
    ex.
    Hello World
    what i want is
    Hello World
    then next line.
    How do I do that? what button to I click without having to move my mouse cursor to the end of the end tag?

  • @military_grade_dev7087
    @military_grade_dev7087 2 года назад

    Absolutely amazing

  • @codeSTACKr
    @codeSTACKr 4 года назад

    Great tips!

  • @eddiejaoude
    @eddiejaoude 3 года назад

    Really helpful, thank you👍

  • @user-gw9yk4eu2z
    @user-gw9yk4eu2z 2 года назад

    Hey, thank you for the video!

  • @stephenolatunji1971
    @stephenolatunji1971 2 года назад

    Thanks a lot for the teaching 💞💞🙏🙏👌

  • @glorian.8043
    @glorian.8043 4 года назад +2

    thank you! I learn a lot from you. Which theme are you using in VS Code?

  • @ajazzy8078
    @ajazzy8078 3 года назад +1

    thanks so much for the useful video "Love form India"
    [Good Job]*100

  • @aunglaychannel4918
    @aunglaychannel4918 4 года назад

    thank you for your sharing
    i am study form online
    this is very useful for my life

  • @kieran2347
    @kieran2347 3 года назад

    Thanks for the video, it helped alot cheers. Happy New Year in advance!