10 Steps to Setup HTML, CSS, & JS in VSCode

This is what we’re building. (screenshot with browser on left and vscode on the right)

The amount of times I’ve had to google this when I just want it all in one place!

1. Make a folder

mkdir my_new_app
cd my_new_app

2. Create 3 files

my_new_app$ touch index.html styles.css app.js

3. Open VSCode

my_new_app$ code .

4. In your index.htmlfile type “!” + tab which should bring up this handy html template:

screenshot of index.html template

5. Open your app.js file and write any console.log message you would like:

screenshot of app.js with a console.log statement

6. Now we need to reference this file in our app:

<script src="app.js" async></script>

Your index.html should look like this:

screenshot of index.html with a script tag

7. Head to the terminal, making sure you’re in the my_new_app folder. In the terminal open a browser with

my_new_app$ open index.html

You will see a blank page but if you open the browser console with fn + f12 you should see the following:

screenshot of the browser console with “heya” logged

8. Yay! You’ve got some JavaScript going. Now let’s get the styling set up. Head to the index.html file and add this link to the head section:

<link rel="stylesheet" href="styles.css">

And some copy to the body:

<h1>Gotta love powder-blue</h1>

Your index.html file should look like this now:

screenshot of the index.html showing adding the css link

9. Let’s make that text powder-blue. Open styles.css and in the file write:

h1 {
  color: powderblue;
}

This is going to make the h1 text be what color? You guessed it, powderblue :)

10. Let’s head back to the browser and refresh:

screenshot of browser showing h1text in powder blue

There you have it! You’re now set up to write html, css and javascript! I’ve probably done this 100 times and my brain refuses to remember so I’ve posted here for future reference! The bits I forget is the HTML template “!” shortcut, where to put the script, and what the code is for connecting the css file. Hope this helps you too. 🎉