I've had to Google this soooo many times, that I decided it was worth creating a snippet that I could to refer to whenever I needed to. The next step will be making an NPM package or VScode extension to do this for me.
1. Make a new folder
Open up terminal and navigate to projects directory.
mkdir new_projectcd new_project
2. Create starter files
touch index.html styles.css app.js
3. Open VScode
my_new_app$ code .
4. HTML starter code
Use emmet ! shortcut or copy and paste below into index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body></html>
5. Link CSS & test CSS
In the index.html file add the following line between the <head> tags.
<link rel="stylesheet" href="styles.css" />
Then add the following line between the body tags.
<h1>I see Plum</h1>
Go to the styles.css file and add the following style rule.
h1 {color: plum;}
Open the index.html file in your browser, I use the "open in browser" extension.
You should see the below.
6. Link the JavaScript & HTML files
Back in the index.html file add the following line at the bottom of the body tags.
<script src="app.js"></script>
Next open the app.js file and add the following.
console.log("it works");
Back in the browser refresh the page and open the console in the dev tools with ⌥ Option + ⌘ Cmd + J.
You should see the below.
Congratulations, you've setup your project. You're now ready to make something wonderful.
