Sass開發實戰 - 前端版型管理 (高雄場)

課程說明

由於網頁技術更新快速,RWD與中大型網站所撰寫的CSS程式碼也隨之增多,在撰寫CSS3時,同時又必須寫好幾個瀏覽器前綴詞與bug hack來兼容,也導致現今網頁設計師在撰寫CSS時,所需記憶的程式碼與重工時間又比以往變得更多。也因如此,CSS預處理器(Pre-Processors)也如雨春筍地出現,目前則以Sass的資源與framework最為豐富,讓網頁設計師不論在開發效率、維護品質、可閱讀性、程式碼可重複性都大幅提升。

在學習新的語言技術時常會因為環境建置、學習成本過長而卻步,同時不了解該如何逐步學習為開發效率帶來顯著提升。所以希望藉由這次開設課程,讓遇到這些問題的朋友都能夠迎刃而解。兩天的課程內容除了解說 Sass外,同時會教導如何使用Sublime Text 3 網頁編輯器,與使用Fire.app前端開發軟體,進以加倍提升網頁前端開發效率。

課程主題

  • 第一天 (5/2 9:00 am~17:00 pm)
    • 熟悉Sass、Sublime Text 3、Fire.app開發環境
    • 瞭解Sass運作原理
    • 常用實務功能:變數、計算、@import、@Mixin、@extend
    • Sass輔助功能:Sass Option、web service、color functions
    • Compass實用技巧:CSS3 @mixin、vertical rhythm、Source Map
    • 如何在專案上逐步導入Sass開發實務
       
  • 第二天 (5/3 9:00 am~17:00 pm)
    • 模組化CSS技巧(SMACSS、CSS Guidelines、RWD)
    • 如何整合Sass結構(由初階到進階)
    • Fire.app erb template版型系統
    • 如何設計專業級 web layout
    • 前端workflow開發流程分享(一小時)

適合對象

  • 網頁設計師/前端開發人員
  • 目前前端開發效率遇到瓶頸,欲尋找程式、工具解決現況
  • 曾獨立手寫HTML、CSS完成一個網站的開發者
  • 不適合沒有使用過HTML、CSS開發網站經驗的對象

預期效益

  • 了解前端開發導入Sass或其他CSS預處理器所帶來的效益
  • 知道如何從原本手寫CSS轉換至使用Sass來開發
  • 建立正確的CSS設計觀念,並能設計出品質優良的Sass程式碼
  • 了解在各種不同專案性質、合作協同、夥伴性質的情況下,如何設計出適合的Sass程式碼
  • 透過Fire.app erb template,從中了解後端語言template排版邏輯

★★過去學員課程評價★★

  • 學到很多業界當下就在使用的工具與方法,與廣大業界得已接軌,覺得自己專業度有提升,在專案製作上也更加迅速有效率!
  • 課程內容很豐富,講解得很清楚,一次解決了萬年疑問
  • 之前就已經購買過fire.app,但是對於sass或是其他framework一直不得其門而入,經過這兩堂課,真的很高興找到了入門的方式。
  • 上課內容很實在,學到一個很好用的工具,可以馬上在工作中應用到。
  • 很多觀念上網自己看要想很久,經過兩堂課像打通任督二脈一樣很多東西馬上都通了,發現之前用了很多自己想出來的錯誤觀念做東西。經過上課學到整理好的邏輯,還有很多簡單的技巧,發現事情其實沒有以前想的那麼複雜。上課才知道怎麼運用已經做好的framework,比起埋頭苦幹,平時也要多花點時間認識、了解這些的內容和思考脈絡。謝謝老師兩個禮拜的課程!

FAQ

Q:這個課程適合初學者嗎?
A:這個課程比較適合對CSS有一定掌握度的網頁&前端設計師,在吸收效果上會比較好些,為什麼要用Sass的原因自然是在整理CSS上會變得比較方便,但如果CSS基礎不夠的話,自然會不曉得該如何透過Sass設計出友善架構的程式碼出來。

Q:如果已經開始在學SASS的會建議報名嗎?
A:你可以衡量第二天的課程內容是否已掌握, 以講師觀察網頁/前端設計師在自學第二天課程內容, 都必須跌跌撞撞學習很久才能掌握到其中一小部分, 因為第二天每個環節其實都是環環相扣的。
所以這兩天的課程主要的目的是, 讓你有足夠的資源與知識能夠使用Sass外, 同時也具備紮實的進階基礎,藉著這個脈絡逐步讓自己成長。

Q:為什麼需要使用Fire.app開發?
A:以前使用Sass時,需要安裝Ruby環境,設計師往往都必須透過繁瑣流程來建置開發環境,同時還必須command line輸入視窗打指令,對設計師而言並不友善。但Fire.app內建便擁有Sass+Compass的編譯環境,所以只要開啟此軟體便可直接寫Sass,除此之外也含有不少在前端開發上實用的功能(livereload、樣板語言、CoffeeScript)。
為了避免學員在初步學習Sass時遇到過多環境上的障礙,所以選擇此軟體做為輔助。

Q:為什麼選擇sublime text 3的編輯器來做為教學內容?
A:sublime text 3提供多樣化的挿件與強大的內建編輯功能,讓網頁設計師能夠自行打造開發環境來提升撰寫網頁程式碼的效率,本課程也會逐步教導該如何使用此編輯器來打造撰寫Sass環境。

教師背景-廖洧杰 

繳費資訊

  • 若報名成功繳費完成,但因故取消報名者,請直接使用kktix進行退款動作,退費須另自行負擔匯款手續費10%
    • 上課日當天不退費。

其他事項

  • 租借教室為電腦教室,所以不需自備筆電。
  • 當天會準備午餐,葷素食請在報名時註明。
  • 若需開三聯式發票,請於報名欄位填寫「公司抬頭」、「統一編號」
  • 如因不可抗拒之因素 (如:天災、停電),主辦單位有權取消當次課程,並退還全額課程費用

photo credit: http://www.flickr.com/photos/95160252@N08/11288237565

北訊電腦 / 807高雄市三民區中山一路318號

イベントチケット

チケット種別 販売期間 価格
一般票(含Fire.app)

2015/03/30 00:00(+0800) ~ 2015/05/01 00:00(+0800) 販売終了
  • TWD$6,600
一般票(不含Fire.app)

2015/03/30 00:00(+0800) ~ 2015/05/01 00:00(+0800) 販売終了
  • TWD$6,180
次へ