鐵人檔案
挑戰在 30 天中，學習各種前端組件，以及常見的技巧，希望利用原生的 HTML、CSS 和 JavaScript 為基底，做出屬於自己的小功能，最終建造成一個｢程式碼武器庫」，本系列主要是講解實作的方法，若要聽聽我的個人心得，可以參考「手刻武器庫，30 天前端學習心得」系列。
組件實作 : Demo 一、前言 List 也是一種很常見的功能，其實 List 可以跟之前做的 Day 18：Collapsibles 組件實作 搭配使...
組件實作：Demo 一、前言 鍵盤輸入監聽事件是一個很有用的功能，或許在瀏覽一般的網頁時，比較不常使用鍵盤控制。但如果是遊玩網頁遊戲，取得鍵盤的監聽就會變...
組件實作：Demo 一、前言 Image Overlay 指的是圖片上的覆蓋效果，我們要做的是：「使用滑鼠移動到圖片上，頁面會從四個方向來滑入頁面，像是從...
組件實作 : Demo、Demo2 一、前言 Scroll 的意思為滾動，它常見的應用，比如在頁面捲動時所產生的效果，這個效果被稱作為「視差滾動」 Par...
一、前言 這篇收集了一些常見的組件，每個功能的程式碼並不多，於是決定將這些程式碼集中寫在一起啦～希望這些組件可以被重複利用，並且發揮一定的作用。那麼，現在就來...
組件實作 : Demo 一、前言 今天要來研究一下 Flexbox 的寫法，它是一個用來排版的神器，可以很有效的處理元素水平與垂直置中對齊，本篇主要是參考...
組件實作 : Demo 一、前言 今天要來實作CSS Selectors（選擇器），選擇器的最主要用途，就是讓 CSS 可以更精準的選取到想要的元素，如果...
功能實作 : Demo 一、前言 本篇主要在探討「各種 CSS 置中排版的技巧」，這些技巧主要是參考 Amos 大的「CSS垂直置中技巧，我只會23個，你...
功能實作 : Demo 一、前言 今天的目標是將現有的組件組成一個 SPA 網頁，最終目標是先把網頁寫出來，至於優化和除錯的部分，就要等整個功能都實作出來...
一、前言 終於寫到第 30 天啦～真是可喜可賀（超感動的）！沒想到在比賽的這一個月裡，時間居然可以過的這麼快，每當寫完文章後，不知不覺間天也跟著黑了，更沒想到...
