JavaScript 菜鳥課程1&2: HTML&CSS

自學 Python 一陣子，也自己在外頭上了不少課，感到程式語言是一種重要且也用的工具，很希望自己的學生們也有機會接觸，於是我在自己可動用的經費項目下，籌辦了一堂程式語言課程入門班，從基本的語法開始教起。

一開始原本想教 Python，但跟授課老師深入討論後，決定以 JavaScript 做為教學語言。選擇 JavaScript 做為入門語言有幾個因素：

1. 門檻較低，語法和 Python 一樣相對平易（相較於難度極高的 C家族）
2. JavaScript 是專寫前端網頁，可以直接看到成果，對初學者來說成就感較高
3. 個人基於私心想了解前端語法 （因為之前已學過後端的 Python XD）

這門課重質不重量，總共只收了 8 位學生。

--

第一堂課，從基礎的 HTML 和 CSS 開始說起。這堂課補足了很多我先前上爬蟲專班時的基本知識，上起來是津津有味。補記幾個課堂筆記如下：

1. 網頁的 HTML 結構必然包含html、head、body 這3項大標籤，head 決定網頁的編碼和頁面名稱，body 則是主要內容+結構。
2.  html 就可做到基本的網頁編排，但現在大多會搭配CSS做美編和各種調整。
3. 所有的標籤都是 1 組 2 個，前後包夾，一層又一層，通常是外層標籤決定內容呈現的大方向，內層標籤再做各種微調。
4. 早期網頁都是用 table(表格) 來做排版。table 的寫法是用 tr(列) 包住 td (欄)，不是很直觀的概念，結構非常制式化、沒有彈性，稍有修改就會牽一髮動全身
   範例：
   
5. 現在排版多習慣用 div，類似區塊的概念，div 裡面再放 div，形成一層層的巢狀結構。
6. 在過去，並排且左右置中是一項非常挑戰工程師的任務，但現在用CSS 的 display flex 功能就可以很輕鬆解決這個難題。
7. 「換行」在程式語言中沒有意義，但用某些語法（例如div）後會有自動換行的功能。
8. class是一套屬性設定，可以預先設好特定的字體、顏色、排列方式、預留空間等等項目，並為之命名，套用到某些div上，這些div就會呈現出同樣的編排模式，是一種非常方便且聰明的做法。

關於網頁的基本排版html 和css 大概上了兩堂課，回家作業是要摹寫出 Facebook 的登入頁面，就是下方這個大家都很熟悉的畫面，頗有挑戰性，寫好之後再與大家分享。