阿嬤成為網頁前端工程師的下一步

儘管篇幅長短不一，我們在這 30 天當中討論了怎麼寫 HTML 標籤、CSS 樣式，以及如何使用 JavaScript 與 JQuery 操縱 DOM。到這邊，各位阿嬤應該有辦法獨力寫出一個單純呈現資料的網頁了。這是我們成為網頁前端工程師的第一步。

那麼，我們的下一步會是什麼呢？

在切版的部分，儘管我們已經在貼紙簿的練習中，學習了基本的版型；不過，我們是否能夠給出固定的格式，讓我們不用每次遇到切版，都重新寫一次樣式呢？格線系統 就是為此而生的規劃方式。我們在學習刻出格線系統時，也會對於整體網頁的布局規劃更加熟悉。

另外，如果我們想要更快速地開發出網頁常見的元件，例如蓋板橫幅，折疊式卡片，按鈕等等，都已經有人替我們開發好了。例如 Bootstrap 這個套件，就可以幫助我們快速寫出這些元件喔！假使需要些常見的 CSS 樣式，也可以使用 Tailwind 這個已經寫好的類型屬性庫。

值得一提的是，我們這 30 天中提到的 CSS 樣式並沒有條件判斷或迴圈的功能；因此，我們也有 SASS/ SCSS 這些工具，幫助我們模擬、也縮短與 DRY 化重複的 CSS 樣式。

網頁前端設計其實還有個分支是 CSS 動畫，這並非所有阿嬤都會需要用到；然而，隨著視覺互動網頁逐漸變成潮流，CSS 動畫也越來越普及，所以算是很有發展與投資潛力的一項技能。

我們在 JavaScript 的介紹中，其實只論及最簡單的皮毛。我們並未提及匿名函式、陣列的進階方法等等重要技巧，更不用說底層運作原理與物件導向－－而這也是各位阿嬤在後續學習中應該領會精通的。

在網頁互動方面，我們經常會需要使用者輸入資料。因此，我們也需要學習網頁的表單該怎麼寫，以及使用者按下「送出」按鈕後，這些資料怎麼被傳到後端，又怎麼在傳送過程中，保持資料安全。

最後，我們在整個網頁渲染的過程中，可能會需要和後端要些資料來即時渲染。然而，由於神燈精靈在 JavaScript 這個方言下的習慣，它不會等待後端將資料回傳後，才開始渲染資料，所以就算我們順利拿掉資料，神燈精靈還是沒辦法把這些資料渲染出來。因此，我們必須用些方法請神燈精靈等待；這種方法叫作「非同步」，也是網頁前端工程師的基礎素養。

儘管 30 天的鐵人賽很長很操很想死，但是對於學習之路而言，也只是個非常非常小的階段。希望我在這 30 天的努力，能夠化作各位阿嬤開始學習網頁的小小助力，讓各位阿嬤覺得網頁或程式其實不難，只要有好的講解，任何人都可以享受寫網頁的樂趣！

那麼，就預祝各位阿嬤
活到老學到老！

Sincerely,
Logos