diff --git a/01 - JavaScript Drum Kit/Piano/0.mp3 b/01 - JavaScript Drum Kit/Piano/0.mp3
new file mode 100644
index 0000000000..f402847ee3
Binary files /dev/null and b/01 - JavaScript Drum Kit/Piano/0.mp3 differ
diff --git a/01 - JavaScript Drum Kit/Piano/1.mp3 b/01 - JavaScript Drum Kit/Piano/1.mp3
new file mode 100644
index 0000000000..b656f9e884
Binary files /dev/null and b/01 - JavaScript Drum Kit/Piano/1.mp3 differ
diff --git a/01 - JavaScript Drum Kit/Piano/2.mp3 b/01 - JavaScript Drum Kit/Piano/2.mp3
new file mode 100644
index 0000000000..2e11d971c3
Binary files /dev/null and b/01 - JavaScript Drum Kit/Piano/2.mp3 differ
diff --git a/01 - JavaScript Drum Kit/Piano/3.mp3 b/01 - JavaScript Drum Kit/Piano/3.mp3
new file mode 100644
index 0000000000..ea61bb1097
Binary files /dev/null and b/01 - JavaScript Drum Kit/Piano/3.mp3 differ
diff --git a/01 - JavaScript Drum Kit/Piano/4.mp3 b/01 - JavaScript Drum Kit/Piano/4.mp3
new file mode 100644
index 0000000000..c1ee33cf68
Binary files /dev/null and b/01 - JavaScript Drum Kit/Piano/4.mp3 differ
diff --git a/01 - JavaScript Drum Kit/Piano/5.mp3 b/01 - JavaScript Drum Kit/Piano/5.mp3
new file mode 100644
index 0000000000..22495c3b90
Binary files /dev/null and b/01 - JavaScript Drum Kit/Piano/5.mp3 differ
diff --git a/01 - JavaScript Drum Kit/Piano/6.mp3 b/01 - JavaScript Drum Kit/Piano/6.mp3
new file mode 100644
index 0000000000..f67eab24e1
Binary files /dev/null and b/01 - JavaScript Drum Kit/Piano/6.mp3 differ
diff --git a/01 - JavaScript Drum Kit/Piano/7.mp3 b/01 - JavaScript Drum Kit/Piano/7.mp3
new file mode 100644
index 0000000000..359568fccd
Binary files /dev/null and b/01 - JavaScript Drum Kit/Piano/7.mp3 differ
diff --git a/01 - JavaScript Drum Kit/Piano/8.mp3 b/01 - JavaScript Drum Kit/Piano/8.mp3
new file mode 100644
index 0000000000..a10a001f5f
Binary files /dev/null and b/01 - JavaScript Drum Kit/Piano/8.mp3 differ
diff --git a/01 - JavaScript Drum Kit/Piano/9.mp3 b/01 - JavaScript Drum Kit/Piano/9.mp3
new file mode 100644
index 0000000000..92ef8d8ca7
Binary files /dev/null and b/01 - JavaScript Drum Kit/Piano/9.mp3 differ
diff --git a/01 - JavaScript Drum Kit/Piano/autoplay.html b/01 - JavaScript Drum Kit/Piano/autoplay.html
new file mode 100644
index 0000000000..1c661491b2
--- /dev/null
+++ b/01 - JavaScript Drum Kit/Piano/autoplay.html
@@ -0,0 +1,81 @@
+
+
+
+
+
+ JS Drum Kit
+
+
+
+
+
+ Number:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/01 - JavaScript Drum Kit/Piano/css/style.css b/01 - JavaScript Drum Kit/Piano/css/style.css
new file mode 100644
index 0000000000..13471229fe
--- /dev/null
+++ b/01 - JavaScript Drum Kit/Piano/css/style.css
@@ -0,0 +1,99 @@
+*, *:before, *:after {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box; }
+
+body {
+ margin: 0;
+ font-family: Arial, Helvetica, sans-serif; }
+
+.container {
+ width: 1300px;
+ margin: 50px auto 0; }
+
+.piano-board {
+ display: block;
+ padding: 20px;
+ background-color: black; }
+
+.piano {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ color: black; }
+ .piano.hide-text {
+ color: white; }
+ .piano .piano-key {
+ background-color: white;
+ width: 30px;
+ margin-right: 2px;
+ padding: 200px 10px 30px;
+ border-radius: 0 0px 7px 7px; }
+ .piano .piano-key.pressed {
+ background-color: #ffdfa9; }
+
+.help {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: 140px;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ margin-bottom: 10px; }
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px; }
+
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0; }
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ -o-transition: .4s;
+ transition: .4s; }
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ -o-transition: .4s;
+ transition: .4s; }
+
+input:checked + .slider {
+ background-color: #2196F3; }
+
+input:focus + .slider {
+ -webkit-box-shadow: 0 0 1px #2196F3;
+ box-shadow: 0 0 1px #2196F3; }
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px); }
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: 34px; }
+
+.slider.round:before {
+ border-radius: 50%; }
diff --git a/01 - JavaScript Drum Kit/Piano/css/style.scss b/01 - JavaScript Drum Kit/Piano/css/style.scss
new file mode 100644
index 0000000000..ae176ffca4
--- /dev/null
+++ b/01 - JavaScript Drum Kit/Piano/css/style.scss
@@ -0,0 +1,117 @@
+*, *:before, *:after {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+ width: 1300px;
+ margin: 50px auto 0;
+}
+
+.piano-board {
+ display: block;
+ padding: 20px;
+ background-color: black;
+}
+
+.piano {
+ display: flex;
+ color: black;
+ // justify-content: space-between;
+
+ &.hide-text {
+ color: white;
+ }
+
+ .piano-key {
+ background-color: white;
+ width: 30px;
+ margin-right: 2px;
+ padding: 200px 10px 30px;
+ border-radius: 0 0px 7px 7px;
+
+ &.pressed {
+ background-color: #ffdfa9;
+ }
+ }
+}
+
+
+
+.help {
+ display: flex;
+ width: 140px;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 10px;
+}
+
+
+//
+// Toggle Switch HTML5
+// https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch
+//
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
+}
+
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+input:checked + .slider {
+ background-color: #2196F3;
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: 34px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
diff --git a/01 - JavaScript Drum Kit/Piano/index.html b/01 - JavaScript Drum Kit/Piano/index.html
new file mode 100644
index 0000000000..5a7acf8e66
--- /dev/null
+++ b/01 - JavaScript Drum Kit/Piano/index.html
@@ -0,0 +1,165 @@
+
+
+
+
+
+ JS Drum Kit
+
+
+
+
+
+
+
+
+
+
+ Hide Text
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
0
+
q
+
w
+
e
+
r
+
t
+
y
+
u
+
i
+
o
+
p
+
a
+
s
+
d
+
f
+
g
+
h
+
j
+
k
+
l
+
z
+
x
+
c
+
v
+
b
+
n
+
m
+
+
+
+
+
+ A
+ clap
+
+
+ S
+ hihat
+
+
+ D
+ kick
+
+
+ F
+ openhat
+
+
+ G
+ boom
+
+
+ H
+ ride
+
+
+ J
+ snare
+
+
+ K
+ tom
+
+
+ L
+ tink
+
+
+
+ A
+ clap
+
+
+
+ S
+ hihat
+
+
+
+ D
+ kick
+
+
+ F
+ openhat
+
+
+
+ G
+
+ boom
+
+
+
+ H
+ ride
+
+
+ J
+ snare
+
+
+ K
+ tom
+
+
+ L
+ tink
+
+
+
+ A
+ clap
+
+
+ S
+ hihat
+
+
+ D
+ kick
+
+
+ F
+ openhat
+
+
+ G
+ boom
+
+
+ H
+ ride
+
+
+ J
+ snare
+
+
+ K
+ tom
+
+
+ L
+ tink
+
+
+
+ A
+ clap
+
+
+ S
+ hihat
+
+
+ D
+ kick
+
+
+ F
+ openhat
+
+
+ G
+ boom
+
+
+ H
+ ride
+
+
+ J
+ snare
+
+
+ K
+ tom
+
+
+ L
+ tink
+
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
Update CSS Variables with JS
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
diff --git a/03 - CSS Variables/work1/prepros-6.config b/03 - CSS Variables/work1/prepros-6.config
new file mode 100644
index 0000000000..8017f50e31
--- /dev/null
+++ b/03 - CSS Variables/work1/prepros-6.config
@@ -0,0 +1,245 @@
+{
+ "name": "work1",
+ "firstRun": false,
+ "exportConfig": true,
+ "fileConfigs": [],
+ "fileTree": {
+ "expandedDirs": [],
+ "hideSystemFiles": true,
+ "systemFiles": [
+ ".*",
+ "desktop.ini",
+ "prepros.config",
+ "$RECYCLE.BIN",
+ "prepros.cfg",
+ "prepros-6.config",
+ "Prepros Export"
+ ],
+ "hideUnwatchedFiles": false
+ },
+ "imports": [],
+ "projectView": {
+ "selectedView": "settings"
+ },
+ "fileWatcher": {
+ "enabled": true,
+ "watchedExtensions": [
+ "less",
+ "sass",
+ "scss",
+ "styl",
+ "md",
+ "markdown",
+ "coffee",
+ "js",
+ "jade",
+ "haml",
+ "slim",
+ "ls",
+ "kit",
+ "png",
+ "jpg",
+ "jpeg",
+ "ts",
+ "pug",
+ "css",
+ "html",
+ "htm",
+ "php"
+ ]
+ },
+ "pathFilters": [
+ "node_modules",
+ ".*",
+ "bower_components",
+ "prepros.config",
+ "Prepros Export",
+ "prepros-6.config",
+ "prepros.cfg",
+ "wp-admin",
+ "wp-includes"
+ ],
+ "server": {
+ "port": 7879,
+ "assignNewPortAutomatically": true,
+ "enable": true,
+ "proxy": {
+ "enable": false,
+ "url": "http://localhost:7880/"
+ }
+ },
+ "browser-sync": {
+ "enable": false,
+ "clicks": true,
+ "forms": true,
+ "scroll": true
+ },
+ "live-reload": {
+ "enable": true,
+ "animate": true,
+ "delay": 0
+ },
+ "ftp-deploy": {
+ "connectionType": "ftp",
+ "remotePath": "",
+ "uploadTimeout": 20000,
+ "uploadOnChange": false,
+ "ftp": {
+ "secure": false,
+ "keepAlive": true,
+ "host": "",
+ "port": 21,
+ "user": "",
+ "password": ""
+ },
+ "sftp": {
+ "host": "",
+ "port": 22,
+ "usePrivateKey": false,
+ "username": "",
+ "password": "",
+ "privateKey": "",
+ "passphrase": ""
+ },
+ "pathFilters": [
+ "config.rb",
+ "prepros.config",
+ "prepros-6.config",
+ "node_modules",
+ "Prepros Export",
+ ".git",
+ ".idea",
+ ".sass-cache",
+ ".hg",
+ ".svn",
+ ".cache",
+ ".DS_Store",
+ "*.sass",
+ "*.scss",
+ "*.less",
+ "*.pug",
+ "*.jade",
+ "*.styl",
+ "*.haml",
+ "*.slim",
+ "*.coffee",
+ "*.ls",
+ "*.kit",
+ "*.ts"
+ ],
+ "history": []
+ },
+ "file-type-sass": "{\"compilers\":[\"node-sass\",\"autoprefixer\",\"minify-css\"]}",
+ "file-type-less": "{\"compilers\":[\"less\",\"autoprefixer\",\"minify-css\"]}",
+ "autoprefixer": {
+ "browsers": "last 5 versions"
+ },
+ "file-type-pug": "{\"compilers\":[\"pug\"]}",
+ "file-type-css": "{\"compilers\":[\"autoprefixer\",\"cssnext\",\"minify-css\"]}",
+ "file-type-javascript": "{\"compilers\":[\"concat-js\",\"babel\",\"uglify-js\"]}",
+ "file-type-stylus": "{\"compilers\":[\"stylus\",\"autoprefixer\",\"minify-css\"]}",
+ "file-type-markdown": "{\"compilers\":[\"markdown\"]}",
+ "file-type-haml": "{\"compilers\":[\"haml\"]}",
+ "file-type-slim": "{\"compilers\":[\"slim\"]}",
+ "file-type-coffee-script": "{\"compilers\":[\"coffee-script\",\"uglify-js\"]}",
+ "file-type-livescript": "{\"compilers\":[\"livescript\",\"uglify-js\"]}",
+ "file-type-kit": "{\"compilers\":[\"kit\"]}",
+ "uglify-js": {
+ "ie8": false,
+ "compress": {
+ "sequences": true,
+ "properties": true,
+ "dead_code": true,
+ "drop_debugger": true,
+ "unsafe": false,
+ "unsafe_comps": false,
+ "unsafe_math": false,
+ "unsafe_proto": false,
+ "unsafe_regexp": false,
+ "conditionals": true,
+ "comparisons": true,
+ "evaluate": true,
+ "booleans": true,
+ "loops": true,
+ "unused": true,
+ "toplevel": false,
+ "top_retain": "",
+ "hoist_funs": true,
+ "hoist_vars": false,
+ "if_return": true,
+ "join_vars": true,
+ "collapse_vars": true,
+ "reduce_vars": true,
+ "warnings": true,
+ "negate_iife": true,
+ "pure_getters": false,
+ "pure_funcs": [],
+ "drop_console": false,
+ "expression": false,
+ "keep_fargs": true,
+ "keep_fnames": false,
+ "passes": 1,
+ "keep_infinity": false,
+ "side_effects": true,
+ "global_defs": []
+ },
+ "output": {
+ "ascii_only": false,
+ "beautify": false,
+ "comments": "",
+ "indent_level": 4,
+ "indent_start": 0,
+ "inline_script": false,
+ "keep_quoted_props": false,
+ "max_line_len": false,
+ "preamble": "",
+ "preserve_line": false,
+ "quote_keys": false,
+ "quote_style": 0,
+ "semicolons": true,
+ "shebang": true,
+ "width": 80
+ }
+ },
+ "cssnext": {
+ "customProperties": true,
+ "applyRule": true,
+ "calc": false,
+ "nesting": true,
+ "customMedia": true,
+ "mediaQueriesRange": true,
+ "customSelectors": true,
+ "attributeCaseInsensitive": true,
+ "colorRebeccapurple": true,
+ "colorHwb": true,
+ "colorGray": true,
+ "colorHexAlpha": true,
+ "colorFunction": true,
+ "fontVariant": true,
+ "filter": true,
+ "initial": true,
+ "rem": true,
+ "pseudoElements": true,
+ "pseudoClassMatches": true,
+ "pseudoClassNot": true,
+ "pseudoClassAnyLink": true,
+ "colorRgba": true,
+ "overflowWrap": true
+ },
+ "file-type-typescript": "{\"compilers\":[\"typescript\",\"uglify-js\"]}",
+ "babel": {
+ "useBabelRc": true,
+ "presets": {
+ "babel-preset-es2015": true
+ },
+ "plugins": {
+ "babel-plugin-syntax-jsx": true,
+ "babel-plugin-transform-react-jsx": true,
+ "babel-plugin-transform-async-to-generator": true,
+ "babel-plugin-transform-class-properties": true,
+ "babel-plugin-transform-object-rest-spread": true
+ }
+ },
+ "file-type-png": "{\"compilers\":[\"png\"]}",
+ "file-type-jpg": "{\"compilers\":[\"jpg\"]}"
+}
\ No newline at end of file
diff --git a/03 - CSS Variables/work2/img.jpg b/03 - CSS Variables/work2/img.jpg
new file mode 100644
index 0000000000..011ebd7e26
Binary files /dev/null and b/03 - CSS Variables/work2/img.jpg differ
diff --git a/03 - CSS Variables/work2/index-START.html b/03 - CSS Variables/work2/index-START.html
new file mode 100644
index 0000000000..3b0382b5e6
--- /dev/null
+++ b/03 - CSS Variables/work2/index-START.html
@@ -0,0 +1,80 @@
+
+
+
+
+ Scoped CSS Variables and JS
+
+
+ Update CSS Variables with JS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+