Visual Studio Code setup for HTML CSS and JavaScript | VS Code setup for beginners

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

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

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

    Hey :D. I appreciate you for uploading such a beginner friendly video. Noob question upon downloading Bracket Pair colorizer 2 it says that the extension is now deprecated, the functionality is built in to VS code. Is the full functionality built in or is there any alternative extension to download ?
    Thank you again for your time

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

      There are no noob questions, just thinks you and I don’t know 🤷🏾.
      You don’t need to download everything else, it is fully integrated.
      Hope this was helpful;)

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

      @@NorbertWebDev oh thank you ❤️

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

    thanks man! you saved my hella amount of time... .

  • @itsmebiswarup_10
    @itsmebiswarup_10 4 месяца назад +1

    after word wrap what shall i do? control shift and??

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

    Don`t be shay, stay awhile and listen. Also leave you questions or suggestion in the comments!

  • @johnarnoldcatedrilla4378
    @johnarnoldcatedrilla4378 3 года назад +6

    wow its so helpful btw im new at web developing I started from c# but i feel its not for me thanks for the set up

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

      Hei, welcome to the web dev world, and pls, "stay awhile and listen" 😅.

  • @pahulpreetkaur7446
    @pahulpreetkaur7446 2 года назад +11

    Thank you so much, it was really useful and understandable!

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

      You're very welcome!
      Spread the word to others :)

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

    Quick Question: Is it required to put the

    commands at the start of the code or can I just jump straight into writing the title and so on as if I were on a notepad on a windows pc?
    Thank you for posting this video, it was very helpful!!

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

      Meta tags are important because they impact how your site appears in the SERPs and how many people will be inclined to click through to your website. They will therefore impact your traffic and engagement rates, which can impact your SEO and rankings.

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

    I'm trying to figure out the magic trick at 3:15

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

    nice vid but you didnt show the javascript executing from the html page... This what i came to learn.

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

      Hi, sorry but this is a specific vs code video. I do have JavaScript videos on my channel, check them out if you wish.

  • @fa-iizii
    @fa-iizii Год назад +1

    is Live Server and Microsoft Live Preview - VS Code Extension both are the same ?

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

    How to change style and color of the cursor #VS Code
    ruclips.net/video/8r_iRuusTgE/видео.html

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

      Hi, thanks for the great question. :)
      I will create a Step-by-step Video Tutorial and Blogpost for this, it will make it much easer to follow. Video will be up in approx. 48h so stay subscribed and notifications turned on.
      Have a nice day,
      Norbert BM

  • @sailakshmimanthena4244
    @sailakshmimanthena4244 Год назад +2

    Hey it is showing that HTML snippets are no longer available while I'm trying to install it in the extensions. Can you please tell me why this is showing in my vscode ide?

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

      Hi, the HTML snippets are integrated in the latest version of VS Code. Just have your VS Code up to date and its all good :P

    • @fa-iizii
      @fa-iizii Год назад +1

      @@NorbertWebDev Thanks :D

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

    Why it's not opening local server on my pc when I m clicking go live

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

    thanks to you ....it's a helpful video for beginners💯

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

    you sound like Arnold Schwarzenegger lol

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

      To bad I don't have his body from his 20-40 and only his voice :))))))

  • @MonkeyJames-u2o
    @MonkeyJames-u2o 2 года назад +2

    Hi I'm currently a high school student and I love your content it inspires me to explore more on Web Development. You just earned a new subscriber, btw I have this error when I run my html code I was directed to google chrome then it says that "This site can’t be reached Check if there is a typo in testing.html.
    If spelling is correct, try running Windows Network Diagnostics.
    DNS_PROBE_FINISHED_NXDOMAIN" may I ask how can I fix this?

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

      have you found a fix yet?

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

    the version of braket pair colorize it'snt

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

      It is now integrated in visual studio code, no extension required;)

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

    insta sub from a beginner web dev (i hope)

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

    First clear the spelling in thumbnail HRML to HTML

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

      HAHAHAHAH, Thank you so much, I didn't notes it :)))))

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

    it helps alot thanks

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

      I am glad it was helpful. Hope you enjoyed it:6

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

    now that the Html snippets is depreciated do you recommend any other extension?

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

      There are a multiple Extensions that ware deprecated (No logger as it is no longer being maintained) in the last couple of Months. And YES this is one of them :) . But it is kind of integrated in to Visual Studio Code, this means that even more extensions will follow to be integrated directly in the installer of VS Code.
      No, I cant recommend anything else because VS Code dose the work for you.
      Hope this was helpful.

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

    is the live server extension still runing?

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

      Yes shure, do you have problems running it?

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

    Thank you for valuable info - I'm very new to this field to know more about extensions in vs code to start any practice my project in programming.😀😊👏👌👌

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

    Where is this "go live" button?

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

      If you have the live server extension installed you will see it in the bottom right part of visual studio code. You can also have a .html file opened in VS Code and if it contains a html5 boilerplate then just right click in the code and you should see "open with live server" in the options.
      Hope this was helpful.
      Best regards,
      Norbert

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

    My backspace is not working on vscode what might be the problem

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

      Wow, that is so strange, I never heard about this. Will take a look at it and come back to you if I find something.

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

      @@NorbertWebDev Yeah its even in stack overflow but with no answer glad your willing to check it out thanks a lot.

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

      @@japhethachimba174 No problem.

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

    I dint understand How did you spawn the whole code ? Can you explain that please

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

      Yes!
      Hold down Shift + 1 on the keyboard

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

      maybe you have to restart VSC and insert the exclamation mark (❗)

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

    UPDATE - FIX the HTML5 Boilerplate Emmet Shortcut Key in Visual Studio Code . If the Shift + 1 shortcut key is not working then this is the solution.
    ruclips.net/video/PWlIyQ09O0o/видео.html

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

    I just get a "File could not be accessed" when I try doing this. Exactly to the letter but not working.

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

      I would gladly help. could you be a bit more precise?

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

    easy peasy

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

    such a good video, love for this my brother

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

    Hrml? Lol 🤦🏻‍♂️

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

    Thank you and thank you

  • @gelo983
    @gelo983 3 года назад +3

    hi I have a question, what command did you use to appear the ( command and the other code with it.?

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

      Hi, it’s “ shift + ! “ but you need to have emmet installed in vs code, usually it come with vs code perinatale.

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

      @@NorbertWebDev oh ok thank you.

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

      No problem 🤘

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

    where is css

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

    is it yellow color means warning ???

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

      Yes

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

      @@NorbertWebDev then why did you done at vs code a warning ⚠ code ???

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

    Good, haha the Thumbnail says HRML haha good video

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

    When the word wrap appears what do u do? I am confused at what u said

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

      You just click on it in order to activate it. Sorry for the confusion.

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

    I can't figure out the wordwrap,how do I toggle it on

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

      Click o manage down in the left corner, then command palette, then type in word wrap and click on it , it will toggle it on /off
      Hope this was helpful.

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

    tnx a loooooooooooooooooooot

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

    Thanks

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

    Thanks

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

    very helpful thanks

  • @FS-me8mj
    @FS-me8mj 2 года назад +1

    Sup

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

    Do we need to do some setup before hand or will just doing this will allow vs code to run css JavaScript html ..

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

      You can run HTML CSS and JavaScript right after installing VS Code.
      The only thing you might need is live server so you don’t need to constantly refresh your browser. The rest of the extensions just make life easier ;)
      Was this helpful?

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

      @@NorbertWebDev yup thanx for the info

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

    Hi thanks a lot for this video. However, I am not getting any options/shortcuts when I press ! in the text editor. Is there a setting I'm missing?

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

      Hi,
      No you are not missing anything.
      Shift + ! for the HTML5 Boilerplate no longer works in Visual Studio Code.
      The solution is to just type out " html : 5 " and Emmet should recognize it and give you a HTML5 Boilerplate.
      It is almost the same thing.
      Try it out and get back to me.
      Hope this was helpful.

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

      HI. I just created a video with two solutions for this problem:
      ruclips.net/video/PWlIyQ09O0o/видео.html
      Hope this was helpful :)

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

    Thanks 👍🙏

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

    I saw one thing. But didn't know what was it. When you were typing any tags or codes on the right side, a line with "emmet" word keep popping up. can you tell me what was it?

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

      Hi, sure! Emmet - the essential toolkit for web-developers · HTML from CSS. It is baked in to VS Code and its syntax is inspired by CSS selectors.
      Basically it suggests HTML tags, classes. It is extremely helpful because it increases you coding speed.
      Was this explanation helpful ?

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

      @@NorbertWebDev Yes. Very much!! Thank you!
      edit:- so in short it helps us to write codes first.

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

      @@_kiaz_ Exactly !

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

    live server is so nice

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

    Amazing!

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

    Can't find live serve in the extensions

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

      Try typing it in to google and it should find it and send you directly to the visual studio code website

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

    What key you pressed here at 3:18?

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

    I cannot use live server. what should I use instead of that?

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

      That is so odd, why is that, if you want you can create your own nodejs serve, I got a video on it, but I would still suggest to try and make live server to work!
      Was this helpful?

  • @cvg-v1y
    @cvg-v1y 2 года назад +1

    ty so much it was very helpful

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

    finally met someone else named norbert lol

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

      Power to the Norbert’s of the earth 🌍!

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

    i m saving this video rn good job

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

      Thank you, glad you enjoyed it and it was useful for you :)

  • @user-rxeuzf
    @user-rxeuzf 2 года назад +1

    w video thank you man

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

    GOD bless you

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

    man u just earned a subs
    thanks for this tutorial

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

      Thanks for the sub! And welcome to the club :P

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

    Thank u so much! We appreciate your work !

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

    chikititoy

  • @زينه-س8ز
    @زينه-س8ز 2 года назад +1

    Thank you 💗

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

      You are welcome ;) hope you enjoyed it :)

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

    You sir, are a living legend. 👍

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

    Thank you so much it's very helpful

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

      Much appreciated, share the word and help others ;)

  • @DeepakChaudhary-ys2yt
    @DeepakChaudhary-ys2yt 2 года назад +1

    Thank you so much sir it's help me alot 🙌

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

      You are welcome Sir. Like and share with other if it was of value.

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

    Change the Thumbnail. There is a mistake in the name of HTML

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

      Thanks, but I know, it's just so long ago that its funny to get this comment :)))).
      But thanks for pointing it out, showing that you care :)

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

    At 3:16 how did you autofill?

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

      Hold down Shift + 1 on the keyboard, this will give you a “!” Wihitch is the shortcut key for the HTML 5 boilerplate. Then you need to Enter or Tab in order to use it.
      Hope this was helpful.

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

      @@NorbertWebDev Thanks for replying. Great videos!!

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

    How to get CSS file?

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

      Create on by giving it a name and a extension, for example a commun us is style.css , this will create a file that is a type of css and in wichch you can write css code in.

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

      @@NorbertWebDev Thanks for responding to comments nearly a year later. Also thanks for that, it worked.

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

    Thanks ! 👌

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

    Thanks

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

    well explained and on point.

  • @RUNE-5
    @RUNE-5 Год назад +2

    your voice is soo soothing

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

      That’s… wait, is that good or bad ? :)))

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

    i wonder how you got so much views. you are not willing to teach but doing this to make funds

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

      Hi, what exactly do you mean with "you are not willing to teach but doing this to make funds" is there something I can help you with?

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

    amazing

  • @Ilahi-sq4qg
    @Ilahi-sq4qg Год назад +1

    Spelling mistakes :
    HRML is not correct,
    HTML is correct 😂😂

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

      I know but it’s to much fun to change it now :)))

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

    @junior coder check this channel out