• 註解
• 變數宣告
• Function
• 陣列
• 物件
• 邏輯判斷

Read More

Week5 - Mobile 進階開發細節

• Vertical rhyth(文字垂直韻律)、範例
• schema、線上檢測工具
• schema sample
• review RWD
  • 以數據分析來設計資訊流
  • 規劃圖片策略，瀏覽器技術(是否可支援border-box，IE9以上)
  • 使用chrome dev tools Debug
  • 組件化模組
• 前端開發流程分享
• HTML5、網頁語意化技巧
• 行動版測試友善度、page speed、chrome plugin to pagespeed
• 設定關鍵字種類：itemscope itemtype=”http://schema.org/Product“
• 設定名稱：itemprop=”name”
• 設定圖片：itemprop=”image”
• 設定描述：itemprop=”description”

Read More

Week4 - Design patten

• transform、offcanvas Layout
• SMACSS、OOCSS、BEM
• Table、form、Button setting
• Mobile event (Focus、blur)

Read More

什麼是CoffeeScript？

• 借用Python和Ruby的優點
• 以較簡潔的方式編寫JavaScript
  • 以縮排取代大括號
  • List Comprehension
  • if modifier, 可以將if寫在後面，也有unless
  • 呼叫方法或邏輯判斷的時候，可以視情況省略小括號
  • 結尾不需要分號
  • 不用特別寫return

Read More

Gulp

• Gulp 是基於 Node.js 的任務自動化管理工具，和 Grunt 同樣都是用來簡化人工的步驟，但兩者卻又有著本質上的差異，最主要就是 Gulp 使用了 streams ( 流 ) 的概念，一個任務一個任務的依序按照流程做完，相當的容易思考和理解，

Read More

目錄

• 常見問題
• HTML問題
• CSS問題
• JS問題

Read More

• ng-switch
• ng-change
• ng-include
• ng-src
• ng-href

Read More

• ng-init
• ng-repeat
• input
• ng-options

Read More

Week3 - RWD 產品規劃

• review homework
• user story > functional map > UI flow > wireframe > mockup > prototype
• 如何規劃 Responsive Layout
• :before、:after
• image editing、icon font

Read More

Week2 - Mobile RWD

• 參考連結
• mobile、desktop first
• chrome dev tools mobile testing
• box-sizing、css3 selector
• homework： Basic Responsive Layout

Read More