---
# System prepended metadata

title: JS30 筆記
tags: [JavaScript, JS30]

---

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`