Where do I put my JavaScript? How to link Javascript to HTML | Tutorial for Beginners

In this video I answer the questions: "Where do I put my JavaScript?" and "How do I link my JavaScript files to my HTML files?" You will also learn how to create JavaScript files in Visual Studio Code. All in less than 8 minutes!

✅ Quick Concepts outline:
(00:00) Intro
(0:15) Setting up your DEV environment
(0:20) Where to find and install Visual Studio Code
(0:50) Create a directory (aka folder) for your files
(1:28) Opening a folder in VS Code
(1:45) Create an HTML document in VS Code
(1:55) Emmett abbreviation to quickly code basic HTML
(2:07) Add semantic elements to your HTML code
(2:23) Save your HTML document in VS Code (Ctrl+S)
(2:38) The style element for adding CSS to your HTML
(3:00) Creating a new folder from within VS Code
(3:05) Creating a CSS file
(3:15) Adding styles to your CSS file
(3:38) Linking to a CSS file from your HTML document
(4:00) Where to put your JavaScript: script tags
(4:05) How to link your JavaScript file to your HTML file: src attribute
(4:20) Or put your JavaScript inside of the script element
(4:30) How to print to the Chrome Dev Tools console window from your JS file
(4:50) How to open up Chrome Dev Tools to see the console window
(5:25) How to open your HTML file in Chrome
(5:40) Creating a folder for your JavaScript file
(5:50) Creating a Javascript file
(6:20) Linking to your JavaScript file
(7:00) Adding more JavaScript code to your file

📚 Further Reading:

📺 More Beginner JS Videos:

✅ Follow Me:

#Javascript #HTML #Tutorial

[Vikram]

"Keep striving for daily progress instead of perfection" so true for professional as well personal life. Thanks for your efforts, god bless you.

[Grihlo]

Lesson 2 is done - so far everything is clear! I hope to be able to understand all the information in this tutorial. Thank you!

[ma-ezzh]

Great video! If you are using a Mac like me, opening dev tools is command + option + i. To go straight to the Console, use command + option + j. To open the file in Chrome, use command + o. Thanks!

[luimagno]

Hey man, thanks for the fast and succinct video, this type of content is awesome! Best regards!

[nsoimaru]

If you link js in header you must use "defer" and also explain a little bit more about emmet. Great tutorial by the way.

[mikeignatoski]

Your videos are excellent and much appreciated. Your prompt responses are also very helpful. Keep up the great work!

[adityap]

Great video, helped me make my JS file instantly. Thanks!

[opeyemidanielayodele]

I didn't really understand, but thanks for video

[robloxian.O]

Thank u so much. You have the best tutorial.😁

[alan-overthenet]

Thanks for your wonderful content, Dave.
Dave/All I want to make a modest side income freelancing. I am good with HTML and CSS. Do I go with JS, Node, React etc. Or Python, Django, Flask? It's busting my head 🤯

[anandprakash]

Hello Dave, where can I find CSS codes/file for this tutorial.Thanks