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: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Oi6xNtL_fwCrwpuqylMsgT
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/docs/Learn/Getting_started_with_the_web/JavaScript_basics
More Beginner JS Videos:
freeCodeCamp: https://youtu.be/PkZNo7MFNFg
Traversy Media: https://youtu.be/hdI2bqOjy3c
The Net Ninja: https://youtu.be/iWOYAxlnaww
Follow Me:
Twitter: https://twitter.com/yesdavidgray
Medium: https://medium.com/@davegray_86804
#Javascript #HTML #Tutorial