First Step Tutorials Demo

參考 devtools網頁：

參考這裡，安裝Udacity Front End Feedback Chrome Extension，它是 Udacity 在 Responsive Web Design Fundamentals 的課程中，用來檢查作業是否正確的工具。

將Android裝置連接到開發電腦上

從 Remote Debugging on Android with Chrome學到：

開發網頁時，將手機連到開發電腦，可以看看網頁在手機瀏覽時的效果與速度

要將手機連接到開發程式電腦，需要一次性的設定：

1. 首頁 > 設定 > 關於平板電腦 > 版本號碼(連按7次)。以後若再按版本號碼，會出現"不需要了，你已經是開發人員"。
2. 首頁 > 設定 > 開發人員選項 > USB偵錯 > 允許USB-確定，之後"允許USB"選項呈現打勾狀態。

開發時，連結手機與開發電腦步驟如下：

1. 用USB連接線將手機與開發電腦連上。
2. 手機端打開chrome瀏覽器。
3. 開發端打開google chrome，在URL上輸入 "chrome://inspect"。此時，手機端出現是否允許偵錯的對話框，按確定完成連線。
4. 開發端出現許多devices，點擊想要的device的inspect連結，會出現debug視窗。在debug視窗右上角一個像手機的圖示上點擊，手機的畫面會同步到開發端

網頁技巧

media query

internal css: @media screen and (min-width:?) and (max-width:?){}
external css: <link rel="stylesheet" type="text/css" media="screen and (min-width:?) and (max-width:?)" href="...">

grids

Introduction to html and css
bootstrap

flexbox

order

common patterns

Column Drop
Mostly Fluid: nested container
Layout Shifter: order
Off Canvas

responsive images

responsive images 課程

responsive tables

hidden column
no more table
contained table: overflow-x:auto

fonts