Photo by Aleks Dorohovich on Unsplash
轉換的跑道的過程，通常充滿掙扎。不只是認識自己，更是重新定義自己。
如果你也是設計從業人員，想要學習或是了解關於網站的開發，這裡會有一些學習資源和如何成長的分享。
該如何開始?
首先，設計師通常對美感有一定的自信和堅持，在學習過程中看到自己剛開始寫的東西不是醜不拉基就是一到不同的裝置就各種出包，一定會有很大的挫折。
這先和大家心理建設一下，從依賴視覺編輯器到能夠隨心所欲的將網站修改成自己視覺上喜歡的樣式大概需要三個月左右的學習。
第一步、不能害怕看 code，改掉依賴視覺介面的習慣
設計師是依賴視覺的生物，工程師則相反。記得電影駭客任務有一個橋斷，反抗軍的一個成員正在看著電腦不斷流動的程式碼，對著主角說 “你看起來是一堆代碼，我看是一個美女。”這就是未來會慢慢到達的境界。
如果你電腦裡面有 Dreamweaver，現在就刪掉。
這邊先簡述我練功的流程和資源分享，網站的視覺呈現，主要依照由以下三種元素構成:
- HTML
最基本的資料儲存和呈現，還有網站的基本註記。HTML 嚴格說起來不是程式語言，它比較像是一種標籤註記。簡單的說就是你的網頁有什麼圖、有什麼標題、什麼內文、什麼超連結… - CSS
可以用這個修改標題的形式、文字大小、顏色，包含簡單的滑鼠移入樣式的改變。在 css3 有簡單的設變數和判斷的功能還可以做動畫。 - Javascript
從這裡才開始算是寫程式的領域，網頁上各種互動、各種判斷，我們常常聽到 jQuery、VueJs、React、AngularJs，都是基於 Javascript 的函式庫。
這樣說好了，Javascript 是一個完整的程式語言，它可以做的事情超級多，而這些我們看到打包好的函式庫，讓你不用從輪子開始打造，快速的將網站建構成你想要的樣子。
好! 講一堆，這些其實隨便都 Google 的到。
一開始先把 codecademy 所有免費的 HTML 、CSS 、JS 課程全部做完。看不懂英文也沒關係，每題都有討論區，進去裡面把大家分享的 code 貼一貼看看效果。
另外，你需要一套 IDE (Integrated Development Environment)，就是 coding 的軟體。
其實真的很熟練的人用記事本也寫得出來，不過因為記事本很難去 Debug，也沒有什麼可以加速開發的套件，除非你是練功練很大，不然我建議還是安裝一下。
建議哪一套軟體?
Sublime 或 VSCode ，兩套的免費版本就已經十分夠用。我一開始用 Sublime ，那時候 VSCode 剛出還沒什麼人用，但幾年身邊的前端朋友幾乎都是用這套。
後來因為後端用 PHP 的關係，所以改用 PhpStorm，這套是付費，PHP 框架的功能包山包海，前後端都包，至於為什麼後端選 PHP，我會在之後的文章做說明，不是這篇的重點。
最重要的一點就是要學會使用瀏覽器開發者模式
這是對初學者最重要的步驟，從模仿中學習。從最基礎的 HTML 、CSS Debug 開始，你可以打開你覺得不錯的網站，開始觀摩抄襲其中的技巧。
這部分也是 Google 一下就一堆教學，這邊推薦 Udemy 的免費課程: Chrome 網頁除錯功能大解密。學習這個之後保證功力會有超大的提升。至少你看到別人的樣式知道怎麼下手去學習。
下一篇我會繼續講解那些免費的資源可以拿來參考，增進自己的開發能力。
