iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

Angular、React、Vue 三框架實戰養成:從零打造高品質前端履歷網站 系列

從 HTML、SCSS、TypeScript 基礎出發,前面先以 Angular 為主,打造高品質可上線的前端履歷網站,最後以 React 與 Vue 進行對照實作,完成三個版本的作品並進行效能與開發體驗比較,讓你一次掌握三大前端框架的核心能力。

參賽天數 24 天 | 共 24 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1 HTML 基本標籤與結構 – 從零開始打造履歷網站雛型

未來 30 天,我會帶大家從最最基礎 HTML、CSS、TypeScript,一路到 Angular、React、Vue 三大框架,最後完成一個 能放在履歷上的...

2025-09-15 ‧ 由 Chiayu 分享
DAY 2

Day 2 CSS / SCSS 入門 – 美化履歷網站雛型

昨天我們已經完成了 HTML 骨架,把履歷網站的基本結構搭建出來了。雖然功能完整,但現在的頁面就像「黑白素顏版」的履歷,看起來還不太能直接拿去面試。 今天的目標...

2025-09-16 ‧ 由 Chiayu 分享
DAY 3

Day 3 TypeScript 開始 – 讓履歷網站動起來

到目前為止,我們已經完成了一個「有結構、有樣式」的履歷網站: Day 1:打好 HTML 骨架 Day 2:用 CSS / SCSS 美化 但這個網站目...

2025-09-17 ‧ 由 Chiayu 分享
DAY 4

DOM 操作與事件綁定 – 用 TS 操作 HTML 元素

今日目標 了解 DOM 與常用的節點操作:查找、內容、屬性、樣式、類別、資料屬性 會用 事件綁定(click、input)及 事件委派(event dele...

2025-09-18 ‧ 由 Chiayu 分享
DAY 5

Day 5 RWD 響應式網頁設計 – 讓自我介紹頁在各裝置都好看

今日目標 了解 RWD 的核心觀念:手機先行、流體排版、彈性圖片、斷點(breakpoints) 在原本的履歷網站套上 mobile-first 的版面規劃...

2025-09-19 ‧ 由 Chiayu 分享
DAY 6

Day 6 小專案:純原生 HTML/CSS/TS 的自我介紹頁(可交付 MVP) 今日目標

今日目標 把 Day1–Day4 的內容整合,完成一個 無框架的一頁式自我介紹網站,包含: 語義化結構(header / nav / main / secti...

2025-09-20 ‧ 由 Chiayu 分享
DAY 7

Day 7 Angular 起手式 – 用 Angular CLI 建立專案骨架

今日目標 了解什麼是 Angular CLI 用 Angular CLI 建立一個新的 Angular 專案 認識 Angular 專案的基本資料夾結構 把...

2025-09-21 ‧ 由 Chiayu 分享
DAY 8

Day 8 Angular 元件切分 – 把履歷網站拆成模組化架構

今日目標 了解 Angular Component 是什麼 學會用 CLI 建立新的元件 把 Day 6 的 HTML 拆分成多個元件(Header、Hero...

2025-09-22 ‧ 由 Chiayu 分享
DAY 9

Day 9 Angular 資料綁定 – 用程式產生 Skills 與 Projects 清單

今日目標 了解 Angular 的 插值 (Interpolation) 和 結構指令 ngFor 在元件的 .ts 檔裡定義 skills 與 proje...

2025-09-23 ‧ 由 Chiayu 分享
DAY 10

Day 10 Angular 事件綁定 – 讓按鈕驅動 UI

今日目標 了解 (click) 事件綁定與 屬性 / 類別綁定([attr.*]、[class.*]) 用 Angular 實作「更多介紹」展開 / 收起(不...

2025-09-24 ‧ 由 Chiayu 分享