HTML, CSS & JavaScript project setup guide

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_project
cd 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-scal=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.

browser window showing text 'I see plum' with plum color

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.

browser console showing the log of 'it works'

Congratulations, you've setup your project. You're now ready to make something wonderful.