diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html
deleted file mode 100644
index c3217fc003..0000000000
--- a/03 - CSS Variables/index-FINISHED.html
+++ /dev/null
@@ -1,79 +0,0 @@
-
-
-
-
- Scoped CSS Variables and JS
-
-
- Update CSS Variables with JS
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
deleted file mode 100644
index 7171607a8b..0000000000
--- a/03 - CSS Variables/index-START.html
+++ /dev/null
@@ -1,54 +0,0 @@
-
-
-
-
- Scoped CSS Variables and JS
-
-
- Update CSS Variables with JS
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
deleted file mode 100644
index 4162bce339..0000000000
--- a/04 - Array Cardio Day 1/index-START.html
+++ /dev/null
@@ -1,61 +0,0 @@
-
-
-
-
- Array Cardio 💪
-
-
- Psst: have a look at the JavaScript Console 💁
-
-
-
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
deleted file mode 100644
index e1d643ad5c..0000000000
--- a/05 - Flex Panel Gallery/index-START.html
+++ /dev/null
@@ -1,116 +0,0 @@
-
-
-
-
- Flex Panels 💪
-
-
-
-
-
-
-
-
-
-
Give
-
Take
-
Receive
-
-
-
Experience
-
It
-
Today
-
-
-
-
-
-
-
-
-
-
-
diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10HoldShiftandCheckCheckboxes/index-FINISHED.html
similarity index 100%
rename from 10 - Hold Shift and Check Checkboxes/index-FINISHED.html
rename to 10HoldShiftandCheckCheckboxes/index-FINISHED.html
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10HoldShiftandCheckCheckboxes/index-START.html
similarity index 100%
rename from 10 - Hold Shift and Check Checkboxes/index-START.html
rename to 10HoldShiftandCheckCheckboxes/index-START.html
diff --git a/11 - Custom Video Player/index.html b/11CustomVideoPlayer/index.html
similarity index 100%
rename from 11 - Custom Video Player/index.html
rename to 11CustomVideoPlayer/index.html
diff --git a/11 - Custom Video Player/scripts-FINISHED.js b/11CustomVideoPlayer/scripts-FINISHED.js
similarity index 100%
rename from 11 - Custom Video Player/scripts-FINISHED.js
rename to 11CustomVideoPlayer/scripts-FINISHED.js
diff --git a/11 - Custom Video Player/scripts.js b/11CustomVideoPlayer/scripts.js
similarity index 100%
rename from 11 - Custom Video Player/scripts.js
rename to 11CustomVideoPlayer/scripts.js
diff --git a/11 - Custom Video Player/style.css b/11CustomVideoPlayer/style.css
similarity index 100%
rename from 11 - Custom Video Player/style.css
rename to 11CustomVideoPlayer/style.css
diff --git a/12 - Key Sequence Detection/index-FINISHED.html b/12KeySequenceDetection/index-FINISHED.html
similarity index 100%
rename from 12 - Key Sequence Detection/index-FINISHED.html
rename to 12KeySequenceDetection/index-FINISHED.html
diff --git a/12 - Key Sequence Detection/index-START.html b/12KeySequenceDetection/index-START.html
similarity index 100%
rename from 12 - Key Sequence Detection/index-START.html
rename to 12KeySequenceDetection/index-START.html
diff --git a/1MYDrumkit/drums.css b/1MYDrumkit/drums.css
new file mode 100644
index 0000000000..5b08d5ca89
--- /dev/null
+++ b/1MYDrumkit/drums.css
@@ -0,0 +1,28 @@
+body {
+ background-image: url("public/lwcauvj39y-gabriel-barletta.jpg");
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-attachment: fixed;
+ display: flex;
+ justify-content: space-around;
+ padding: 40vh 10vw;
+}
+.keys {
+ color: white;
+ background-color: rgba(0, 0, 0, 0.7);
+ border-radius: 5px;
+ width: 5vw;
+ text-align: center;
+ /*padding: 0px 2.5vw;*/
+ border: 2px solid rgba(255,255,255,.7);
+}
+.desc {
+ margin-top: -15px;
+ margin-bottom: -2px;
+ font-size: 15px;
+}
+.keyshadow {
+ border: 2px solid yellow;
+ box-shadow: 0px 0px 10px yellow;
+}
diff --git a/1MYDrumkit/drums.js b/1MYDrumkit/drums.js
new file mode 100644
index 0000000000..1f501cf5d4
--- /dev/null
+++ b/1MYDrumkit/drums.js
@@ -0,0 +1,133 @@
+function playSound(e) {
+ const key = e.keyCode
+ , audio = document.querySelector(`audio[id="${key}"]`)
+ , keyDiv = document.getElementById(key)
+ if (!audio) {
+ return;
+ }
+ audio.currentTime = 0;
+ audio.play();
+ keyDiv.classList.add("keyshadow")
+ setTimeout(()=>{keyDiv.classList.remove("keyshadow")},100)
+}
+
+const div65 = document.getElementById(65)
+const div83 = document.getElementById(83)
+const div68 = document.getElementById(68)
+const div70 = document.getElementById(70)
+const div71 = document.getElementById(71)
+const div72 = document.getElementById(72)
+const div74 = document.getElementById(74)
+const div75 = document.getElementById(75)
+const div76 = document.getElementById(76)
+
+div65.addEventListener("click", function(e) {
+ const key = this.id
+ , audio = document.querySelector(`audio[id="${key}"]`)
+ , keyDiv = document.getElementById(key)
+ if (!audio) {
+ return;
+ }
+ audio.currentTime = 0;
+ audio.play();
+ keyDiv.classList.add("keyshadow")
+ setTimeout(()=>{keyDiv.classList.remove("keyshadow")},100)
+});
+div83.addEventListener("click", function() {
+ const key = this.id
+ , audio = document.querySelector(`audio[id="${key}"]`)
+ , keyDiv = document.getElementById(key)
+ if (!audio) {
+ return;
+ }
+ audio.currentTime = 0;
+ audio.play();
+ keyDiv.classList.add("keyshadow")
+ setTimeout(()=>{keyDiv.classList.remove("keyshadow")},100)
+});
+div68.addEventListener("click", function() {
+ const key = this.id
+ , audio = document.querySelector(`audio[id="${key}"]`)
+ , keyDiv = document.getElementById(key)
+ if (!audio) {
+ return;
+ }
+ audio.currentTime = 0;
+ audio.play();
+ keyDiv.classList.add("keyshadow")
+ setTimeout(()=>{keyDiv.classList.remove("keyshadow")},100)
+});
+div70.addEventListener("click", function() {
+ const key = this.id
+ , audio = document.querySelector(`audio[id="${key}"]`)
+ , keyDiv = document.getElementById(key)
+ if (!audio) {
+ return;
+ }
+ audio.currentTime = 0;
+ audio.play();
+ keyDiv.classList.add("keyshadow")
+ setTimeout(()=>{keyDiv.classList.remove("keyshadow")},100)
+});
+div71.addEventListener("click", function() {
+ const key = this.id
+ , audio = document.querySelector(`audio[id="${key}"]`)
+ , keyDiv = document.getElementById(key)
+ if (!audio) {
+ return;
+ }
+ audio.currentTime = 0;
+ audio.play();
+ keyDiv.classList.add("keyshadow")
+ setTimeout(()=>{keyDiv.classList.remove("keyshadow")},100)
+});
+div72.addEventListener("click", function() {
+ const key = this.id
+ , audio = document.querySelector(`audio[id="${key}"]`)
+ , keyDiv = document.getElementById(key)
+ if (!audio) {
+ return;
+ }
+ audio.currentTime = 0;
+ audio.play();
+ keyDiv.classList.add("keyshadow")
+ setTimeout(()=>{keyDiv.classList.remove("keyshadow")},100)
+});
+div74.addEventListener("click", function() {
+ const key = this.id
+ , audio = document.querySelector(`audio[id="${key}"]`)
+ , keyDiv = document.getElementById(key)
+ if (!audio) {
+ return;
+ }
+ audio.currentTime = 0;
+ audio.play();
+ keyDiv.classList.add("keyshadow")
+ setTimeout(()=>{keyDiv.classList.remove("keyshadow")},100)
+});
+div75.addEventListener("click", function() {
+ const key = this.id
+ , audio = document.querySelector(`audio[id="${key}"]`)
+ , keyDiv = document.getElementById(key)
+ if (!audio) {
+ return;
+ }
+ audio.currentTime = 0;
+ audio.play();
+ keyDiv.classList.add("keyshadow")
+ setTimeout(()=>{keyDiv.classList.remove("keyshadow")},100)
+});
+div76.addEventListener("click", function() {
+ const key = this.id
+ , audio = document.querySelector(`audio[id="${key}"]`)
+ , keyDiv = document.getElementById(key)
+ if (!audio) {
+ return;
+ }
+ audio.currentTime = 0;
+ audio.play();
+ keyDiv.classList.add("keyshadow")
+ setTimeout(()=>{keyDiv.classList.remove("keyshadow")},100)
+});
+
+window.addEventListener("keydown", playSound)
diff --git a/1MYDrumkit/index.html b/1MYDrumkit/index.html
new file mode 100644
index 0000000000..75983b3bed
--- /dev/null
+++ b/1MYDrumkit/index.html
@@ -0,0 +1,58 @@
+
+
+
+
+ My Drum Machine
+
+
+
+
+
A
+ boom
+
+
+
S
+ clap
+
+
+
D
+ hi-hat
+
+
+
F
+ kick
+
+
+
G
+ open-hat
+
+
+
H
+ ride
+
+
+
J
+ snare
+
+
+
K
+ tink
+
+
+
L
+ tom
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/01 - JavaScript Drum Kit/sounds/boom.wav b/1MYDrumkit/public/boom.wav
similarity index 100%
rename from 01 - JavaScript Drum Kit/sounds/boom.wav
rename to 1MYDrumkit/public/boom.wav
diff --git a/01 - JavaScript Drum Kit/sounds/clap.wav b/1MYDrumkit/public/clap.wav
similarity index 100%
rename from 01 - JavaScript Drum Kit/sounds/clap.wav
rename to 1MYDrumkit/public/clap.wav
diff --git a/01 - JavaScript Drum Kit/sounds/hihat.wav b/1MYDrumkit/public/hihat.wav
similarity index 100%
rename from 01 - JavaScript Drum Kit/sounds/hihat.wav
rename to 1MYDrumkit/public/hihat.wav
diff --git a/01 - JavaScript Drum Kit/sounds/kick.wav b/1MYDrumkit/public/kick.wav
similarity index 100%
rename from 01 - JavaScript Drum Kit/sounds/kick.wav
rename to 1MYDrumkit/public/kick.wav
diff --git a/1MYDrumkit/public/lwcauvj39y-gabriel-barletta.jpg b/1MYDrumkit/public/lwcauvj39y-gabriel-barletta.jpg
new file mode 100644
index 0000000000..eaf367e2a8
Binary files /dev/null and b/1MYDrumkit/public/lwcauvj39y-gabriel-barletta.jpg differ
diff --git a/01 - JavaScript Drum Kit/sounds/openhat.wav b/1MYDrumkit/public/openhat.wav
similarity index 100%
rename from 01 - JavaScript Drum Kit/sounds/openhat.wav
rename to 1MYDrumkit/public/openhat.wav
diff --git a/01 - JavaScript Drum Kit/sounds/ride.wav b/1MYDrumkit/public/ride.wav
similarity index 100%
rename from 01 - JavaScript Drum Kit/sounds/ride.wav
rename to 1MYDrumkit/public/ride.wav
diff --git a/01 - JavaScript Drum Kit/sounds/snare.wav b/1MYDrumkit/public/snare.wav
similarity index 100%
rename from 01 - JavaScript Drum Kit/sounds/snare.wav
rename to 1MYDrumkit/public/snare.wav
diff --git a/01 - JavaScript Drum Kit/sounds/tink.wav b/1MYDrumkit/public/tink.wav
similarity index 100%
rename from 01 - JavaScript Drum Kit/sounds/tink.wav
rename to 1MYDrumkit/public/tink.wav
diff --git a/01 - JavaScript Drum Kit/sounds/tom.wav b/1MYDrumkit/public/tom.wav
similarity index 100%
rename from 01 - JavaScript Drum Kit/sounds/tom.wav
rename to 1MYDrumkit/public/tom.wav
diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/1jsDrumkit/index-FINISHED.html
similarity index 99%
rename from 01 - JavaScript Drum Kit/index-FINISHED.html
rename to 1jsDrumkit/index-FINISHED.html
index 1a16d0997c..dcb9ff045b 100644
--- a/01 - JavaScript Drum Kit/index-FINISHED.html
+++ b/1jsDrumkit/index-FINISHED.html
@@ -58,6 +58,7 @@
-
+