Write code faster in VS Code with Emmet shortcuts

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

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

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

    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 6 месяцев назад

      thank you

  • @mikhalodinsword513
    @mikhalodinsword513 2 года назад +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!

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

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

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

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

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

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

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

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

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

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

  • @Mmzhran
    @Mmzhran 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.

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

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

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

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

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

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

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

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

    Thank you

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

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

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

    Eventually I always come back to this amazing video!

  • @clevermissfox
    @clevermissfox Год назад +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 ….. ?

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

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

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

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

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

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

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

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

    Thanks, these shortcuts were much needed

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    I have been looking for this for last one month

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

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

  • @Dude-rn2ye
    @Dude-rn2ye 2 года назад

    how to remove spaces between line number and code line? for example, look at 0:54 Meta, title tags inside head have two spaces but there are 4 spaces in my vs code app. how to change this setting?

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

    These are all my favorite ❤️ Emmet shortcut.

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

    I learn a lot from this video. Thanks

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

    How did you jump to the end of the line? I am having trouble because I have a 60% keyboard without arrow keys and I have to know how to move around the lines of code without having to jump to my mouse and move it manually every time😂

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

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

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

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

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

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

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

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

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

    That was so helpful! Thank you so much!

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

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

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

    Amazingly cool tips, thank you!

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

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

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

    Brilliant tutorial! Very informative and useful!!

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

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

    You are my coding hero!

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

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

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

    hi! Which emmet are you using? There seems to be a lot of emmet extensions in the marketplace.

  • @michaelmolter6180
    @michaelmolter6180 3 года назад +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).

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

    This is what i was literally looking for tnx!

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

  • @Noir-mh3es
    @Noir-mh3es Год назад +1

    i feel like a cavemen discovered fire lmao
    note: also u can just leave it just a "#" or/with " . " and u have blank div ()

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

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

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

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

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

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

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

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

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

    guys which emmet extension should i go for in vscode?
    there's alot of emmet extensions

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

    If there are 4 div tags and we have edit and write class in every 4 div tag at once how to do ??

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

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

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

    Good job! Nice video :)

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

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

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

    What a great video! Thank you so much!

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

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

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

    Cool teacher ever lots of love from india..

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

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

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

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

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

    this is so great, thank you soooooo much 😁

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

    Nice video, but how do I activate this emmt feature? In my VS Code non of the shown examples work.

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

    Nice concise, practical video - thanks!

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

    somebody please tell me how to jump to the other side of a closing tag without using mouse or arrow key (eg-she jumped to the other side of the h1 tag here 1:39)

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

    how will you add for existing bulk story you have from note pad?

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

    Very good do you have a video, on how to code a full website, with VS code?

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

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

    Hy, how to auto indent nested HTML tags in VS Code?

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

    You have really helped me with these tips

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

    Thanks!

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

    Great video 👍🏽

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

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

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

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

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

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

    Thanks alot for this video..
    They are very helpful

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

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

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

    Thank you so much! I had a doubt, is there a short-cut, which adds tag to the sentence?

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

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

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

    When I wanna make Ul tags with ancher links , I don't know how to put # automatically for hrefs . I write
    Ul>li*4>a
    and I have to put # for each link , is there a way I can also give this value to hrefs. Thx a lot

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

    Excellent and simple! Thanks!

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

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

  • @ลุงยุทธ์ยันกัญชา

    That makes my life so easy Thank 😄

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

    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?

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

    Being a beginner it meant very helpful..

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

    I actually have a question
    When we signup on a website
    We feed all the details to create account
    Then in a second we receive mail from that website
    The mail asks to click on the link to verify your account
    As we click on the link
    The web page comes showing your account successfully created
    This is what my question is
    How to generate this automated transaction when the user creates the account and receive a mail

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

      rakshit arenja - full stack web development

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

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

    new subscriber from philippines , very informative video appreciated , ill surely copy this

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

    Thank you! That's great for adding new html, but what if you want to, say, add a DIV around existing elements or text? Is there any way to select text and have emmet generate begin & end brackets around it?

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

      CTRL + SHIFT + P -> Wrap with abbreviation
      This is for any future watchers. I know this comment is 3 years old