Name: Taker Wu - 網頁基礎15天
Availability: InStock

Taker Wu

8 年 Senior 網頁工程師經驗，參與過公司接案、個人接案、產品設計、產品開發。

屬於「淺顯易懂」的講課風格，並快速建立完整的「觀念」
內容方面，提供業界真正有用的資訊與方法。

我們希望大家在課程後，真的可以應用、求職、工作、開發產品，而不只是一個「興趣」。希望可以幫助大家就業、轉職、能力提升、做產品、創業等，都能有所幫助。

課程內容

Intro / 課程使用手冊

Day 1 / HTML + CSS 基礎

【HTML 講義下載】
HTML tags（標籤） (15:29)
HTML 的「命名」與「架構」 (16:39)
【CSS 講義下載】
CSS selector（選擇器） (19:14)
CSS 屬性./ 排版 / display & position (21:30)
CSS 屬性 / 排版 / float (5:02)
CSS 屬性 / 細節 / box model (10:08)
CSS 屬性 / 細節 / background (7:59)
CSS 屬性 / 細節 / font & others (8:45)
CSS specificity / CSS 權重 (7:43)

Day 2 之前 / IDE【更新內容】

Intro
什麼是 IDE？ (7:10)
IDE 介面解說 (13:41)
安裝 VS code 外掛 (extension) (5:40)
美化自己的 VS code (7:33)
Coding 小技巧 (16:04)
「autocomplete」自動幫你寫好多程式碼 (13:39)
在 VS code 裡面做 git 版本控制 (12:50)

Day 2 / HTML 實戰

IDE / 寫程式的文字編輯器 (deprecated) (22:40)
Wireframe / 輕鬆分析網頁結構 (23:40)
【HTML 練習 / 檔案下載】
建立 HTML 架構 (7:36)
假資料 / 測量 / navigation（導覽列） (12:01)
Hero section 與產品分類 / HTML Special Characters (8:05)
最新產品 / 假資料 (5:38)
CTA / events & featured 段落 (8:40)
Outlets 段落 / 可以撥打的電話號碼 (7:51)
Footer / 回到頂端 (4:46)
HTML 練習回顧 / 課後練習 (6:06)

Day 3 / CSS 實戰

【CSS 練習 #1 / 檔案下載】
加入 CSS 檔案 (12:15)
Container / 水平置中 #1 (6:08)
Navigation / 圖片的問題 / 垂直置中 (17:27)
clearfix (8:24)
Hero section & 產品分類 / Grid 的概念 (22:45)
最新產品 / 細節調整 (21:33)
最新產品 / 覆蓋文字 (18:30)
【CSS 練習 #2 / 檔案下載】
event 段落 / background-image / 細節調整 (14:32)
featured 段落 (15:39)
featured 段落 / margin collapse (10:09)
outlets 段落 (6:54)
footer / 水平置中 #2 (15:50)
go top 回到頂端 (4:50)
CSS 回顧 (2:39)

Day 4 / 其他有的沒的但很重要的技術

【檔案下載 #1】
favicon (6:54)
Web fonts / Google fonts (16:42)
中文字型 (7:39)
icon fonts (28:46)
Font Awesome 更新 / 補充教材 (12:10)
Sprites 小圖示大集合 (15:04)
【LESS CSS / 檔案下載】
LESS CSS (28:48)
使用 LESS 改寫 (16:34)
CSS 的單位 (23:06)
【Table & Form / 檔案下載】
Table (3:27)
Form (17:06)
Form 與後端的溝通 / name value pair (11:40)

Day 5 / About 頁面 / 實戰

【練習 / 檔案下載】
Wireframe 分析 (6:29)
HTML 架構 (29:13)
CSS / header (17:20)
CSS / welcome message (12:35)
CSS / progress bar / CSS arrow (12:02)
CSS / feature 段落 / LESS 架構調整 (8:33)
CSS / feature 段落 / team 段落 (18:15)
CSS / counting 段落 / Clients 段落 (9:48)
CSS / footer (17:13)
CSS / 最後調整 / background 與 icon fonts (25:06)

Day 6 / Service 頁面 / Contact Us 頁面 / 實戰

【練習 / 檔案下載】
Service / HTML (19:17)
Service / header (6:39)
Service / services (12:36)
Service / features (7:48)
Service / special services (21:31)
Service / pricing table (24:41)
Service / special offer (11:06)
Contact Us / HTML (19:26)
Contact Us / CSS (23:31)

課程回饋

Day 7 / RWD 手機版網頁 / 概念

【RWD design pattern / 講義下載】
RWD vs AWD (6:23)
設計模式 / design patterns #1 / 常見的組合 (19:40)
設計模式 / design patterns #2 / 特殊的畫面 (4:53)
製作模式 / mobile first (6:26)
breakpoints (10:05)
設計模式 / RWD navigations (4:46)
【RWD 技術 / 講義下載】
RWD 技術 / media query / viewport (13:29)
RWD 技術 / CSS (13:28)
RWD 技術 / CSS 權重 (6:16)

Day 8 / RWD 手機版網頁 / 練習

【練習 / 檔案下載】
Inspect element 的手機版測試工具 (5:48)
fluid 練習 (8:10)
column drop 練習 (13:44)
sidebar drop 練習 (9:18)
scale + column drop 練習 (9:20)
可以直接使用的 off canvas plugins (6:49)
off canvas 實作 (24:43)
tiny tweaks (30:24)
mobile first 練習 (18:34)

Day 9 / Bootstrap 3 / layouts / 導讀 / 實戰

【Bootstrap 3 / 講義下載】
Grid 網格系統（核心概念） (20:32)
Nav 導覽列 / Table / List (9:46)
Form 表單優化 (8:52)
Buttons 按鈕 (14:44)
Dropdown 下拉式選單 (9:30)
有的沒的 / icons / typographic / breadcrumbs / label & badges / pagination / panel / progress bar (16:44)
Helper class (8:51)
【實戰 / 檔案下載】
HTML 實戰 / 初始設定 (2:15)
HTML 實戰 / navigation (4:50)
HTML 實戰 / header / we cover the maximum (12:31)
HTML 實戰 / services we provide / other services (12:32)
HTML 實戰 / special services / why you choose our service / client speak for us (10:30)
HTML 實戰 / footer (11:04)