課程說明
由於網頁技術更新快速,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環境。
教師背景-廖洧杰
- 熱愛分享與交流的前端工程師,於2007年加入邁世通科技進行前端設計與專案管理,目前則專注於兼容Desktop/Mobile網頁前端開發,期間已協助數百位平面設計師、網頁設計師導入標準網頁設計。
- 高雄前端社群發起人,於2013年3月31日創立社群,每月固定舉辦前端主題聚會,並同時蒐集前端資源,提供初學者自學管道。
- 於2013年撰寫Sass教學手冊,並同時榮獲第六屆IT鐵人邦優選名單。
- 近期Sass演講:
講師背景-王志誠
2012年進入前端領域的視覺設計師,熱愛HTML的相關視覺技術,其中以CSS為主,目前於鴻海科技集團擔任軟體工程師,同時也是高雄前端社群核心成員。擅長的領域為CSS、Sass,閒暇之餘還會玩其他Web技術。
繳費資訊
- 新台幣 6,600 元整(含 Fire.app軟體,如已購買可轉贈他人)
- 繳費方式為ATM匯款,報名成功後會mail寄出ATM匯款資訊,繳費完才算報名成功。
- 匯款完再請將匯款資訊mail至myerstone@gmail.com,匯款資訊請回傳:「報名序號」、「姓名」、「帳號後五碼」
- 若未於報名後 3 天內完成繳費流程,系統將自動取消該報名資格。
- 若報名成功繳費完成,但因故取消報名者,再以mail通知本單位,退費須另自行負擔匯款手續費30元
- 上課日前七天欲取消報名,退還80%課程費用。
- 上課日前三天欲取消報名,退還50%課程費用。
- 上課日當天不退費。
其他事項
- 租借教室為電腦教室,所以不需自備筆電。
- 當天會準備午餐,葷素食請在報名時註明。
- 若需開三聯式發票,請於報名欄位填寫「公司抬頭」、「統一編號」
- 如因不可抗拒之因素 (如:天災、停電),主辦單位有權取消當次課程,並退還全額課程費用