HTML5、CSS3、JavaScript 網頁切版專案實戰

沒有切不出來的網頁!

網頁技術易學難精,你是否學完 HTML5、CSS3、甚至 JavaScript 之後,仍然無法完成能被企業採用、真正上線的網頁產品呢?

關鍵在於「網頁切版」的能力!網頁切版要做得好、做得精細、做得專業,需要許多經驗的累積。這門課,將會帶你【實際模仿開發】Google、Facebook 等大型公司的網頁版面設計,鉅細靡遺,手把手,從頭做到尾。

你的課程作品,就是世界級的網頁!

課程大綱

1. 網頁切版技巧總覽:
1.1 快速複習 HTML、CSS 的關鍵部份
1.2 顯示模式觀念
1.3 切版技巧之 inline-block
1.4 切版技巧之 flex
1.5 使用語意標籤

2. 行動網頁設計:
2.1 行動網頁的基本觀念
2.2 行動網頁的解決方案
2.3 RWD 回應式設計之 Media Query
2.4 RWD 回應式設計的關鍵招術
2.5 通過行動網頁友善測試

3. 網頁切版實戰一:Facebook 首頁
3.1 實戰目標:www.facebook.com (未登入狀態)
3.2 分析主要區塊
3.3 分析版面細節
3.4 鉅細靡遺:完成 FB 首頁切版

4. 網頁切版實戰二:Google 開發人員頁面
4.1 實戰目標:developers.google.com
4.2 分析主要區塊與細節
4.3 分析 RWD 回應式設計的模式
4.4 鉅細靡遺:完成 Google 開發人員頁面切版

適合對象

具備 HTML、CSS 基礎。

開發環境

任何文字編輯器,例如 Notepad++、Sublime、Visual Code 等等。

近期班次

注意事項

  • 上課地點:台灣大學資訊工程學系系館 詳細位置;教室號碼將於開課前一日公佈於官網"最新消息"中。
  • 上課教材:開課後將公布教學網站給同學查閱。
  • 結業狀況:請上官網”結業名單”查閱是否合格及可領取證書進度。

講師介紹

(1) 台灣大學心理學學士學位、台灣大學資訊工程研究所碩士學位,具備跨領域專案開發經驗。
(2) 於 2003 年,獲得美商昇陽電腦 Sun Certificated Java Programmer(SCJP) 認證。
(3) 於 2008 年,參與美商昇陽電腦校園大使計畫。
(4) 曾任資策會軟體工程師。
(5) COSCUP 2010 開源人年會講者,講題:Implementation of websocket protocol。
(6) 網頁多人線上遊戲開發。
(7) Piconion 影像處理軟體主要開發者。
(8) iThome Modern Web 2016 講者,講題:Web 終將統治世界,用 JS 打造專業影像處理軟體。
(9) iThome Modern Web 2017 講者,講題:開發複雜網頁應用的黃金法則。
(10) 於本班已教授超過 70 個班,累計教學時數超過 2,000個小時。

課程網站:

https://training.pada-x.com/