HTML5, CSS/Sass, jQuery, Bootstrap – 新一代網頁設計 – HTML5, CSS/Sass, jQuery, Bootstrap

View Github Repository Open presentation in a new window

MrOrz

See all presentation from MrOrz

HTML5, CSS/Sass, jQuery, Bootstrap – 新一代網頁設計 – HTML5, CSS/Sass, jQuery, Bootstrap

7 16

webdev

不囉唆學 HTML。以 reveal.js 製作的 HTML / CSS / JS 投影片。

On Github MrOrz / webdev

HTML5, CSS/Sass, jQuery, Bootstrap

新一代網頁設計

資訊系統訓練班 @ NTU CSIE

梁翔勝

Johnson / MrOrz

資訊系統訓練班 講師介紹

VUSE 你來說我來畫

台大行動電話與人機介面實驗室

網路及平台服務程式設計助教 / 期末成果展 - NTU Cloud Expo

HTML5, CSS/Sass, jQuery, Bootstrap

新一代網頁設計

講到網頁 就要從瀏覽器講起。

瀏覽器

Web Browsers

Safari | Firefox | Opera | Chrome | IE

用來上網的程式

通俗的說法 上網？

瀏覽器做了這些事

下載 HTML 檔 下載 CSS 檔、Javascript 檔、圖片 顯示網頁 輸入 facebook.com 的網址，按下 enter 後

HTML ： 內容、架構

CSS ： 外觀

Javascript ： 功能

前述的三種檔案，各司其職 網站的......

架構

HTML

有哪些內容

"Content"

外觀

CSS

如何去呈現

"Presentation"

架構

外觀 + 架構

遠大(?)的目標

投影片形式

請使用 Google Chrome 瀏覽器。

Reveal.js

空白鍵 播放投影片

上 下 左 右 自由瀏覽

ESC 顯示概觀。

歡迎攜帶自己的筆電！

互動程式範例

JS Bin

Syllabus

10 次上課

每次 3 小時（19:00 ~ 22:00）

一週兩次（週二、週五）

課表

HTML & CSS

〈第一～三次上課〉

  • Syllabus, HTML
  • HTML, CSS 基礎
  • Box Model、定位、CSS3、Media queries
worksheet 1: 超短HTML + 簡單改顏色、改字體大小 HW1：HTML 產品頁面 mockups

Javscript

〈第四～六次上課〉

  • Javascript 語法、基礎元素
  • 基本 DOM API，jQuery 操作、選取、事件
  • jQuery UI
HW2：TODO List

CSS Frameworks

〈第七、八次上課〉

  • Compass 與 bootstrap-sass
  • CSS Preprocessors -- Sass
worksheet 2: 把之前的 hw 用 sass-convert 轉換成 sass HW3: 產品網站

Mashups & Social Network

〈第九、十次上課〉

  • HTTP，jQuery Ajax
  • Facebook Graph API & JS SDK
  • 作業檢討
  • 總結
HW4：facebook 垃圾社團 checker

評分方式

作業與學習單 = 120%

兩份學習單、四次作業

課程互動