鐵人檔案
題目簡介
學習程式其中一個很重要的點就是大量的實作和練習，知識要能運用才會產生力量，所以希望藉由這一系列的文章來增加輸出和練習量，也同時幫助自己理解各個知識點的實際應用。
內容規劃
此30篇主要會跟著Udemy上『50 Projects In 50 Days - HTML, CSS & JavaScript』的教學中挑出25-30個side project進行實作練習，使用技術會圍繞在HTML、 CSS 、JavaScript，搭配查找額外的資源來加強相關知識點，並把實做的步驟和過程記錄下來。
培根說:「知識就是力量」，而知識要能運用才會產生更驚人的力量 前情提要&參賽動機 經過幾個禮拜的深思熟慮，最後還是選擇來參賽啦其中一個原因是9/...
這一篇要來實作第一個side project，那在開始實作前，先把資料夾建立好~ 資料夾結構之換湯不換藥 資料夾結構如上圖↑，第一個side project我們...
今天要來實作的是進度條，我們可能在各種不同類型的網站上看過它的蹤影，像是註冊表單、結帳流程等，那今天就來試著來自己做吧ヽ(✿ﾟ▽ﾟ)ノ 運用知識點羅列 一個...
今天是中秋節，應景一下就做了一個很陽春的導覽列，本篇的重點會放在CSS 2D Transform的部分中秋圖片參考自iStock 事前準備 一張你喜歡的圖...
今天要來做的是圖片模糊加載，圖片一開始是很模糊的，隨著加載率從0%~100%的過程中，會越來越清楚，最後進入焦點，而加載文字的部分則會慢慢淡出 事前準備 1....
今天要來做的是滾動動畫，利用滑鼠滾輪來控制BOX從左右兩邊交叉的出現，倒回去也一樣可以XD! 那我們就直接開始吧 運用知識點羅列 CSS 知識點 使...
不知不覺時間來到了第七天啦! 今天要來做的是 Landing Page (又叫「一頁式網站」或「著陸頁」)，那什麼是Landing Page呢?「 單一特定目...
今天來做表單的波浪效果，如圖中所示，當input框取得焦點時，表單的label就會有高低起伏的效果，這篇有很多重要的JS觀念，像是陣列的處理方法，所以打算分成...
這篇延續上篇的波浪字體繼續進行講解 昨天說到javascript的部分可以從兩個部份來講解 把原本在<label>中的每個字母分開獨立包在<...
今天要來做聲音操控版，點按圖中的每個按鈕，就會播放音檔，而當我同時又點了別的按鈕，就會暫停原本的音檔，播放別的音檔，蠻有趣的 ヽ(✿ﾟ▽ﾟ)ノ 程式碼其實不...
