本身是視覺設計系所畢業,在學期間雖然有做過網站,但其實Html及CSS可以算沒有寫過,連html需要結尾都不知道。兩年前,進路職場還是相當依賴Dreavweaver,所以更別說Sublime text這麼潮的工具,我是根本連聽都沒聽過。
但到了現在,對於CSS及Sass已經可以和人侃侃而談,閒暇之餘還去參加鐵人賽分享一下CSS3的研究心得;而這當中,我覺得最重要的就是”開始”的行為,不論是從基礎的CSS,或者是利用Sass開發,只要跨出了第一步,剩下就容易許多了。
如果已經跨出了第一步,剩下很容易就達成了。
基礎的學習
http://www.w3school.com.cn/css/
當決定要學CSS時,就開始到處搜尋基礎的課程,相關的資源非常的多,只是怎樣的課程是好的課程,我當時的選擇是夠詳細且自己能夠理解的,上方這個就達到我的需求,這邊也推薦給大家。
這一個教程在CSS2的介紹算是非常全面且實用性很高,如果是有興趣的開發者或設計師,建議把此教程從頭看完。而其中我最推薦其中一個章節”CSS選取器”,這裡所介紹的基本選取器,許多CSS老手都不一定了解,詳讀之後必定會覺得功力大增。而本教程所不足的部分,建議可以參考以下連結,兩者都是W3C所提供的,內容其實大同小異,只是下方連結有更進階的CSS3教學。
基礎非常的重要,馬步站的穩,怎樣也推不倒。
透過開發工具研究他人作品
基礎了解後,活用也是一個重點,但總不能憑空就能活用,所以可以透過平常的搜尋,發現不錯的網頁設計排版,就可以透過開發者工具去一層層的了解。
開發者工具推薦使用Chrome或是Firefox,尤其是前者目前有廣大的使用者支持,學習的重點可以放在:
- HTML的構造
- CSS的語法
- 偽元素的運用 (pseudo-elements)
- 各種selector的運用
- 是否有結合javascript
至於開發者工具的使用技巧,就不在本篇的介紹囉~,最簡單的方法就是Chrome瀏覽器>右鍵>檢查元素 就可以開始玩了。
模仿是學習的開始。
廣泛的了解
除了自學外,要不斷地去了解新的動態,透過自己的搜尋探索,那簡直就是在黑暗中找物品,透過社群以及追蹤可以省去許多時間,只要一有新的動態,每個社群就會開始輪流發送,基本上不用擔心失去任何的訊息。這邊就推薦幾個活動力不錯的社群(台灣):
- 高雄前端社群(這規定要放第一個)
- 為薄滴賽 = Web Design
- RGBA 網頁設計師社群
- KSDG(高雄軟體社群超友情推薦)
- HTML5與CSS3在台灣(超專業社群)
一般的初學者,也可以透過以上順序當作入門的選擇(越上的越有親切感!?),在進入社群後不只可以收到新的技術訊息、其他高手的協助,當有問題時在社群發問,也可以很迅速的獲得答案。
但要注意,社群雖然可以獲得許多的資源,但資源的篩選就是在個人。例如從社群可以知道Less、stylus、sass等CSS的進階語言,知道後就透過這些關鍵字去搜尋這些語言的相關資源,評估何種語言是最適合自己,再擇一去學習及精通。
俗話說:在家靠父母,出外靠朋友。
進階的學習
還是回到一開始所說的,跨出第一步是最重要的。Sass要從哪一個專案開始用?CoffeeScript要什麼開始學?想那麼多,不如下一個專案就開始吧,只要開始後,慢慢的學習,持之以恆的做下去,那麼這一個技能就是你的了。
就以Sass來說,其實我是在只會階層式語法就直接開始用了,反正編譯出來真的有問題(基本上也不會有什麼問題),當CSS改也沒關係,最重要的事,我開始用sass了。只要有那個心,隨時都可以開始,但如果不斷的想下次再試試看,那就是永遠的下次。
一步一步慢慢走,持之以恆下去,目標就在眼前。
挑戰自己
除了在專案上挑戰自己外,也可以再有空閒的時間嘗試新的技巧。2013年的鐵人賽對我影響很大,那時候正在挑戰每天發一篇文章,因為鐵人賽的關係,必須提升文章的品質,並且更深入的研究CSS3,在鐵人賽結束的時候,從本來不會CSS transform到可以運用許多transform 3D的技法。
到了現在,每天發文就是一個習慣,一段時間不發文就會有罪惡感-O-,而這到底是興趣還是被迫…?算興趣吧,但某方面來說已經變強迫症(笑)。
以上提到的,最重要還是一個”開始”,如果不知道怎麼開始,可以問問上方社群的人,不然就點畫面最下方有我的facebook,就來問我吧。