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

Published: 23 July 2020
on channel: Dave Gray
41,584
687

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

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!

▶ This video is part of the JavaScript Tutorials for Beginners Playlist found here:    • Javascript Tutorials for Beginners  

✅ 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:
Eloquent JavaScript Chapter 1: https://eloquentjavascript.net/
MDN Web Docs - JavaScript Basics: https://developer.mozilla.org/en-US/d...

📺 More Beginner JS Videos:
freeCodeCamp:    • Learn JavaScript - Full Course for Beginners  
Traversy Media:    • JavaScript Crash Course For Beginners  
The Net Ninja:    • Modern JavaScript Tutorial #1 - Intro & Setup  

✅ Follow Me:
Twitter:   / yesdavidgray  
Medium:   / davegray_86804  

#Javascript #HTML #Tutorial


On this page of the site you can watch the video online Where do I put my JavaScript? How to link Javascript to HTML | Tutorial for Beginners with a duration of hours minute second in good quality, which was uploaded by the user Dave Gray 23 July 2020, share the link with friends and acquaintances, this video has already been watched 41,584 times on youtube and it was liked by 687 viewers. Enjoy your viewing!