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

網址:https://www.w3schools.com/

這是我在結束 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

網址:https://www.codewars.com/

前陣子相當流行「遊戲化學習」的作法,Codewars 就是相當典型的例子。透過解決不同的問題,來累積經驗值,並提升等級。

基本上 Codewars 是針對「程式語言」的練習,因此會著重在 JavaScript 的資料結構與演算法訓練,目前沒有 HTML 與 CSS 的內容。初學階段建議先不要使用,因為會感到滿滿的挫折感。

下一步:累積實戰經驗

對自學網站開發的人來說,實戰聽起來沒那麼容易。一來這會牽涉到接案、報價等問題,又會是另一個層次的主題。

如果是 WordPress 的使用者,我會建議可以透過起始佈景主題 (starter theme) 的方式,並找一個喜歡的網站來臨摹。使用起始佈景主題的主要原因有三:

  1. 完整註解,如果有心要成為開發者,如何寫註解會是程式碼品質的一項重要因素
  2. 已經建置好基本框架,只需要調整不同的屬性值便可以直接看到效果
  3. 趁機理解一些 PHP 的使用方式與程式邏輯,對未來選擇其他程式語言有幫助

結語

在開始踏入開發的領域時,很多人都會問「學什麼樣的語言最吃香」,這句話背後隱含著「什麼樣的語言最賺錢」。許多社團中的資深前輩,大多都會說「要看你想要解決的問題是什麼」,以及「專業比較賺錢」。

然而,以網站相關的產業來說,HTML、CSS 與 JavaScript 是基本架構,在選擇要學的程式語言 (PHP、Go、Ruby 或 node.js … 等) 時,可以說是必修科目。因此在開始煩惱想要學什麼語言前,先把必修科目唸完再來煩惱比較合適。

Eric Chuang
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料