Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
如何自學網頁及網站開發
在初次接觸網站開發，或是任何新領域時，都會想了解能夠用什麼樣的工具最有效率的學習，所以決定把自己的學習路徑分享出來。
內容目錄
決定技能樹
如同之前在〈寫作的輸入與產出：如何系統化學習〉中，我們曾經提到要先將技能切割成若干元素。因此，透過〈Developer Roadmap〉，我們可以了解到當代網站開發所需要的技能有哪些。
基本上，決定其中一條路之後，就專心把技能樹往下點。但是因為我在學習開發時，是透過 WordPress 作為範本，因此我在中間曾分心將部分技能點數投資在 PHP 上。
學習資源整理
以下的分級分類其實都是我自己主觀的分類，事實上只要將基礎的 3 種教材學過一輪，接下來便可以「讀懂」其他人的程式碼。就像學英文時，我們透過學習基本單字與文法後，再進一步的延伸自習。
因此，如果對於自學沒有自信的人，我推薦挑選一些付費的課程 (如資策會、台大計中或各地創業育成中心)，確定累積了「基本詞彙量」之後，再開始進一步的自修。
基礎：HTML, CSS, and Javascript for Web Developers
網址：https://www.coursera.org/learn/html-css-javascript-for-web-developers
這個課程是我的第一份教材。講師從最一開始的環境建置開始說起，因此會接觸到 GitHub 與編輯器。如果你有先看過 Developer Roadmap，會注意到 GitHub 是不分路徑的必修項目。
除了 GitHub 以外，講師也提到了對網站開發相當有幫助的套件管理工具 NPM。藉由跟隨講師的步驟操作，可以很有系統地了解 HTML、CSS 與 JavaScript 的整體架構，並且架設好你最初的開發環境。
因為這門課程是英文授課，因此如果對英文有恐懼的人，可能不太適合。如果是這樣的話，建議可以參考國內其他教學資源。
基礎：W3Schools
這是我在結束 Coursera 的課程後，第二份教材，性質上比較偏複習。
W3Schools 與後面介紹的 freeCodeCamp 都是可以直接在網頁上實際操作的學習資源，藉由實作與預覽，可以更有撰寫程式碼的臨場感。除了 HTML、CSS 與 JavaScript 外，也提供了 PHP 與 SQL 等多種不同的學習資源。
W3Schools 索引的方式是以程式語言類別來區分，但缺點是架構較零散，比起有系統地學習，更像是可以隨手翻閱的工具書。不建議當作第一個入門教材。
基礎/中級：freeCodeCamp
網址：https://www.freecodecamp.org/
相較於 W3Schools，freeCodeCamp 的教材架構更偏主題導向，並且將資料結構與演算法等內容都放入教材中。透過每個大段落的「成果練習」，也可以在自己的 Codepen 帳號中累積一些自己的學習筆記、作品集。
此外，freeCodeCamp 的使用者介面，私心認為比 W3Schools 友善。
不論是 W3Schools 或是 freeCodeCamp，我都會建議在做練習時，同時記下筆記，或是將自己的答案儲存。
中級：CSS Zen Garden
網址：http://www.csszengarden.com/
CSS Zen Garden 本質上是一個「炫技網站」，讓使用者可以體會到：同樣的一組 HTML 架構，可以如後透過 CSS 呈現完全不同的樣貌。我會建議將它當成課外延伸讀物，用來學習、模仿不同的 CSS 撰寫方式，尤其在虛擬元素 (pseudo element) 與虛擬類別 (pseudo class) 的使用，都相當有幫助。
中級/進階：PJChender 部落格
網址：https://pjchender.blogspot.com/p/blog-page_6.html
PJChender 的部落格文章，和我的部落格一樣，比較偏向筆記的性質，因此我把他歸類在中級而非基礎。由於有系列文的安排，因此架構上還是比我這種隨筆性質的筆記完整許多。建議在接觸完前面的課程後，可以開始閱讀他的筆記，會有不一樣的心得。
中級/進階：Codewars
前陣子相當流行「遊戲化學習」的作法，Codewars 就是相當典型的例子。透過解決不同的問題，來累積經驗值，並提升等級。
基本上 Codewars 是針對「程式語言」的練習，因此會著重在 JavaScript 的資料結構與演算法訓練，目前沒有 HTML 與 CSS 的內容。初學階段建議先不要使用，因為會感到滿滿的挫折感。
下一步：累積實戰經驗
對自學網站開發的人來說，實戰聽起來沒那麼容易。一來這會牽涉到接案、報價等問題，又會是另一個層次的主題。
如果是 WordPress 的使用者，我會建議可以透過起始佈景主題 (starter theme) 的方式，並找一個喜歡的網站來臨摹。使用起始佈景主題的主要原因有三：
- 完整註解，如果有心要成為開發者，如何寫註解會是程式碼品質的一項重要因素
- 已經建置好基本框架，只需要調整不同的屬性值便可以直接看到效果
- 趁機理解一些 PHP 的使用方式與程式邏輯，對未來選擇其他程式語言有幫助
結語
在開始踏入開發的領域時，很多人都會問「學什麼樣的語言最吃香」，這句話背後隱含著「什麼樣的語言最賺錢」。許多社團中的資深前輩，大多都會說「要看你想要解決的問題是什麼」，以及「專業比較賺錢」。
然而，以網站相關的產業來說，HTML、CSS 與 JavaScript 是基本架構，在選擇要學的程式語言 (PHP、Go、Ruby 或 node.js … 等) 時，可以說是必修科目。因此在開始煩惱想要學什麼語言前，先把必修科目唸完再來煩惱比較合適。
