如何開始學習前端

本篇適用於沒有程式基礎的人,且會在想到時更新,(若有寫)更新記錄將會置於本文最下方。

而我會想寫這篇的原因,是因為最近開始有不少人跟我說想學習前端 / JavaScript / 程式,便決定來寫一下整個簡略的學習過程,畢竟 Don’t repeat yourself 是個工程師界的基本習慣,只要寫一遍文章之後被問就直接貼連結就好。

這篇文章只會抽象地講要學什麼,但不會細到去講該項目是什麼、語法是什麼,請自行去查(或我有附上的話也可以看看資料),畢竟身為一個工程師必備的能力就是搜尋與查文件。

學習基礎

這個階段就是「使用工具把東西做出來」。基本上要做出一個網頁並不難,只要:

  1. 在電腦裡建立一個 .html 檔
  2. 用文字編輯器打開它
  3. 隨便寫下一行字
  4. 儲存
  5. 用瀏覽器打開它,看到那行字

就完成一個最最基本的網頁了,雖然不合 HTML 的規範,但前端開發的最基本就是這樣:寫文字然後給瀏覽器讀。那些所見即所得的工具所做的事情也只是「你拖拖按按,它幫你生出對應的文字」,所以其實都一樣,寫字給瀏覽器讀就是了。

學習 HTML

要寫出一個「正確」的網頁,就請去搜尋 HTML 是什麼,瀏覽器就是根據這個語法去知道他要怎麼顯示頁面。開發的話我推薦下載 VS Code,之後也可以多看看其他編輯器,但新手我個人是推薦這一款。要另外下載的原因是,比起 Windows 和 Mac 內建的文字編輯器,這個工具可以在很多方面提供協助,省去很多麻煩。得到工具之後,就要學習 HTML,你應該要知道下面這些東西:

  • html, head, body
  • h1 ~ h6
  • p, a, img
  • ul, ol, li

有了這幾個 tag,大約就可以做出一個正確的網頁。這邊特別注意的是,只寫 HTML 的話,就只有語意的部分,不含樣式,所以千萬不要因為想把文字變大就使用 h1,這樣是錯誤的用法。

學習 CSS

樣式的部分則是要學習 CSS,這個就比較散落了,我覺得一開始可以先不要太注重樣式,之後再慢慢學就好,學習方式比較像是「要用的話就去查,查久了就會了」。(之前有看過一個 step by step 的教學,但一時找不到,找到了再貼過來)

可以先試著做出這種畫面 https://hackmd.io/@jyw/Hk6fIummN?type=view,雖然沒有很好看,但⋯⋯ 目標是要練習語法,就湊合著參考吧。(也歡迎推薦其他適合練習的題目或是參考文章)

會了 HTML 和 CSS,就可以做出最基本可用的網頁了,我之前的部落格也是純粹的 HTML 和 CSS 而已,就可以知道這兩者有多強大。

學習 JavaScript

雖然 HTML 和 CSS 就蠻夠用了,但現在這個時代講前端還是要會 JavaScript 這個程式語言才行,所以我們還是要學它。一樣請自行搜尋包含(但不限於)下面的這些東西:

  • var / let / const / =:宣告變數,以及 assign 的概念
  • 基本資料格式:字串、整數、小數、布林值
  • console.log:把東西印出來在 console 裡
  • if / else / else if:邏輯判斷
  • >, >=, ==, <=, <, !=:數值比較
  • for loop:重複執行
  • function:重用程式碼
  • 進階資料格式 [], {}:這兩個是什麼及其用途

看起來好像很多要學的,但反正就一步一步來,這些都是程式基礎,會了這些之後未來想要學其他 C/C++ 或是 python 都有部分概念是重複的。推薦可以用這個 codepen 來練習 JavaScript 的語法。

語法大致學過一輪後就可以開始分別練習了:

  1. console.log() 印出金字塔,像這樣
  2. 寫出閏年判斷的程式
    1. 西元年份除以4不可整除,為平年。
    2. 西元年份除以4可整除,且除以100不可整除,為閏年。
    3. 西元年份除以100可整除,且除以400不可整除,為平年
    4. 西元年份除以400可整除,為閏年。
  3. 學習寫出能輸出費波那契數的程式(比較難一點)

更多題目可以上網找 UVa online Judge 或是 leetcode 來練習,有些可能會需要資料結構或是演算法等進階技能,對初學者沒那麼容易,這邊放一個題目集的連結供參:小試身手

等到上面這些基礎都會了以後,就可以試著做一些複雜一點的東西:

  1. 做出一個簡單的 自我介紹頁
  2. 做出一個莫名其妙的文字處理機:霸凌產生器
  3. 做出一個網頁計算機(參考
  4. 做出一個 Todo List Webapp:TodoMVC

基礎之外

除了學硬知識之外,也應該要看看別人在學習前端的整個歷程,這邊貼幾則之前看到覺得不錯的文章:

剛好都是 Huli 的,他的文章真的品質不錯,我蠻喜歡的,也同步推薦 TechBridge 週刊,有了一定的基礎之後可以訂閱看看。

結語

上面的東西都熟悉後,大概就可以說自己會寫一點前端了。之後未來要如何和後端伺服器和資料庫溝通、要接觸哪些框架、要如何接 streaming、要如何寫瀏覽器套件、要如何⋯⋯ 就一步一步來吧,一開始先不用急,上面這些基礎打好,未來學什麼都快。

噢,文章最上面的首圖是之前和女友 A 與友人 T 去不厭亭踏青的時候拍的照片,因為覺得不錯但一直沒機會放,剛好畫面上符合「未來的路還很長」的意境,遂放之。