diff --git a/README.md b/README.md
index 9903be3..2393640 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,6 @@
+<link rel="stylesheet" href="style.css">
+
+
 # 🐍 Python cheatsheet
 
 Just the basics to get coding using MicroPython on the BBC microbit [python.microbit.org](https://python.microbit.org)
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3b965df
--- /dev/null
+++ b/index.html
@@ -0,0 +1,36 @@
+<html lang=en>
+<head>
+  <link rel="stylesheet" href="style.css">
+  <script type = "text/javascript" src = "strings.js" ></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.17.1/build/styles/atom-one-light.min.css">
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.17.1/build/highlight.min.js"></script>
+  <script>hljs.initHighlightingOnLoad();</script>
+</head>
+<body>
+<div class="flex-grid-thirds">
+    <div class="col import">
+      <h2>Imports</h2>
+      <pre class="description">Import every class, function and variable<code>from microbit import *</code></pre>
+      <pre class="description">Import only the display class<code>from microbit import display</code></pre>
+      <pre class="description">Import the microbit library<code>import microbit</code></pre>
+    </div>
+    <div class="col buttons">
+      <h2>Buttons</h2>
+    </div>
+    <div class="col pins">
+      <h2>Pins</h2>
+    </div>
+</div>
+<div class="flex-grid-thirds">
+  <div class="col temperature">
+    <h2>Temperature</h2>
+  </div>
+  <div class="col motion">
+    <h2>Motion</h2>
+  </div>
+  <div class="col display">
+    <h2>Display</h2>
+  </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/strings.js b/strings.js
new file mode 100644
index 0000000..26b51bc
--- /dev/null
+++ b/strings.js
@@ -0,0 +1,5 @@
+var strings = {
+"Import every class, function and variable" : "from microbit import *",
+"Import only the display class" : "from microbit import display",
+"Import the microbit library" : "import microbit"
+};
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4b01d3e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,75 @@
+
+
+.flex-grid {
+    display: flex;
+  }
+  .flex-grid .col {
+    flex: 1;
+  }
+  .flex-grid-thirds {
+    display: flex;
+    justify-content: space-between;
+  }
+  .flex-grid-thirds .col {
+    width: 32%;
+  }
+  
+  @media (max-width: 400px) {
+    .flex-grid,
+    .flex-grid-thirds {
+      display: block;
+      .col {
+        width: 100%;
+        margin: 0 0 20px 0;
+      }
+    }
+  }
+  
+  * {
+    box-sizing: border-box;
+  }
+  body {
+    background: white;
+    padding: 20px;
+    font-family: 'Helvetica', 'Arial', sans-serif;
+  }
+  .flex-grid { 
+    margin: 0 0 20px 0;
+  }
+  .col {
+    background: grey;
+    padding: 20px;
+    border-radius: 5px;
+    border: solid 3px;
+  }
+  .hljs {
+    border: solid 3px;
+    border-radius: 5px;
+  } 
+  .description {
+    font-family: 'Helvetica', 'Arial', sans-serif;
+  }
+  .import {
+    background: #f5f5f5;
+    border-color: #9e9e9e;
+  }
+  .buttons {
+    background: #ffcdd2;
+    border-color: #f44336;
+  }
+  .pins {
+    background: #bbdefb;
+    border-color: #2196f3; 
+  }
+  .motion {
+    background: #b2dfdb;
+    border-color: #009688; 
+  }
+  .display {
+    background: #ffecb3;
+    border-color: #ffc107; 
+  }
+  .temperature {
+    background: #d7ccc8;
+    border-color: #795548; 
+  }
\ No newline at end of file
