diff --git a/README.md b/README.md
deleted file mode 100644
index e359346..0000000
--- a/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# typescript-tutorial
-All the course files for the TypeScript tutorial playlist on The Net Ninja YouTube channel.
-
-## How to use the files
-Each lesson has it's own branch. To see the code for a lesson, select that lesson from the branch drop-down.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cd8e825
--- /dev/null
+++ b/index.html
@@ -0,0 +1,48 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>TypeScript Tutorial</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+  <div class="wrapper">
+    <h1>Finance Logger</h1>
+
+    <!-- output list -->
+    <ul class="item-list">
+      
+    </ul>
+  </div>
+
+  <footer>
+    <form class="new-item-form">
+      <div class="field">
+        <label>Type:</label>
+        <select id="type">
+          <option value="invoice">Invoice</option>
+          <option value="payment">Payment</option>
+        </select>
+      </div>
+      <div class="field">
+        <label>To / From:</label>
+        <input type="text" id="tofrom">
+      </div>   
+      <div class="field">
+        <label>Details:</label>
+        <input type="text" id="details">
+      </div>
+      <div class="field">
+        <label>Amount (£):</label>
+        <input type="number" id="amount">
+      </div>
+      <button>Add</button>
+    </form>
+
+    <a href="https://www.thenetninja.co.uk">The Net Ninja</a>
+  </footer>
+
+  <script src='sandbox.js'></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/sandbox.js b/sandbox.js
new file mode 100644
index 0000000..63b80e7
--- /dev/null
+++ b/sandbox.js
@@ -0,0 +1,6 @@
+var character = 'mario';
+console.log(character);
+var inputs = document.querySelectorAll('input');
+inputs.forEach(function (input) {
+    console.log(input);
+});
diff --git a/sandbox.ts b/sandbox.ts
new file mode 100644
index 0000000..aeff5b5
--- /dev/null
+++ b/sandbox.ts
@@ -0,0 +1,9 @@
+const character = 'mario';
+
+console.log(character);
+
+const inputs = document.querySelectorAll('input');
+
+inputs.forEach(input => {
+  console.log(input);
+});
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..754de5c
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,72 @@
+body{
+  margin: 0;
+  font-family: Roboto; 
+}
+.wrapper{
+  max-width: 960px;
+  margin: 0 auto;
+}
+h1{
+  margin: 40px auto;
+  color: #ff0aa7;
+  text-align: center;
+}
+ul{
+  padding: 0;
+  list-style-type: none;
+}
+li{
+  padding: 6px 10px;
+  border: 1px solid #eee;
+  margin: 10px auto;
+}
+li h4{
+  color: #ff0aa7;
+  margin: 0;
+  text-transform: capitalize;
+}
+li p{
+  color: #333;
+  margin: 8px 0 0;
+}
+footer{
+  background: #eee;
+  padding: 60px;
+  margin-top: 60px;
+}
+form{
+  max-width: 960px;
+  margin: 0 auto;
+  text-align: center;
+}
+label{
+  display: block;
+  font-weight: bold;
+  font-size: 0.8em;
+  color: #333;
+  margin: 16px 0 6px;
+}
+input, select{
+  padding: 6px;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+}
+.field{
+  display: inline-block;
+  margin: 0 10px;
+}
+button{
+  color: white;
+  border: 0;
+  background: #ff0aa7;
+  padding: 6px;
+  min-width: 80px;
+  border-radius: 4px;
+}
+footer a{
+  text-align: center;
+  display: block;
+  color: #999;
+  margin-top: 40px;
+  font-size: 0.7em;
+}
\ No newline at end of file
