鐵人檔案
挑戰在 30 天中，學習各種前端組件，以及常見的技巧，希望利用原生的 HTML、CSS 和 JavaScript 為基底，做出屬於自己的小功能，最終建造成一個｢程式碼武器庫」，本系列主要是講解實作的方法，若要聽聽我的個人心得，可以參考「手刻武器庫，30 天前端學習心得」系列。
一、前言 早在幾年前，我一直有著經營自己 Blog 的小小願望，但是礙於不知道要寫些什麼主題，這個願望就一直被我藏在心中遲遲未去執行。而在無意間，我得知鐵人賽...
組件實作 : Demo 一、前言 Button 是能夠廣泛被應用的組件之一。製作 Button 方法不只一種，你可以使用<div>、<b...
組件實作 : Demo 一、前言 Navbar 導覽列是每個網站幾乎都會有的組件之一，就是網頁最上面的那一條橫幅，Navbar 的實作上，我們專注在兩個重...
一、前言 在製作網頁時，我們會需要一些文字或是圖片來裝飾我們的頁面，這些資料可能來自設計師或是後端工程師。但是我們在前端製作頁面時，沒有這些文字與圖片資源時該...
組件實作 : Demo 一、前言 slideshow 幻燈片組件可以為網頁帶來動態的效果，與使用者產生互動，我們用 6 張圖片組成一個輪播視窗。你除了可以...
組件實作 : Demo 一、前言 今天我們要來製作 Loader 的組件，Loader 組件主要會出現在換頁或是網頁刷新（例如 AJAX）的等待時間，除了...
組件實作 : Demo 一、前言 Card 組件通常會出現在像是購物網站的商品資訊，或是影片追劇等電影介紹中，其實只要是文字加上圖片的一個群組，都可以是一...
組件實作 : Demo 一、前言 在行動裝置當道的時代，網頁的版面也隨著手機出現而有所改變，為了符合各種裝置較好的閱讀體驗，RWD 技術【1】也隨之誕生。...
組件實作 : Demo 一、前言 Form 表單組件主要出現在需要取得使用者的資訊，比如商品訂單、問卷填寫、選擇操作等等各種需要使用者輸入資料的行為，都可...
組件實作 : Demo 一、前言 驗證功能（Validate）用途在於能夠避免使用者輸入不符合格式的資料，統一的資料格式方便讓程式處理。Form 表單內容...
