iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

30天技能樹養成:開啟前端冒險秘境 系列

《30天技能樹養成:開啟前端冒險秘境》是一場從零開始的程式旅程~
我們把學習想像成探索秘境,每一天就是點亮技能樹的一個節點。從 HTML 打下基礎、CSS 建立美感,到 JavaScript 賦予互動,再逐步觸碰框架,透過循序漸進的任務,不只是在背語法,而是親手打造屬於自己的冒險裝備。30天後,從中磨練屬於新手冒險者的第一把「程式之劍」。這趟旅程不求速成,而是讓學習變得具體、有趣,藉由一步步打怪升級,進入前端的奇幻世界。

鐵人鍊成 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文 團隊nutc imac
DAY 21

Day21. HTML & CSS 元件進階:Display 屬性與常用排版控制

昨天我們學了 Flex & Grid 排版,今天讓我們學習 CSS 的核心屬性之一:display,它決定元素的「顯示方式」,為掌控排版的基礎! di...

2025-10-05 ‧ 由 evangeline_77 分享
DAY 22

# Day22. CSS 元件進階:定位 (Position) 與浮動 (Float)

昨天我們用 display 把東西乖乖排好,像是在叫大家「排隊、站好」。但你有沒有遇過這種情況: 想讓一顆「回到頂端」的按鈕一直固定在右下角? 想讓導覽列滾到...

2025-10-06 ‧ 由 evangeline_77 分享
DAY 23

# Day23. CSS 元件進階:誰在上面?z-index 與堆疊順序

昨天學了 position,可以把元素固定在角落、飄起來、甚至黏住。但是還是會遇到其他的問題: 「彈出視窗怎麼被背景蓋住?」 「按鈕在最上面才對啊,為什麼點不到...

2025-10-07 ‧ 由 evangeline_77 分享
DAY 24

# Day24. CSS 動畫入門:讓畫面活起來 ✨

昨天我們拿到「空間控制權」:能決定誰在上、誰在下。但網頁還是靜態的,沒有動態感。想像一下: 彈出視窗直接瞬間跳出來 → 有點生硬 下拉選單硬生生地展開 → 缺...

2025-10-08 ‧ 由 evangeline_77 分享
DAY 25

# Day25. CSS 動畫進階:速度曲線、變形原點、3D 與效能心法

昨天把動畫「動」起來了;但你可能發現,有些動畫看起來順、有質感,有些就像瞬移或卡卡的。秘訣通常不在「有沒有動」,而在怎麼動:速度曲線(easing)、從哪裡變形...

2025-10-09 ‧ 由 evangeline_77 分享
DAY 26

Day26. 動畫小結與實戰:讓 UI 更自然

昨天我們已經看過動畫的一些方法:速度曲線、變形原點、3D 效果、效能心法。今天我們不急著學新招,而是先整理一下:到底什麼動畫該怎麼寫,效果會最好? 想像你是一位...

2025-10-10 ‧ 由 evangeline_77 分享
DAY 27

# Day27. JavaScript 文法與邏輯基礎 — 從句子到函式、範圍到閉包

Day27. JavaScript 文法與邏輯基礎 — 從句子到函式、範圍到閉包 程式要寫得穩、不會莫名出錯,需要靠紮實的語法與邏輯觀念。之前只大致講一些JS觀...

2025-10-11 ‧ 由 evangeline_77 分享
DAY 28

# Day28. JavaScript 邏輯與資料操作 — 陣列、物件、流程控制與運算符

程式寫到一定程度,光靠函式與變數是不夠的,我們需要控制流程,決定程式什麼時候做什麼、重複做多少次,或遇到特定條件時跳過或停止,今天來把之前簡略提到過的再更詳細的...

2025-10-12 ‧ 由 evangeline_77 分享
DAY 29

# Day29. 從 0 打造一個前端功能:方法論 → 骨架 → 互動

從「需求」出發 當看到一個網站或想做一個功能時,先問自己: 有哪些元素?(HTML) 按鈕?表單?圖片?清單? 骨架清單 這些元素要長怎樣?(CSS) 排...

2025-10-13 ‧ 由 evangeline_77 分享
DAY 30

# 🌟 Day30 最終回:30天技能樹總結複習

30 天前,我們從一個對前端只聞其名的小白開始,跌跌撞撞地把 HTML、CSS、JavaScript 一點一點拼起來......這過程就像蓋房子: 先學會搭骨...

2025-10-14 ‧ 由 evangeline_77 分享