JS30 筆記 === 由於最近剛學 JavaScript 想做個專案練練手,在思考題材的過程中,稍微 Google 了一下,發現蠻多大大推薦 JS30 這個教學平台,於是就展開了 JS30 的冒險之旅。 --- JS30 的教學平台網址:[JavaScript30. 30 Day Vanilla JS Coding Challenge](https://javascript30.com/) [JS30 GitHub 範例檔案](https://github.com/wesbos/JavaScript30) ## 註冊 ![](https://i.imgur.com/yt2Ag21.png =500x) 首先,輸入一下 email 註冊一下,等系統寄信給你。 收到信驗證後,記住自己的帳號與密碼,就能開始挑戰了。 ## 下載檔案 ![](https://i.imgur.com/YLJxDBw.png =500x) 如上圖,點擊「Starter Files」會連到 JS30 的 [GitHub]。(https://github.com/wesbos/JavaScript30) ![](https://i.imgur.com/wBE9JQt.png =500x) 點擊「Download ZIP」下載一下程式碼。 下載完畢後,解壓所 ZIP 檔案,就能看到題目了。 ## 介紹 ![](https://i.imgur.com/3hr6mTq.png =300x) 進入第一章節,可以看到 index-START.html 與index-FINISHED.html。 一般 index-START.html 是題目。 而 index-FINISHED.html 是答案。 我們的任務就是把 index-START.html 做成 index-FINISHED.html 的效果。 ## 課程 [JS30 筆記 01 - JavaScript Drum Kit](https://hackmd.io/@chiisen/SJqpyQnTI) [JS30 筆記 02 - JS and CSS Clock](https://hackmd.io/@chiisen/HJHH9NaT8) [JS30 筆記 03 - CSS Variables](https://hackmd.io/@chiisen/By0DEIppL) ## 參考資料 [JavaScript30](https://github.com/guahsu/JavaScript30) [JS30-Day1-Javascript Drum Kit ](https://ithelp.ithome.com.tw/articles/10192471) [[ Alex 宅幹嘛 ] 👨‍💻 深入淺出 Javascript30](https://hackmd.io/@chiisen/HkayJmnaI) ###### tags: `JS30` `JavaScript`