鐵人檔案
作為設計系畢業的學生，也曾做過UIUX相關設計工作，過去雖然曾學過前端程式，但隨著時間久沒碰，記憶也漸漸淡忘。這次藉著鐵人賽的機會，希望能找回程式的手感與記憶，從基礎開始重新複習與扎根。不求一步登天，只希望能把前端操作練得比以往更熟悉、更扎實，記錄這 30 天從設計到程式的打怪日常！
在第一週的尾聲，我們成功刻出了一張漂亮的個人名片卡片。但如果這時候把瀏覽器視窗拉窄，或是拿手機打開來看，會不會發現排版變得擠成一團、甚至慘不忍睹呢？ 現代人瀏覽...
前面幾天我們學了 Box Model、Flexbox 跟 Grid，這些都是乖乖排隊的版面配置。但你有沒有發現，有些網頁不管你怎麼往下捲動，右下角那顆「回到頂部...
過去的 12 天裡，我們用 HTML 刻出了骨架、用 CSS 幫它上妝、排版、甚至做好了 RWD 與定位。此時的網頁已經長得非常漂亮了——但它依然是個「沒有靈魂...
昨天我們讓 JS 裝好了變數這個小盒子，今天我們要教這個「木頭人」學會思考。 在現實生活中，我們隨時都在做條件判斷：「如果外面下雨，就帶雨傘；否則，就戴太陽眼鏡...
不知不覺我們的鐵人賽已經進行到第 15 天，也就是整整過了一半！ 在過去的幾天裡，我們跨入了 JavaScript 的世界，學會了變數與 if-else 條件判...
在前幾天，我們學會了 JavaScript 的變數、條件判斷以及收納資料的陣列與物件。但此時你心裡可能會冒出一個大問號：「這些變數跟資料，到底要怎麼跟我們的網頁...
昨天我們學會了用 JavaScript 去抓取網頁上的元素，並且動態修改它的文字或顏色。但你會發現：這些改變都是一打開網頁就瞬間發生的，使用者根本來不及參與！...
在前幾天，我們學會了如何監聽使用者的點擊事件。但想像一下，如果你今天要做一個部落格首頁或是電商商品列表，裡面有 20 筆不同的文章或商品，難道我們要傻傻地在 H...
在過去的幾天裡，我們接連解鎖了 DOM 抓取元素、事件監聽（Event Listener）還有迴圈。把這些招式單獨拿出來看好像懂了，但要怎麼把它們全部串在一起，...
昨天我們把 Todo List 待辦事項給刻出來了，是不是很有成就感呢？ 今天我們趁勝追擊，再來做兩個非常經典、而且會用到 JavaScript 數學與邏輯運算...
