guahsu / JavaScript30

JavaScript30 練習&心得紀錄

Home Page:https://guahsu.io/JavaScript30/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

JavaScript30

是一個來自加拿大的工程師WES BOS製作的一系列純javascript練習,
共有30個主題,每個主題有一個教學影片及範例檔案。

WES BOS的GitHub
JavaScript30官網

課程一覽站(動圖)

連結位置:http://guahsu.io/JavaScript30/

目的

實作範例,並紀錄每個練習的過程。

格式

  1. 主題:這個練習主要的目的/功能
  2. 步驟:整個範例的建置步驟
  3. 語法&備註:紀錄練習中使用到的語法
  4. 探索:在練習的範例中,擴充或調整一個與主題相關的功能。

資料結構

遵循原本提供的的資料結構,
並在每個練習加上index-GuaHsu.html來放置我所完成的版本。

備註

我會放在自己的部落格一份,並在GitHub上也留存一份。
若有任何錯誤或指教請在告知,謝謝:)!

列表

No 主題 筆記 DEMO
01 JavaScript Drum Kit 筆記 DEMO
02 JS and CSS Clock 筆記 DEMO
03 CSS Variables 筆記 DEMO
04 Array Cardio Day 1 筆記 DEMO
05 Flex Panel Gallery 筆記 DEMO
06 Type Ahead 筆記 DEMO
07 Array Cardio Day 2 筆記 DEMO
08 Fun with HTML5 Canvas 筆記 DEMO
09 Dev Tools Domination 筆記 DEMO
10 Hold Shift and Check Checkboxes 筆記 DEMO
11 Custom Video Player 筆記 DEMO
12 Key Sequence Detection 筆記 DEMO
13 Slide in on Scroll 筆記 DEMO
14 JavaScript References VS Copying 筆記 DEMO
15 LocalStorage 筆記 DEMO
16 Mouse Move Shadow 筆記 DEMO
17 Sort Without Articles 筆記 DEMO
18 Adding Up Times with Reduce 筆記 DEMO
19 Webcam Fun 筆記 DEMO
20 Speech Detection 筆記 DEMO
21 Geolocation 筆記 DEMO
22 Follow Along Link Highlighter 筆記 DEMO
23 Speech Synthesis 筆記 DEMO
24 Sticky Nav 筆記 DEMO
25 Event Capture, Propagation, Bubbling and Once 筆記 DEMO
26 Stripe Follow Along Nav 筆記 DEMO
27 Click and Drag 筆記 DEMO
28 Video Speed Controller 筆記 DEMO
29 Countdown Timer 筆記 DEMO
30 Whack A Mole 筆記 DEMO

其他

No 主題 筆記 DEMO
31 Gif-Loader 筆記 DEMO

About

JavaScript30 練習&心得紀錄

https://guahsu.io/JavaScript30/


Languages

Language:HTML 83.9%Language:JavaScript 9.4%Language:CSS 6.7%