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 💪 - - - - - - -
-
-

Hey

-

Let's

-

Dance

-
-
-

Give

-

Take

-

Receive

-
-
-

Experience

-

It

-

Today

-
-
-

Give

-

All

-

You can

-
-
-

Life

-

In

-

Motion

-
-
- - - - - - - 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 @@ - + diff --git a/1jsDrumkit/js.js b/1jsDrumkit/js.js new file mode 100644 index 0000000000..fdb5d03b10 --- /dev/null +++ b/1jsDrumkit/js.js @@ -0,0 +1,19 @@ +window.addEventListener("keydown", function(e){ + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`) + , key = document.querySelector(`.key[data-key="${e.keyCode}"]`) + if (!audio) { + return + } + + key.classList.add("playing") + audio.currentTime = 0; // stops audio and restarts from zero + audio.play(); // play's the audo file associated with the keycode + +}) +function removeTransition(e){ + if (e.propertyName !== 'transform'){return} + this.classList.remove("playing") +} +const keys = +document.querySelectorAll('.key') +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); diff --git a/01 - JavaScript Drum Kit/style.css b/1jsDrumkit/style.css similarity index 100% rename from 01 - JavaScript Drum Kit/style.css rename to 1jsDrumkit/style.css diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/2CSSClock/index-FINISHED.html similarity index 100% rename from 02 - JS + CSS Clock/index-FINISHED.html rename to 2CSSClock/index-FINISHED.html diff --git a/02 - JS + CSS Clock/index-START.html b/2CSSClock/index-START.html similarity index 100% rename from 02 - JS + CSS Clock/index-START.html rename to 2CSSClock/index-START.html diff --git a/2MYCSSClock/6b9y2vdjy_k-francesco-gallarotti.jpg b/2MYCSSClock/6b9y2vdjy_k-francesco-gallarotti.jpg new file mode 100644 index 0000000000..1dd5673871 Binary files /dev/null and b/2MYCSSClock/6b9y2vdjy_k-francesco-gallarotti.jpg differ diff --git a/2MYCSSClock/index.html b/2MYCSSClock/index.html new file mode 100644 index 0000000000..69f20b274b --- /dev/null +++ b/2MYCSSClock/index.html @@ -0,0 +1,20 @@ + + + + + My Clock + + + + +
+
+
+
+
+
+
+ + + + diff --git a/2MYCSSClock/index.js b/2MYCSSClock/index.js new file mode 100644 index 0000000000..c61ab2aa72 --- /dev/null +++ b/2MYCSSClock/index.js @@ -0,0 +1,18 @@ +const secondHand = document.querySelector(".sec") +const minuteHand = document.querySelector(".min") +const hourHand = document.querySelector(".hr") +function setDate () { + const now = new Date() + , secs = now.getSeconds() + , mins = now.getMinutes() + , hrs = now.getHours() + , secondsDegrees = ((secs / 60) * 360)+90 + , minutesDegrees = ((mins / 60) * 360)+90 + , hoursDegrees = ((hrs / 12) * 360)+90 + + secondHand.style.transform = `rotate(${secondsDegrees}deg)` + minuteHand.style.transform = `rotate(${minutesDegrees}deg)` + hourHand.style.transform = `rotate(${hoursDegrees}deg)` +} + +setInterval(setDate, 1000) diff --git a/2MYCSSClock/style.css b/2MYCSSClock/style.css new file mode 100644 index 0000000000..f46773f319 --- /dev/null +++ b/2MYCSSClock/style.css @@ -0,0 +1,54 @@ +body { + background-image: url("6b9y2vdjy_k-francesco-gallarotti.jpg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + display: flex; + justify-content: center; + text-align: center; + top: 50%; +} +.clock-border{ + top: 5vh; + width: 70vh; + height: 70vh; + border-radius: 50%; + background-color: transparent; + border: 25px white solid; + position: relative; + padding:2rem; + box-shadow: + 0 0 0 4px rgba(0,0,0,0.1), + inset 0 0 0 3px #EFEFEF, + inset 0 0 10px black, + 0 0 10px rgba(0,0,0,0.2); +} +.clock-face { + border-radius: 35vh; + background-color: transparent; + position: relative; + width: 100%; + height: 100%; + transform: translateY(-3px); /* account for the height of the clock hands */ +} +.hr { + background-color: honeydew; +} +.min { + background-color: maroon; +} +.sec { + background-color: slategrey; +} +.hand{ + width:50%; + height:6px; + position: absolute; + top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + border-radius: 50% +} diff --git a/3CSSVariables/index.html b/3CSSVariables/index.html new file mode 100644 index 0000000000..b29a6a1c9e --- /dev/null +++ b/3CSSVariables/index.html @@ -0,0 +1,27 @@ + + + + + Scoped CSS Variables and JS + + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + diff --git a/3CSSVariables/index.js b/3CSSVariables/index.js new file mode 100644 index 0000000000..98765281af --- /dev/null +++ b/3CSSVariables/index.js @@ -0,0 +1,18 @@ +var myImg = document.getElementById('myImg'); +var selectedColor = document.getElementById('selectedColor').value; +var borderWidth = document.getElementById('borderWidth').value; +var imgBlur = `${document.getElementById('imgBlur').value}px`; +myImg.style.border = `${borderWidth}px solid ${selectedColor}`; + +function changeBorderColor() { + selectedColor = document.getElementById('selectedColor').value; + myImg.style.border = `${borderWidth}px solid ${selectedColor}`; +} +function changeBorderSpacing() { + borderWidth = document.getElementById('borderWidth').value; + myImg.style.border = `${borderWidth}px solid ${selectedColor}`; +} +function changeImgBlur() { + imgBlur = `${document.getElementById('imgBlur').value}px`; + myImg.style.filter = `blur(${imgBlur})`; +} diff --git a/3CSSVariables/style.css b/3CSSVariables/style.css new file mode 100644 index 0000000000..c3ada36ec0 --- /dev/null +++ b/3CSSVariables/style.css @@ -0,0 +1,16 @@ +body { + text-align: center; + background: #193549; + color: white; + font-family: 'helvetica neue', sans-serif; + font-weight: 100; + font-size: 50px; +} + +.controls { + margin-bottom: 50px; +} + +input { + width: 100px; +} diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/4ArrayCardioDay1/index-FINISHED.html similarity index 100% rename from 04 - Array Cardio Day 1/index-FINISHED.html rename to 4ArrayCardioDay1/index-FINISHED.html diff --git a/4ArrayCardioDay1/index.html b/4ArrayCardioDay1/index.html new file mode 100644 index 0000000000..19a615e649 --- /dev/null +++ b/4ArrayCardioDay1/index.html @@ -0,0 +1,146 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + diff --git a/4ArrayCardioDay1/ssh b/4ArrayCardioDay1/ssh new file mode 100644 index 0000000000..e69de29bb2 diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/5FlexPanelGallery/FINISHED.html similarity index 100% rename from 05 - Flex Panel Gallery/index-FINISHED.html rename to 5FlexPanelGallery/FINISHED.html diff --git a/5FlexPanelGallery/index.html b/5FlexPanelGallery/index.html new file mode 100644 index 0000000000..a696256529 --- /dev/null +++ b/5FlexPanelGallery/index.html @@ -0,0 +1,45 @@ + + + + + Flex Panels 💪 + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + diff --git a/5FlexPanelGallery/index.js b/5FlexPanelGallery/index.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/5FlexPanelGallery/style.css b/5FlexPanelGallery/style.css new file mode 100644 index 0000000000..e7c69ca7d0 --- /dev/null +++ b/5FlexPanelGallery/style.css @@ -0,0 +1,82 @@ +*, *:before, *:after { + box-sizing: inherit; +} +html { + box-sizing: border-box; + background:#ffc600; + font-family:'helvetica neue'; + font-size: 20px; + font-weight: 200; +} +body { + margin: 0; +} +.panels { + min-height:100vh; + overflow: hidden; + display: flex; +} + +.panel { + background:#6B0F9C; + box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); + color:white; + text-align: center; + align-items:center; + /* Safari transitionend event.propertyName === flex */ + /* Chrome + FF transitionend event.propertyName === flex-grow */ + transition: + font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + background 0.2s; + font-size: 20px; + background-size:cover; + background-position:center; + flex: 1; + justify-content: center; + display: flex; + flex-direction: column; +} + + +.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } +.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); } +.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } +.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } +.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } + +/* Flex Items */ +.panel > * { + margin:0; + width: 100%; + transition:transform 0.5s; + flex: 1 0 auto; + display:flex; + justify-content: center; + align-items: center; +} + +.panel > *:first-child { transform: translateY(-100%); } +.panel.open-active > *:first-child { transform: translateY(0); } +.panel > *:last-child { transform: translateY(100%); } +.panel.open-active > *:last-child { transform: translateY(0); } + +.panel p { + text-transform: uppercase; + font-family: 'Amatic SC', cursive; + text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); + font-size: 2em; +} +.panel p:nth-child(2) { + font-size: 4em; +} + +.panel.open { + flex: 5; + font-size:40px; +} + +.cta { + color:white; + text-decoration: none; +} diff --git a/06 - Type Ahead/index-FINISHED.html b/6TypeAhead/index-FINISHED.html similarity index 100% rename from 06 - Type Ahead/index-FINISHED.html rename to 6TypeAhead/index-FINISHED.html diff --git a/06 - Type Ahead/index-START.html b/6TypeAhead/index-START.html similarity index 100% rename from 06 - Type Ahead/index-START.html rename to 6TypeAhead/index-START.html diff --git a/06 - Type Ahead/style.css b/6TypeAhead/style.css similarity index 100% rename from 06 - Type Ahead/style.css rename to 6TypeAhead/style.css diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/7ArrayCardioDay2/index-FINISHED.html similarity index 100% rename from 07 - Array Cardio Day 2/index-FINISHED.html rename to 7ArrayCardioDay2/index-FINISHED.html diff --git a/07 - Array Cardio Day 2/index-START.html b/7ArrayCardioDay2/index-START.html similarity index 100% rename from 07 - Array Cardio Day 2/index-START.html rename to 7ArrayCardioDay2/index-START.html diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/8FunwithHTML5Canvas/index-FINISHED.html similarity index 100% rename from 08 - Fun with HTML5 Canvas/index-FINISHED.html rename to 8FunwithHTML5Canvas/index-FINISHED.html diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/8FunwithHTML5Canvas/index-START.html similarity index 100% rename from 08 - Fun with HTML5 Canvas/index-START.html rename to 8FunwithHTML5Canvas/index-START.html diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/9DevToolsDomination/index-FINISHED.html similarity index 100% rename from 09 - Dev Tools Domination/index-FINISHED.html rename to 9DevToolsDomination/index-FINISHED.html diff --git a/09 - Dev Tools Domination/index-START.html b/9DevToolsDomination/index-START.html similarity index 100% rename from 09 - Dev Tools Domination/index-START.html rename to 9DevToolsDomination/index-START.html