HTML, CSS & JavaScript project setup guide

Published on Mar 8, 2022
~2 min read

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.

BASH
mkdir new_project
cd new_project

2. Create starter files

BASH
touch index.html styles.css app.js

3. Open VScode

BASH
my_new_app$ code .

4. HTML starter code

Use emmet ! shortcut or copy and paste below into index.html

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>

In the index.html file add the following line between the <head> tags.

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

Then add the following line between the body tags.

HTML
<h1>I see Plum</h1>

Go to the styles.css file and add the following style rule.

CSS
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

Back in the index.html file add the following line at the bottom of the body tags.

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

Next open the app.js file and add the following.

JS
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.

Picture of author

Peter Lynch

Web Developer & Bootcamp grad who wants to learn as much as he can check me out on twitter.

A Web Development Newsletter That Helps You Create

I'm learning heaps and having a blast doing it. Sign up for my newsletter where I'll share the things I've made and how you can make them too. Only real newsletters are going to last, all that other bullshit is here today & gone tomorrow.