第2週：認識網頁三兄弟 - HTML, CSS, JavaScript

網頁開發三兄弟

每個偉大的網頁背後，都有這三位默默協作的英雄。讓我們來認識他們，了解各自的超能力！

HTML

結構建築師

HTML 就像房子的鋼筋水泥，提供網頁最基礎的結構和框架。它告訴瀏覽器哪裡是標題、哪裡是段落、哪裡放圖片。

定義網頁內容和結構
建立標題、段落、連結
嵌入圖片、影片、表單
語意化標記提升可讀性

深入學習 HTML

CSS

美容設計師

CSS 就像室內設計師，負責讓網頁變得美麗動人。它決定顏色、字體、排版、動畫效果，讓樸素的 HTML 變身為視覺盛宴。

控制顏色、字體、間距
創造響應式佈局
添加動畫和過渡效果
美化整體視覺體驗

JavaScript

互動魔法師

JavaScript 就像智能家電的大腦，為網頁注入生命力。它處理用戶的點擊、輸入，讓網頁能夠回應和互動，創造動態體驗。

處理用戶互動事件
動態修改網頁內容
驗證表單和數據處理
創造豐富的用戶體驗

看見三兄弟的協作魔法

親眼見證 HTML、CSS、JavaScript 如何攜手合作，創造出令人驚艷的網頁效果

即時演示

點擊不同標籤，看看每種技術的獨特作用

完整效果

純 HTML

HTML + CSS

全部功能

歡迎來到我的網站

這是一個展示三兄弟協作的範例


<!-- HTML 提供結構 -->
<div class="demo-card">
    <h3>歡迎來到我的網站</h3>
    <p>這是一個展示三兄弟協作的範例</p>
    <button id="demoButton">點擊我試試</button>
</div>

你的學習之旅

按照這個路線圖，你將從零基礎成長為能夠駕馭三兄弟的網頁開發者

Step 1

掌握 HTML 基礎

學習網頁的骨架結構，了解語意化標籤的重要性，建立扎實的基礎。這是所有網頁開發的起點。

HTML5 標籤語意化結構表單元素可訪問性

Step 2

精通 CSS 美學

深入學習 CSS 選擇器、盒模型、Flexbox 和 Grid 佈局，掌握響應式設計，讓你的網頁在任何設備上都美麗動人。

CSS 選擇器 Flexbox & Grid 響應式設計動畫效果

Step 3

征服 JavaScript 互動

學習 JavaScript 基礎語法、DOM 操作和事件處理，為你的網頁注入生命力，創造令人印象深刻的互動體驗。

JS 語法基礎 DOM 操作事件處理互動設計

Step 4

整合實戰項目

結合三兄弟的力量，創建完整的網頁項目。從個人作品集到互動應用，展現你的綜合實力。

項目規劃代碼整合用戶體驗作品展示

認識網頁三兄弟