培根說:「知識就是力量」，而知識要能運用才會產生更驚人的力量
經過幾個禮拜的深思熟慮，最後還是選擇來參賽啦
其中一個原因是9/1開賽後，看到很多人不論是新手還是老手，都很努力也很樂意分享自己領域的知識，實在是被激勵到!!所以最後決定來報名看看，也是給自己一個挑戰。
這是第一次參加鐵人賽，雖然不是第一次發文了，但要連續30天，也不是件容易的事情呢!!在此佩服所有成功完賽的前輩~ 也跟今年的參賽者們一起加油!
因為這一系列的文必須要有HTML、CSS、JS的基礎， 所以就不會特別去講解環境建置的部分囉!
如果有要額外下載甚麼套件會在文中特別註明，那我在實作中主要會使用的軟件和技術如下:
很簡明扼要哈哈
此30篇文主要會跟著『50 Projects In 50 Days - HTML, CSS & JavaScript』的影片教學中挑出大約20-25個side project來做為文章的內容，主要利用前端三大技術去實作，也會查找額外的資源來加強相關知識，我會在文中附上^ ^ 希望能把實做的步驟過程記錄下來，加強前端的技能。
| 第幾天 | 做什麼 |
|---|---|
| Day 1 | 開場&參賽動機 |
| Day 2 | Expanding Cards 擴展圖卡 |
| Day 3 | Progress Steps 進度條 |
| Day 4 | Rotating Navigation Animation會旋轉的導覽列 |
| Day 5 | Blurry Loading 模糊加載 |
| Day 6 | Scroll Animation 滾動動畫 |
| Day 7 | Split Landing Page 分離一頁式網頁 |
| Day 8 | Form Wave 表單波浪字體(上) |
| Day 9 | Form Wave 表單波浪字體(下) |
| Day 10 | Sound Board 聲音操控版 |
| Day 11 | Event Keycodes 鍵盤輸入代碼 |
| Day 12 | Dad Jokes 爸爸的冷笑話 |
| Day 13 | Drink Water 沒事多喝水 |
| Day 14 | Incrementing Counter 遞增計數器 |
| Day 15 | Background Slider 全景輪播圖 |
| Day 16 | Theme Clock 動態時鐘(上) |
| Day 17 | Theme Clock 動態時鐘(下) |
| Day 18 | Drag N Drop 拖與拉 |
| Day 19 | Double Vertical Slider雙卷軸 |
| Day 20 | Password Generator 密碼生成器(上) |
| Day 21 | Password Generator 密碼生成器(下) |
| Day 22 | Hoverboard hover面板 |
| Day 23 | Verify Account Ui 帳戶驗證介面 |
| Day 24 | Live User Filter 動態篩選器 |
| Day 25 | Quiz App 小測驗 |
| Day 26 | TTestimonial Box Switcher 人物介紹(仿限時動態) |
| Day 27 | Drawing App 畫畫面板 |
| Day 28 | 3d Background Boxes 立體背景盒 |
| Day 29 | Notes App 備忘錄 |
| Day 30 | pokedex 精靈寶可夢圖鑑 |
PS如果有甚麼寶貴的建議，也可以底下留言讓我知道唷(๑•̀ㅂ•́)و✧
iThome鐵人賽
看影片追技術