前端開發課程 - Sass實戰教學 (高雄場)

課程說明

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

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

課程主題

  • 第一天 (6/14 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
    • 如何在專案上逐步導入Sass開發實務
       
  • 第二天 (6/21 9:00 am~17:00 pm)
    • 模組化CSS技巧(SMACSS、CSS Guidelines)
    • 如何整合Sass結構(由初階到進階)
    • 如何導入CSS framework (bootstrap、pure.css)
    • 不倚賴framework設計RWD響應式網站流程 (CSS原理→Grid基礎觀念→導入Sass)
    • Susy One Responsive Grid System
    • CSS > SASS 轉換歷程經驗分享 1hr/王志誠

適合對象

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

預期效益

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

FAQ

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

Q:如果已經開始在學SASS的會建議報名嗎?
A:你可以衡量第二天的課程內容是否已掌握, 以講師觀察網頁/前端設計師在自學第二天課程內容, 都必須跌跌撞撞學習很久才能掌握到其中一小部分, 因為第二天每個環節其實都是環環相扣的。
如果你要設計RWD時, 沒有學習一些設計規範幫你組件化CSS程式碼, 那就算用Sass也不曉得該用什麼語法來改善他, 如果對原生RWD寫法與grid system不了解的話, 你就沒辦法自己有能力去評估目前坊間一堆rwd grid framework到底有什麼差異性, 也不曉得該如何用Sass RWD framework,以及之後該如何用susy設計出自己想要的版型出來 。
所以這兩天的課程主要的目的是, 讓你有足夠的資源與知識能夠使用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環境。

教師背景-廖洧杰 

講師背景-王志誠

2012年進入前端領域的視覺設計師,熱愛HTML的相關視覺技術,其中以CSS為主,目前於鴻海科技集團擔任軟體工程師,同時也是高雄前端社群核心成員。擅長的領域為CSS、Sass,閒暇之餘還會玩其他Web技術。 

繳費資訊

  • 新台幣 6,600 元整(含 Fire.app軟體,如已購買可轉贈他人)
  • 繳費方式為ATM匯款報名成功後會mail寄出ATM匯款資訊,繳費完才算報名成功
  • 匯款完再請將匯款資訊mail至myerstone@gmail.com匯款資訊請回傳:「報名序號」、「姓名」、「帳號後五碼」
  • 若未於報名後 3 天內完成繳費流程,系統將自動取消該報名資格
  • 若報名成功繳費完成,但因故取消報名者,再以mail通知本單位,退費須另自行負擔匯款手續費30元
    • 上課日前七天欲取消報名,退還80%課程費用。
    • 上課日前三天欲取消報名,退還50%課程費用。
    • 上課日當天不退費。

其他事項

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

 

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

Event Tickets

Ticket Type Sale Period Price
一般票【NT$ 6,600】 2014/05/13 12:00(+0800) ~ 2014/06/14 12:00(+0800) End of Sale
  • Free
Next Step