自學系列 | Full Stack Web | 網頁全端入門學習筆記
我要成為一個無畏投入未知領域的新創工程師 — 我是寫 App 的，這是我的網頁全端學習筆記
為什麼取這個副標題，文章最底下會說明。簡而言之最近因為工作需要，我開始找網頁全端的入門線上課程。找學習資源前，我先列出了幾個需求：
需求 1. 前端＋後端一起學
因為是工作需要，我的時間並不多，所以最好是一套課程搞定全部。
稍微補充一下前端/後端是什麼：前端負責使用者看見的所有東西，像是文字跟圖片怎麼排版、要出現哪些酷炫的動畫…等等，後端則處理使用者對網站做出的指令/留下的資料，例如你對這篇文章拍了 10 次手，後端就把誰拍了手、拍了幾次…這些資料傳回資料庫，下次你再點開這篇文章時，就會顯示你曾經拍過手。
需求 2. 後端教的語言是 Node.js
理由同上，因為時間不多，我只想學一種程式語言就好，雖然後端的程式語言很多 (PHP、Ruby、Node.js、Python…)，但既然前端一定會學到 Javascript，後端就不想再多學其他，直接選 Node.js。
需求 3. 課程中會帶我做出網站，而不只是寫程式語言練習題
我大學時曾經用 W3School 自學過 HTML/CSS/Javascript，但當時沒有一個想做出的網站當作目標，而且 W3School 上面都是練習題，很快就沒耐心了。所以這次我想找的是：會帶著我做出範例網站的課程。
需求 4. 最好是免費課程
我先從免費的課程找起，發現大部分免費的課都不符合第三項，多數還是以練習題為主，而且後端教 Node.js 的課居然有點少… 我只好放寬限制，NT$500 以內還可接受。
後來我在 Udemy 找到一堂 The Web Developer Bootcamp ，趁著特價跟朋友合購，覺得教的很清楚，而且帶著做的練習範例網站都很不錯，就把上課的筆記打下來，變成這篇文章。
第一部分：HTML/CSS/Bootstrap
第一部分只關於「介面的呈現」，我們做出的網站不會動，按下按鈕不會有反應，單純只呈現資訊。HTML/CSS/Bootstrap 其實都不是程式語言，所謂程式語言是牽涉到邏輯、運算這樣更複雜的東西，程式語言會在第二部分學到。
HTML 就像網站的骨架，決定這個網站有哪些文字、圖片、按鈕、連結、表格、表單…等等，CSS 則是骨架的化妝師，決定每個元件的排版、顏色、大小。關於 CSS 的威力，可以看這個網站如何用相同的骨架(HTML)，不同的 CSS 創造出截然不同的頁面。
HTML
在 HTML 單元會學到文字、圖片、表格(table)、表單(form)、清單(list)、連結(link)…等元件的使用方式，並且做出底下這樣的東西，看起來很遜，只是單純的骨架，沒有排版跟美感可言…但別小看這個！
每個網站都是由這樣簡單幾個元件排列組合而成的！
忘記元件如何使用時，可以上 MDN Web Doc 網站查詢，或直接 Google「XXX mdn」(XXX 就是 table, list… 之類)，MDN 網站就像網站開發的字典。
CSS
CSS 單元會做出上面這樣的東西，有發現嗎？CSS 幫助網頁加上了好看的特殊字型，也可以限制圖片的大小與排列方式，還有隔線的顏色也可以隨意調整。
要使用字體時，可以到 Google Font 查找特定字體。由於字體種類太多，不是所有瀏覽器都支援，因此推薦到 CSS Font Stack 網站查看瀏覽器對特定字體支援的比例。
Bootstrap
Bootstrap 是一種 CSS 的 Framework(框架)，簡單來說，如果 CSS 是彩色筆工廠裡的各種元件，我們原本要自己組裝好彩色筆才能開始作畫，Bootstrap 就像有人直接賣一個彩色筆盒，裡面已經組裝好 12 支彩色筆，讓我們可以直接拿來畫圖，不用再從元件組裝起。
所以網站做起來非常快速、簡單，有一種自己是設計師的錯覺！
Bootstrap 單元主要會教 Navigation Bar (網頁最上方長長的一條)，以及排版時非常好用的 Grid System (網格系統)，這個單元會學到如何讓同一個網頁，在 Desktop、平板、手機等不同載具下，都能呈現出好看好用的排版。
第二部分：Javascript / DOM / jQuery (關於程式語言)
學完 HTML、CSS、Bootstrap 之後，我們的網站只是呈現出介面，還沒辦法跟使用者互動，比方說點下按鈕後顏色改變、按下 enter 時發出聲音…如果我們要讓網站可以根據使用者行為做出一些「反應」，那就需要具備「邏輯」的程式語言來幫忙了，下一篇就來學 Javascript 吧。
小記：關於副標題…
關於本篇文章的副標題，有點自嘲性質，但一部分是因為我看到底下這篇文章。它提到好的新創軟體工程師，應該無畏投入未知、不熟悉的領域，而且擁有強大的通才，畢竟在新創初期不斷變換方向是很正常的，在時間有限、資源有限的情況下，必須有快速學習新東西的能力。
如果喜歡這樣的自學系列，請幫我拍拍手 👏另外，我把之前寫的程式學習相關文章集結在底下的列表，有閒來坐 🤗
