diff --git a/markdown/index.md b/markdown/index.md
index 4b4dca9..704a133 100644
--- a/markdown/index.md
+++ b/markdown/index.md
@@ -35,7 +35,7 @@ There are so many amazing courses that teach you how to **create** web applicati
 
 ## Who am I?
 
-![Jon Kuperman](jon.jpeg)
+![Jon Kuperman](../public/jon.jpeg)
 
 My name is Jon Kuperman. I'm an engineer at Adobe working on their Creative Cloud. Before that I worked on the Brave Browser and Twitter.com.
 
diff --git a/markdown/lessons/CPU.md b/markdown/lessons/CPU.md
index 1d1370c..5b05b4d 100644
--- a/markdown/lessons/CPU.md
+++ b/markdown/lessons/CPU.md
@@ -12,7 +12,7 @@ In this lesson we'll learn:
 
 ## Rail
 
-![Chrome's RAIL model](/rail.png)
+![Chrome's RAIL model](../../public/rail.png)
 
 **0 to 16 ms** Users are exceptionally good at tracking motion, and they dislike it when animations aren't smooth. They perceive animations as smooth so long as 60 new frames are rendered every second. That's 16 ms per frame, including the time it takes for the browser to paint the new frame to the screen, leaving an app about 10 ms to produce a frame.
 
@@ -48,19 +48,19 @@ Each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms). I
 var h1 = element1.clientHeight;
 
 // Write (invalidates layout)
-element1.style.height = (h1 * 2) + 'px'
+element1.style.height = h1 * 2 + "px";
 
 // Read (triggers layout)
 var h2 = element2.clientHeight;
 
 // Write (invalidates layout)
-element2.style.height = (h2 * 2) + 'px'
+element2.style.height = h2 * 2 + "px";
 
 // Read (triggers layout)
 var h3 = element3.clientHeight;
 
 // Write (invalidates layout)
-element3.style.height = (h3 * 2) + 'px'
+element3.style.height = h3 * 2 + "px";
 ```
 
 Enter `requestAnimationFrame()`
diff --git a/markdown/lessons/Editing.md b/markdown/lessons/Editing.md
index 07afb73..7adbae8 100644
--- a/markdown/lessons/Editing.md
+++ b/markdown/lessons/Editing.md
@@ -26,7 +26,7 @@
 - Accessible color picker
 - Accessibility panel
 
-![CSS Specifishity](/specifishity.png)
+![CSS Specifishity](../../public/specifishity.png)
 
 After watching the quick edits video, please move on to the [Exercise](/exercise/Editing)
 
@@ -36,9 +36,9 @@ It helps me to think about the Sources tab as an IDE. Pretend it's VSCode or Sub
 
 Compare:
 
-![Sources](/sources.png)
+![Sources](../../public/sources.png)
 
-![VSCode](/vscode.png)
+![VSCode](../../public/vscode.png)
 
 The sources tab is best for debugging more complex problems. It's much easier to edit large amounts of JavaScript, set breakpoints or view an Error stack with this panel.
 
diff --git a/markdown/lessons/Introduction.md b/markdown/lessons/Introduction.md
index 7cc9ceb..241a054 100644
--- a/markdown/lessons/Introduction.md
+++ b/markdown/lessons/Introduction.md
@@ -12,7 +12,7 @@ Right click on a website and click **Inspect** or use the keyboard shortcut Comm
 
 You should get something like this!
 
-![Chrome DevTools](/chrome-devtools.png)
+![Chrome DevTools](../../public/chrome-devtools.png)
 
 But... what are we looking at?
 
@@ -20,15 +20,15 @@ But... what are we looking at?
 
 Before we had DevTools, we had source code.
 
-![View Source](/view-source.png)
+![View Source](../../public/view-source.png)
 
 And if you wanted to check the value of something, we had `alert`
 
-![Alert example](/alert.png)
+![Alert example](../../public/alert.png)
 
 But if you needed to check the value of anything that wasn't primitive you would get
 
-![Alert example with an object](/alert-object.png)
+![Alert example with an object](../../public/alert-object.png)
 
 ## Let there be DOM
 
@@ -36,9 +36,9 @@ But if you needed to check the value of anything that wasn't primitive you would
 
 ## Our first DevTool 🐞
 
-![Firebug](/firebug.png)
+![Firebug](../../public/firebug.png)
 
-![Firebug Discontinued](/firebug-discontinued.png)
+![Firebug Discontinued](../../public/firebug-discontinued.png)
 
 ## Who this course is made for
 
diff --git a/markdown/lessons/Network.md b/markdown/lessons/Network.md
index c2e4030..76769ba 100644
--- a/markdown/lessons/Network.md
+++ b/markdown/lessons/Network.md
@@ -14,7 +14,7 @@
 
 > Google loses 20% of their traffic for every additional 100 milliseconds it takes for a page to load.
 
-![Google Marketing](/google-marketing.png)
+![Google Marketing](../../public/google-marketing.png)
 
 In this lesson, we'll learn about
 
@@ -55,9 +55,9 @@ We spend so much energy compressing and combining JavaScript into dense bundles
 
 This entire [article](https://medium.com/reloading/javascript-start-up-performance-69200f43b201) is worth a read but the TL;DR is that parse time is a huge performance problem, especially for mobile devices.
 
-![JS parse cost](/js-parse.png)
+![JS parse cost](../../public/js-parse.png)
 
-![JS parse cost](/parse-time.png)
+![JS parse cost](../../public/parse-time.png)
 
 ## Measuring real user performance