10 Helpful VS Code Extensions for HTML & CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 พ.ย. 2024

ความคิดเห็น • 107

  • @hugolabs
    @hugolabs 3 ปีที่แล้ว +24

    Two personal must-haves for me are Todo Tree (extends the custom tracking of TODOs to a customizable list of code words) and Rainbow Brackets (for when your statements get a bit too self-embedded). Heartily recommend both.

    • @daeltam
      @daeltam 2 หลายเดือนก่อน +1

      Update : rainbow brackets is not implemented directly in VScode ^^

  • @Vichion
    @Vichion 2 ปีที่แล้ว +1

    With peek you can edit the CSS straight in the peek window, no need for actually visiting the file. it's amazing.

  • @eethend
    @eethend 4 หลายเดือนก่อน

    Thanks so much! Just started HTML+CSS and really love VCS so far. Just didn't know where to start with extensions for what i need. You explained all of these so well.

  • @beckyandrews9316
    @beckyandrews9316 2 ปีที่แล้ว +2

    Dude, seriously, thank you so much! That was really clear and really helpful. I so appreciated that you actually showed what each one does in real time.

  • @javiernunez9909
    @javiernunez9909 10 หลายเดือนก่อน

    Hell yes man, thank you for the suggestions. I’m barely getting back into HTML and I didn’t really use it much outside of school, so it’s nice to improve quality of life

  • @jangavlik6466
    @jangavlik6466 2 ปีที่แล้ว

    probably coolest guy that i saw doing tutorials

  • @equationalapplications
    @equationalapplications 2 ปีที่แล้ว +1

    Thanks for putting me on the fast track to setting up VSCode for HTML.

  • @marble_wraith
    @marble_wraith 3 ปีที่แล้ว +12

    Extension config is outdated bro.
    1. Auto-rename for HTML is inbuilt into VScode under the setting "editor.LinkedEditing". The only reason to run the extension is if you want additional capability in js or jsx files. Note if you don't like the red background highlight you can style that using - "editor.linkedEditingBackground".
    2. Instead of "IntelliSense for CSS" and "CSS peek", you can get rid of both those extensions and just run the "CSS Navigation
    " extension (by pucelle) instead which gives you the same capabilities, and then some.
    3. Lorem Ipsum isn't an extension by itself, it's built into emmet and it's pretty powerful when used with it. For example - div>(p>lorem)*3
    Other extensions i recommend:
    - Auto Schema
    - File utils (rebind make new file and move file shortcuts)
    - Path Intellisense
    - Image preview

  • @breedi4995
    @breedi4995 2 ปีที่แล้ว +1

    Love the clear explanations of every extension, thanks! :D

  • @ConnorAZ
    @ConnorAZ 3 ปีที่แล้ว

    Man this guy seriously his voice is like asmr goes 90s 😂 its soooo good his voice is awesome I can watch this video all day long ❤️

  • @juliadixon4092
    @juliadixon4092 2 ปีที่แล้ว

    hello! im new to coding, thanks for making this easier!! i look forward to watching more of your videos!

  • @nighthawk_1
    @nighthawk_1 3 ปีที่แล้ว +3

    I'm currently looking for a very basic tutorial of how and what I need to do to Visual Studio Code to start coding .HTML & .CSS basic code.

  • @marshwiggleme
    @marshwiggleme 2 ปีที่แล้ว +1

    As someone who is learning and sometimes get mixed up putting styles on the wrong element, it would be cool if there was some sort of inheritance or relationship tree extension that was color-coded or something, does such a thing exist? Or maybe something like peek but shows you associated elements.

  • @proflead
    @proflead 6 หลายเดือนก่อน

    Auto Rename Tag is life saver! :)

  • @tashoni3323
    @tashoni3323 3 ปีที่แล้ว +4

    Mad respect my man, thanks for this video im new to coding and this will help me so much. I subbed and liked -_-

  • @LorenzoTijerina
    @LorenzoTijerina 2 ปีที่แล้ว

    Man, your tutorials are so soothing. Thank you.

  • @VolantesAdHollander
    @VolantesAdHollander ปีที่แล้ว +1

    Very useful thanks!

  • @othmandjuliarso7049
    @othmandjuliarso7049 3 ปีที่แล้ว +1

    They are all very helpful. I think they are going to be very handy! Thank you!!

  • @tubes789
    @tubes789 2 ปีที่แล้ว

    Great tips! Thanks, im like the cool kid in my college course now.

  • @luismurillo6837
    @luismurillo6837 6 หลายเดือนก่อน

    Thanks man, it’s helps me a lot , you are amazing.

  • @lahirueranda
    @lahirueranda 9 หลายเดือนก่อน

    Thank you very much. it's really helpful broo..

  • @Just_art14
    @Just_art14 2 ปีที่แล้ว

    thanks for all the extensions

  • @shubhamtiwari8150
    @shubhamtiwari8150 2 ปีที่แล้ว

    Excellent extentions you told it helps me a lot

  • @jameljacobs4207
    @jameljacobs4207 2 ปีที่แล้ว

    Really loved this video. It was informative and fun.

  • @sahelj7814
    @sahelj7814 2 ปีที่แล้ว +1

    Thank's bro you help a lot

  • @heatvisuals
    @heatvisuals 3 ปีที่แล้ว +2

    A++ for positivity

  • @PboiStrider
    @PboiStrider 7 หลายเดือนก่อน

    Nice vid. ps change your fire alarm battery

  • @saneok67
    @saneok67 2 ปีที่แล้ว

    thank you bro, you are a genius!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • @mikhailfrantsyzof4827
    @mikhailfrantsyzof4827 ปีที่แล้ว

    Nice job , buddy. tks for you 👍

  • @RealmOfCode
    @RealmOfCode 3 ปีที่แล้ว

    Excellent! Thank you very much for these suggestions. In my case, "Intellisense for CSS class names in HTML" worked beautifully with Typescript React components.

  • @shekharveera8979
    @shekharveera8979 2 ปีที่แล้ว

    Awesome and very well explained!! Thanks!

  • @healththeater2222
    @healththeater2222 3 ปีที่แล้ว +2

    Is there a way to see how many times each extension was installed? Some kind of ranking or something.

    • @DevelopingDadCodes
      @DevelopingDadCodes 3 ปีที่แล้ว

      Yes, just expand the left pane out a touch and you’ll see the number of installs. You can also go to the vscode marketplace link see it there.

  • @uaeson4386
    @uaeson4386 2 ปีที่แล้ว

    I appreciate your help. Thank you so much.

  • @harounlee208
    @harounlee208 ปีที่แล้ว

    thank you for you good mood ! you are a cool man

  • @Goloso333
    @Goloso333 2 ปีที่แล้ว

    Thank you for this tutorial, but you forgot to clarify how the Lorem Ipsum works to get reduced to the word Lorem3000 instead of appearing that supper long annoying line of dummy text.

  • @desty_tv7904
    @desty_tv7904 3 ปีที่แล้ว +1

    How is the extension called for the coulours before each lines text?

    • @czlate
      @czlate ปีที่แล้ว

      Indent Rainbow

  • @lakouismarouane9736
    @lakouismarouane9736 2 ปีที่แล้ว

    If it doesn't work for you, search for Default Formatter and select prettier

  • @frankdearr2772
    @frankdearr2772 11 หลายเดือนก่อน

    great topic, thanks👍

  • @JaimeBIDtravel
    @JaimeBIDtravel 3 ปีที่แล้ว

    Very cool and helpful thanks!
    Not sure why but CSS peek is not working in my workspace, it keeps kind of "loading" (showing a blue bar moving on top) but nothing shows up, any clues?

  • @gerozayas9425
    @gerozayas9425 2 ปีที่แล้ว

    This is a great video, thanks a lot!!

  • @raselali6342
    @raselali6342 3 ปีที่แล้ว +1

    So good man . it is so helpfull.

  • @vishnuvardhana2683
    @vishnuvardhana2683 2 ปีที่แล้ว

    this is awesome, loved it

  • @Simon-sly
    @Simon-sly 3 ปีที่แล้ว

    Thanks, some really useful extensions there. There is one function however that I cannot find anywhere...
    To be able to inspect an element in the browser/preview then click to edit any of the CSS styles for that element.
    I can't find an extension for this anywhere. Do you know of one?

  • @jmeihuber
    @jmeihuber 2 ปีที่แล้ว

    Yes, it is very useful. Thank you!

  • @RahulChoudhary-xi1gw
    @RahulChoudhary-xi1gw 2 ปีที่แล้ว

    nice video
    Given too much knowledge

  • @harshkureel3829
    @harshkureel3829 2 ปีที่แล้ว

    U r the best Mann saved my time 🤝

  • @04.nehalsingh12
    @04.nehalsingh12 3 ปีที่แล้ว

    awesome tutorial sir

  • @maikfinch
    @maikfinch 3 ปีที่แล้ว

    Thanks for this _ very helpful 👍

  • @la3el
    @la3el 2 ปีที่แล้ว

    Cool, helpfull! But the colors of CSS peek are really bad... I miss Brackets :( Brackets have a wonderfull integrated "peek"... It's possible to change the selcted peeked id/class backgroundcolors?

  • @ankushsonone8433
    @ankushsonone8433 3 ปีที่แล้ว

    I unable to run my html code on vs code they give a error you don’t have html debugger and recommend to download I download 3-4 recommend extension from the list but nothing is working same error came again and again what should I do please suggest.

  • @ABoringTool
    @ABoringTool 3 ปีที่แล้ว +6

    Dr. Seuss Hop and Pop, I'll take my $10 on paypal thank you

    • @DevelopingDadCodes
      @DevelopingDadCodes 3 ปีที่แล้ว

      You win! But I said “points”, not dollars. 😉

    • @ABoringTool
      @ABoringTool 3 ปีที่แล้ว +1

      @@DevelopingDadCodes oh man what's the conversion rate on those

    • @DevelopingDadCodes
      @DevelopingDadCodes 3 ปีที่แล้ว

      @@ABoringTool unfortunately, they’re a lot like Schrute bucks, virtually useless. 😆

    • @ABoringTool
      @ABoringTool 3 ปีที่แล้ว +1

      @@DevelopingDadCodes I have some stanley nickels too, what about those?

  • @mohammadmahdialvansaz8001
    @mohammadmahdialvansaz8001 3 ปีที่แล้ว

    Thanks so much! This helped me a lot!

  • @kwartawnocy4142
    @kwartawnocy4142 2 ปีที่แล้ว

    Thank you! :)

  • @JoseLuisMorales
    @JoseLuisMorales 3 ปีที่แล้ว

    Cool video and great extension thanks so much

  • @moneyfish2490
    @moneyfish2490 3 ปีที่แล้ว +5

    Looks like VS Code won

  • @Pareja7
    @Pareja7 2 ปีที่แล้ว

    How do you get the html and css code to display side by side view? Sure its a toggle.

  • @tangom3nas
    @tangom3nas 4 หลายเดือนก่อน

    this is great! :D

  • @bestofkings9793
    @bestofkings9793 ปีที่แล้ว

    css peak not working for me, i just see a white line loading at the top

  • @lawrencendlala5759
    @lawrencendlala5759 ปีที่แล้ว

    i think i've found my coding teacher with the jokes🤣🔥🔥

  • @AmitKumar-nn1rr
    @AmitKumar-nn1rr 2 ปีที่แล้ว

    css peek ain't working for me it keeps on saying
    "no definition found"

  • @WebDeveloper-xs4uf
    @WebDeveloper-xs4uf 10 หลายเดือนก่อน

    If I put .grid, auto-complete wont propigate to make the code. What do I have to install to get this working. I won't make it.

  • @mostafataheri8570
    @mostafataheri8570 3 ปีที่แล้ว

    that was grate thank you friend

  • @rodrigobalorio8560
    @rodrigobalorio8560 2 ปีที่แล้ว

    on the 3rd extensions how to go to settings?

  • @TVDramaHome
    @TVDramaHome 3 ปีที่แล้ว

    thank you

  • @mnageh-bo1mm
    @mnageh-bo1mm 2 ปีที่แล้ว

    Great video

  • @simransahu6895
    @simransahu6895 3 ปีที่แล้ว

    Out of 10 extensions how much extensions i should download...

  • @comentadortortuga
    @comentadortortuga 3 ปีที่แล้ว

    nice video, thanks

  • @hemant5718
    @hemant5718 5 หลายเดือนก่อน

    helpful brother

  • @jehankandy2970
    @jehankandy2970 2 ปีที่แล้ว

    nice bro
    continue

  • @cihandurdu9699
    @cihandurdu9699 3 ปีที่แล้ว

    How can I use the shortcode ctrl + K K. I dont know how use two combination short code. If anyone knows, can teach me?

  • @srvd9
    @srvd9 7 หลายเดือนก่อน

    that live server is made by my friend in college

  • @sirius49
    @sirius49 ปีที่แล้ว

    why prettier deletes empty line?

  • @2gamers976
    @2gamers976 3 ปีที่แล้ว

    thank you buddy👍

  • @mazenalfar5953
    @mazenalfar5953 ปีที่แล้ว

    شكرا لك 🌹💕🌷

  • @Gift87
    @Gift87 3 ปีที่แล้ว

    it's Dr.Suess , Cat in the hat

  • @trxlly
    @trxlly ปีที่แล้ว +1

    Thank youu!!!!!1

  • @hajimeippo804
    @hajimeippo804 3 ปีที่แล้ว

    thank you very much

  •  3 ปีที่แล้ว

    Thank you so much.

  • @eHalluks
    @eHalluks 2 ปีที่แล้ว

    How to on color gap columns like in video? smn knows that?

  • @etleo3811
    @etleo3811 3 ปีที่แล้ว

    🙌🏾🙌🏾🙌🏾🙌🏾🙌🏾🙌🏾

  • @nomorecensorship2815
    @nomorecensorship2815 3 ปีที่แล้ว

    It comes from the the p tags?
    Edit: lol faillllll... it's true, but after reading the comment section....🤦‍♂️

  • @yahmk3978
    @yahmk3978 3 ปีที่แล้ว

    Thank you!

  • @siawonderswhy
    @siawonderswhy 3 ปีที่แล้ว

    such a cool guy thank you

  • @olenanevzorova673
    @olenanevzorova673 2 ปีที่แล้ว

    Super and fun :-)

  • @NikhilKumar-up4nd
    @NikhilKumar-up4nd 3 ปีที่แล้ว

    what about VS IDE

  • @timmytainment
    @timmytainment ปีที่แล้ว

    Only works for HTML. You t need to Paht PHP n ur enviroment variables as too

  • @abdulghani786
    @abdulghani786 3 ปีที่แล้ว

    Brackets pair colorizer

  • @sushilasriv19
    @sushilasriv19 3 ปีที่แล้ว +2

    You can just use format document instead of prettier...

  • @ЛляКузьменко
    @ЛляКузьменко 9 หลายเดือนก่อน

    cool video)

  • @prayanshresth
    @prayanshresth 3 ปีที่แล้ว

    WE ALL ARE TALL ಥ_ಥ

  • @AnonEMuss-gw8fm
    @AnonEMuss-gw8fm 3 ปีที่แล้ว +1

    I assume they called it "prettier" because "uglify" was already taken. 😁 Seriously, prettier is the kudzu of web development. Difficult to contain, and impossible to eradicate once it takes hold. 🤬

  • @QuietWind01
    @QuietWind01 2 ปีที่แล้ว

    Classic html... "I D u N n O w H a T t O d o W i T h T h a t"
    CSS: "I'll help you!" *dies*

  • @nikuzair3178
    @nikuzair3178 2 ปีที่แล้ว

    Thank you!

  • @IllD.
    @IllD. 2 ปีที่แล้ว

    THANKS A LOT

  • @вукі
    @вукі ปีที่แล้ว

    Thank you!