響應式網頁前端設計

第一階段
加強熟識HTML&CSS

01. 先準備網站的資料夾 02. 相關的命名規則 03. 網頁的組成語言
04-01. HTML檔案基本架構 04-02. HTML<標籤>語法格式 04-03. CSS 設計的語法與操作 04-04. <標籤>特性的基本區分 04-05. 網頁排版思維流程總整理 04-06. CSS設計的優先權問題
05-01. HTML標籤元素整理表 05-02. CSS 選取器 列表介紹 05-03. CSS 屬性 分類整理表 05-04. CSS 單位 參考整理表 05-05. CSS屬性的瀏覽器支援列表 05-06. Can I Use 瀏覽器支援查詢
06-01. 選取器 加強範例 06-02. CSS3 背景 加強範例 06-03. CSS3 區塊大小模式 06-04. CSS3 多Columns排版 06-05. CSS3 Flex Box彈性框 06-06. CSS3 2D 變形 06-07. CSS3 3D 變形 06-08. 轉場過程呈現的動畫 06-09. animation動畫設計 06-10. 顏色漸層設計 06-11. 區塊及文字的陰影 06-12. 邊框的圓角與影像 06-13. 有關文字內容 06-14. 多媒體查詢

第二階段
學習JavaScript&jQuery

01-01. 認識JavaScript語言 01-02. 程式語言的三個基本能力 01-03. 程式語言的記憶能力 01-04. 程式語言的判斷能力 01-05. 程式語言的重複能力 01-06. 物件的三個基本控制 01-07. 加強認識JavaScript物件 01-08. 認識網頁DOM框架結構
02-01. 常見JavaScript函式庫 02-02. 認識 jQuery 02-03. jQuery的撰寫精神 02-04. jQuery的選取器 02-05. jQuery的相對選取 02-06. jQuery基本常用事件 02-07. 內容的取得與改變 02-08. 樣式的取得與改變 02-09. jQuery基本動畫 02-10. jQuery自定動畫 02-11. 偵測物件的寬高尺寸 02-12. 偵測物件的座標距離
03-01. JS顯示時間的範例 03-02. jQuery物件的基本控制 03-03. jQuery物件的自定動畫 03-04. jQuery全頁滑動

第三階段
Bootstrap協助專案設計

01. 網站規劃工作 02. 網站環境準備工作
03-01. 主要框架容器 03-02. RWD網格系統
04-01. 準備首頁第一層框架 04-02. Navbar導覽列的設計 04-03. Navbar導覽滑動頁面區段 04-04. 滿版影像Carousel輪播設計 04-05. 新消息網格分配的圖文排版 04-06. Navs分頁標籤的設計 04-07. 網格分配的影像排版與特效 04-08. Collapse折疊面板的設計 04-09. Modal互動視窗的設計 04-10. Tooltips工具提示的設計 04-11. 其他再加強

第四階段
w3.css協助專案設計

01. 網站規劃工作 02. 網站環境準備工作 03. 認識 w3.css
04-01. 準備首頁的基本框架 04-02. Navigation Bars的設計 04-03. 改良手機版的Nav為Sidebar 04-04. 將共用項目獨立成模組式檔案 04-05. 首頁：寬度滿版的 Slider 設計 04-06. 首頁：左右分欄的設計 04-07. 首頁：縱向式 Carousel 設計 04-08. 首頁：多組 Tabs 的設計 04-09. 影片介紹：影片清單的播放 04-10. 全球賽事：縱橫交叉動態式網格 04-11. 新車展場：瀑布流排版的設計 04-12. 新車展場：軌跡移動的影像展現 04-13. 留言聯絡：留言表單的設計 04-14. 品牌資訊：符合RWD的網格設計

第五階段
自行開發網站專案設計

01. 網站規劃工作 02. 網站環境準備工作 03. 加強熟識Animation
04-01. 準備首頁的基本框架 04-02. Header區的設計 04-03. 手機版的Header區設計 04-04. 第一區段動畫設計 04-05. 第二區段動畫設計 04-06. 第三區段視差捲動設計 04-07. 第四區段AJAX+動畫設計 04-08. 第五區段排版設計

第六階段
Pug(Jade)&Sass協助開發效率

---- 參考安裝部置 ---- 參考pug模板引擎的安裝與使用 ---- 參考pug介紹與安裝 ---- 參考Pug模板安裝與使用 ---- 30天掌握Sass語法 ---- Sass/SCSS 簡明入門教學
=== TSuiling write 2018.07 ===

響應式網頁前端設計【第三階段】Bootstrap協助專案設計

其他再加強

【Badge標籤】參考： Bootstrap(中)、 w3schools(英)、 RUNOOB(中)

【Button按鈕】參考： Bootstrap(中)、 w3schools(英)、 RUNOOB(中)

【Buttons群組按鈕】參考： Bootstrap(中)、 w3schools(英)、 RUNOOB(中)

【Forms表單】參考： Bootstrap(中)、 w3schools(英)、 RUNOOB(中)

【Input輸入欄】參考： w3schools(英)、 RUNOOB(中)

【Input group輸入群組】參考： Bootstrap(中)、 w3schools(英)、 RUNOOB(中)

【List group列表群組】參考： Bootstrap(中)、 w3schools(英)、 RUNOOB(中)

【Pagination分頁】參考： Bootstrap(中)、 w3schools(英)、 RUNOOB(中)

【Progress進度條】參考： Bootstrap(中)、 w3schools(英)、 RUNOOB(中)

【Tables表格】參考： Bootstrap(中)、 w3schools(英)、 RUNOOB(中)

【Colors顏色】參考： Bootstrap(中)、 w3schools(英)、 RUNOOB(中)

【Text相關文字或通用類別】參考： Bootstrap(中)、 w3schools(英)、 RUNOOB(中)