Create a folder at the root of your machine, called Developer. Create another folder inside Developer called
Back in VS Code, go to File > Open. Navigate to the
scratch folder you just created, highlight it by clicking it once, and click ‘open’.
Click the icon in the project tree to create a new file. Name the file
Whoa man, I thought we were learning to program, not make a website!
Relax. I’ll have you writing desktop and mobile apps with js in no time, but for now we just need a canvas to start sketching on. Add the following code to
1 2 3 4 5 6 7 8 9 10 <!-- index.html --> <!DOCTYPE html> <html> <head> <title>My site</title> <script src="main.js"></script> </head> <body> </body> </html>
Cool. Nice blank website. Very modern-minimalist.
We can access the html page (which includes our js file) by navigating to the index.html file in Chrome’s address bar, for example:
First, lets disable the cache in Chrome. Right click anywhere on your blank page and click ‘inspect’. This opens the developer tools. Click the ‘Network’ tab in the developer tools and check the box ‘Disable Cache’. This is really important, if you don’t do this then you may not see your code working. Keep developer tools open while working in Chrome.
Let’s make sure everything is hooked up properly. Back in VS Code, go to
main.js, write and save this code:
1 2 // main.js document.write("Hello World!");
Refresh the page in chrome, you should now see
- Download Google Chrome and VS Code.
- Create a directory,
Developer/scratchto work in.
- Add two blank files to
/scratch: main.js & index.html
- Add some html boilerplate to index.html and include main.js.
- Disable the cache in Chrome, otherwise you won't see code changes.
If you have any questions or comments, click the "Go To Discussion" button below!