How to Setup Visual Studio Code for HTML, CSS, and JavaScript

In this video, I will show you how to Setup Visual Studio Code for HTML, JS, and CSS.
Enjoy the video!
⏰Timestamps⏰
00:00 Intro
00:30 Download & Install NodeJS
2:46 Install Extensions
04:08 Create Workspace
04:36 Create Files
05:24 Run Code
09:35 Outro
💻 To get more of our best content on IT careers and IT certifications, go to:
Be sure to leave any questions or comments below!
See More Videos and Subscribe
/ @skillsbuildtraining
Website:
Facebook: / skillsbuildtraining
Twitter: / skillsbuildt

[@nizi0]

I have a very urgent project, and while I know how to code, I always get lost in Visual Studio Code before I even start. This video was very clear and a huge help, everything works now! Thank you so much!

[@SkillsBuildTraining]

Glad I could help!

[@k_mac.i]

I've been through many tutorials on how to use vs code and clearly this is the best. I absolutely love how straight to the point it is. Thank you sm.

[@SkillsBuildTraining]

Thanks!

[@MrTdot0121]

I have watched many many many tutorials and honestly this is the best most straightforward and clear tutorial I have come across! Thank you so much!

[@ayeshaedirisinghe5793]

Thank you so much for this fantastic tutorial on setting up Visual Studio Code for HTML, CSS, and JavaScript! Your clear explanations and step-by-step guidance made it incredibly easy to get everything up and running. I especially appreciated the tips on useful extensions and shortcuts. This video has greatly improved my workflow. Keep up the great work!

[@kaitlynmccormick1310]

Thank you! I really needed a refresher, this was so quick and to the point!!

[@SkillsBuildTraining]

Glad it was helpful!

[@KeerthanaVadai]

Simply one video to get know how. To use vscode for front end part(HTML,CSS,JS). Thank you so much sir ❤

[@SkillsBuildTraining]

Glad it was helpful!

[@virtuouswoman6782]

You are so amazing, I am learning HTML on my own because I keep being screwed over by developers so now I am wanting to create HTML sites. Thank you, first video I came across and I am well on my way.

[@SkillsBuildTraining]

You're welcome!

[@user-vk2ut6os4u]

I use to struggle with how to add JavaScript to my html css fold. Your step by step tutorial is awesome❤❤❤thank you.

[@stevewilliams3797]

Thank you for helping me to get the extensions for my VSCode. You are a life savor!

[@SkillsBuildTraining]

Happy to help!

[@eveiveneg637]

straight and to the point. Perfect. Thank you!

[@SkillsBuildTraining]

You're welcome!

[@Duchess_talks.]

I haven't ever commented on a UA-cam video bf.! But this is definitely worth it. Kudos!!

[@SkillsBuildTraining]

Wow, thank you!

[@steffibontala4153]

Thank you so much sir! For a beginner like me it's helpful. Great work!!

[@SkillsBuildTraining]

You're welcome!

[@iwandamiri4163]

Such an instrumental instructor, watching with thanks.

[@SkillsBuildTraining]

You're welcome!

[@Mayrazamora]

Thank you! I am amazed at how easy it was for me to follow along and get everything working.

[@SkillsBuildTraining]

Glad it helped!

[@kangwamulenga2688]

I like your explanations and video duration, unlike these other hours video with a lotta boring crap.. keep it 🔥

[@manprabeshboruah1336]

You have solve all my problems in one single video. Love you brother 😗😂

[@SkillsBuildTraining]

Happy to help!

[@wisanimasilana6497]

Thank you so much for such a helpful video. I didn't know where to start with vscode I've been using notepad++ .

[@SkillsBuildTraining]

You're welcome!

[@giovannif9113]

Thank you
following this tutorial, I was able to set up the environment successfully

[@SkillsBuildTraining]

Glad it helped!

[@ILostMySoulToABread]

Thank you so much . i am a beginner and i installed visual studio instead of visual studio code and i was dumb struck wehn it was so different . after this vid i learened how to do it. thanl u so much.❣

[@SkillsBuildTraining]

You're welcome!

[@SOSSVT]

i have a question : when i try to run without debug it fails to show in chrome or edge after i wrote all the html ,js and css code it says that " localhost does not authorise the connexion " how do i solve this problem

[@enkanis]

Thank you for this straightworward guide !

[@ogoungabright6180]

Nice work. This is how to teach. You are a good teacher. Thank you for the explanation. I'm grateful. I understand now

[@SkillsBuildTraining]

Glad it was helpful!

[@madeleinefarr1487]

Absolute legend, thankyou!

[@SkillsBuildTraining]

You're welcome!

[@StarkidLive]

Thank you very much! My problem is finally fixed!!

[@abasabdimed6200]

Thanks man❤
Really appreciate

[@Ylldrit.Miftari]

I managed to set this up. Thank you for your help.

[@SkillsBuildTraining]

You're welcome!

[@HasinduWijenayaka]

Thank you so much for the guidance sir i guess you have provided us a diamond to start our career as beginners.

[@SkillsBuildTraining]

It's my pleasure!

[@Edit_FFShorts]

Easiest and amazing tutorial ...Thanks for this :)

[@SkillsBuildTraining]

You're welcome!

[@hieulc1704]

Thank for you video! It's very helpful

[@SkillsBuildTraining]

Glad it was helpful!

[@valentinogomes6872]

Exactly to the point easily did everything taught in the video

[@dhanushdhanushraj589]

Great video short and clear explanation..... don't to check the comment.....this is worth video

[@monikajaiswal4495]

Thank you so much...great video recommended👍

[@SkillsBuildTraining]

You're welcome!

[@electronicsprojects-gc8mg]

Perfect. Thank you so much

[@SkillsBuildTraining]

You're welcome!

[@sampreethkannavar7729]

Great found this at perfect time thanks

[@SkillsBuildTraining]

You're welcome!

[@arlesiokakunda]

Very good tutorial. Thanks for brief intro.

[@SkillsBuildTraining]

You are welcome!

[@CPVG-bj1zr]

keep doing videos like this we all give U support

[@SkillsBuildTraining]

Thanks!

[@MichelleCTayo]

Thank you this helps me a lotttt

[@tathineos]

How about those snippets work all together into a single .php file, with html and the inside declarations for css and for javascript. Is there a way to make it work?

[@SkillsBuildTraining]

Good question @tathineos.

[@uday_137]

Thank you so much... ♥️😌

[@mansitiwari758]

Very very very useful. This video solved all my problems. 😊👍

[@SkillsBuildTraining]

Thanks!

[@star_pearl_0383]

Great help.Thank you

[@hannahfionacereno7534]

thank you so much!!

[@SkillsBuildTraining]

You're welcome!

[@DreddLoftDiana]

Thank you so much it helps me so much very thank you

[@SkillsBuildTraining]

You're welcome!

[@jopaz3780]

Thank you it help a lot for me

[@SkillsBuildTraining]

You're welcome!

[@jonathanpankey]

Thank you this video was so helpful

[@SkillsBuildTraining]

Glad it was helpful!

[@mbabi88547]

Thank you very very much❤, i am a beginner and This video helped me so much.
Good luck to you first and me with programming😅.

[@SkillsBuildTraining]

You're welcome!

[@paddy_it_in]

Thank you so much!

[@SkillsBuildTraining]

You're welcome!

[@MRX-nm5dn]

i just confused when the Codepen show the easiest way to design web, but i want design web offline on my VS Code. But, my VS Code didnt work when i calling variable, example
let name = document.getElementById("name")
in the browser console, when i type console.log(name), the browser will grab , but when i do same thing in the VS CODE showing error, and now i just using live view and use browser console to check every console.log i need.
do you have solution? thank you

[@raves3620]

ty very much
this help me so much

[@yashnannaware807]

Thank you sir
very helpful video 🙏🏻👍🏻

[@SkillsBuildTraining]

You're welcome!

[@mksmurff]

Clear and easy to follow. Thank you

[@SkillsBuildTraining]

Glad it was helpful!

[@ravenoushydra7948]

Hello why are you not using the live server extension and instead using run without debug?

[@rpuikey9538]

Sir need advice! I am trying too run by same method but after clicking run without debugger my and even choosing web chrome it is not redirecting me too web chrome instead it is showing p.json error i dont know what should i do.

[@user-gq4jr4qj9q]

Thank you soo so much

[@SDWITHJAMES]

Thank you so mcch from Laos ^^

[@SkillsBuildTraining]

You're welcome 😊

[@user-xj7sk1se8b]

thank you for sharing your knowledge sir.

[@SkillsBuildTraining]

Welcome!

[@nihalwankhede247]

Thank you very much sir for this amazing solution

[@SkillsBuildTraining]

You're welcome!

[@aniketpawar2224]

Wonderful Teaching Sir ❤🎉

[@SkillsBuildTraining]

Thank you!

[@umairliaqat5598]

Really amazing sir u did extrordinary hat's off u sir

[@SkillsBuildTraining]

Thanks!

[@swapnarathod2944]

Thank you so much....

[@SkillsBuildTraining]

You're most welcome!

[@MapsKhutsoMalepe]

Thank you so much.😊

[@SkillsBuildTraining]

You're welcome!

[@Indianshorts0101]

very nice video boss , Your video is very useful to me .
aise hi aur video laye ❤ .
thank you.

[@SkillsBuildTraining]

Many many thanks.

[@sampsonuriel2868]

Thanks a lot sir...

[@SkillsBuildTraining]

Most welcome!

[@nugasmars]

THANK YOUUU

[@SkillsBuildTraining]

You're welcome!

[@CPVG-bj1zr]

Thank for solving my problem

[@SkillsBuildTraining]

You're welcome!

[@parmatmjaiswal7272]

Thankyou so much !!

[@SkillsBuildTraining]

You're welcome!

[@MoboEQ]

Great Tutorial!!

[@SkillsBuildTraining]

Glad it was helpful!

[@avishkar88]

sir thankss a lot.!!

[@kathleenvensdeguzman6861]

if I add a new file for js and hit enter the icon looks like this (); not like JS?

[@sunilsunny4296]

Hello sir,can we share that website link to friends so that our friends can also see??
Website link in the sense the page path opened after clicking on the run with browser-google chrome please clarify?

[@kelp8749]

What exactly is nodejs for? I dont have it installed and everythink else works perfectly fine

[@piconano]

Can one make a stand alone program that runs in browser, offline?
I want to make a database program that runs locally using Sqlite.
All the front end will be in HTML and CSS and JS, but the database will have to be on the device and not served by a server.
Is that possible?

[@SkillsBuildTraining]

Good question @piconano.

[@clementemovon2755]

Thank you so much sir ☺

[@SkillsBuildTraining]

Most welcome!

[@jasonlee2342]

I’m having trouble running my code it shows local host refuse to connect. Does anyone know how to fix this issue?

[@vijaykumarsahu88]

Thank you sir

[@MShahzad-ds3fb]

Thank you so much dear 😊

[@SkillsBuildTraining]

Most welcome 😊

[@tonnysamuel117]

Thanks alot 🤝🏾

[@SkillsBuildTraining]

You're welcome!

[@mohammadraihangazi]

I thought it's very difficult, but thanks to you for prove me a wrong thinker

[@SkillsBuildTraining]

Thanks!

[@pawiwo1229]

thanks brother!

[@SkillsBuildTraining]

Happy to help!

[@RGAL-ld2gm]

thanks a lot sir!

[@SkillsBuildTraining]

Most welcome!

[@soufianetouil311]

is it always we link css file in head and js file in body ?

[@ankitkandwalvlogs]

Can we give a attribute name and value to html code for CSS .
like Web page
so now can we use main-heading as a CSS selector ????. Can we do like that or not?

[@icrryrivers1969]

you call the class in css by putting a dot in front of it. For instance .main-heading ,if this is what you're asking.

[@user-tw8nw5lq7r]

thanks a lot brother,

[@SkillsBuildTraining]

You're welcome!

[@satydiv]

Thank you😃

[@SkillsBuildTraining]

You're welcome 😊

[@gaanagowda7238]

Whenever I create javascript file with .js extension JS icon doesn't appear beside it instead window icon appears. Can someone please help me with this.

[@aymanbataineh6593]

Uncaught Error Error: Cannot find module 'C:\Users\ayman\OneDrive\Desktop\html\app.js'
at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
at Module._load (node:internal/modules/cjs/loader:922:27)
at executeUserEntryPoint (node:internal/modules/run_main:81:12)
at (node:internal/main/run_main_module:23:47)
i face this problem when i debugg help me please

[@asmithat8314]

Very clear

[@SkillsBuildTraining]

Glad you think so!

[@bhargavcherry3840]

Thank you so much

[@SkillsBuildTraining]

You're most welcome!

[@user-wx9ql4uh2t]

While after installation node version and npm is shown as not recognized what to do

[@Y0tam]

Thanks a lot! How can I make a master page in VC code?

[@SkillsBuildTraining]

You're welcome @yotamein-mor1552.

[@Prabhakar_99]

very helpful

[@SkillsBuildTraining]

Glad you think so!

[@pedroribeiro8289]

thank you!

[@SkillsBuildTraining]

You're welcome!

[@DeepeshBudhathoki-km7rh]

Humble greatfull brother

[@SkillsBuildTraining]

You're welcome!

[@naturefyliu8106]

great explanation

[@SkillsBuildTraining]

Glad it was helpful!

[@user-sq3wo5rn8c]

Best tutorial

[@SkillsBuildTraining]

Thanks @user-sq3wo5rn8c.

[@iiannRB]

clear and easy

[@SkillsBuildTraining]

Glad you like it.

[@megabyte6745]

Thanks brooooooo🎉🎉🎉❤❤

[@SkillsBuildTraining]

You're welcome!

[@Coffeecake488]

thank you

[@SkillsBuildTraining]

You're welcome!

[@marcandrolevantino3779]

Thank you

[@SkillsBuildTraining]

You're welcome!

[@Mahmoud-ys1kt]

Great thank you

[@SkillsBuildTraining]

Our pleasure!