HTML, CSS & JavaScript project setup guide

March 8, 2022 (2y ago)

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">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scal=1.0" />

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

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.