Summary
Keywords
Full Transcript
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
