Web 技術

11個切版學習資源與工具：The Odin Project、Codepen、DevTools

發佈日期: 作者:

說到學習切版，學習的資源和方法何其的多。有些人適合閱讀文章，有些人則適合透過影音來學習；有些人喜歡購買課程學習，有些人則偏好免費的資源。每位學習者適合的學習方式不同。因此，以下會根據不同類型的學習方式，各自分享我個人使用的學習資源。

切版是什麼，前端工程師帶你學習切版入門

完整規劃和複合式學習：The Odin Project

The Odin Project 是一個開源的線上課程，致力讓所有人都能免費取得教育資源，並能幫助學生找到適合的軟體開發工作。當中的學習資源和專案是由社群和志工們一起打造，這個專案也成功被一個 Coding Bootcamp 學習程式的學校贊助，因此直至今日，仍持續地被優化當中。

這是一個很適合新手的學習網站，假設你和當年的我一樣，對於寫程式還有很多不認識、不了解的地方，不確定這條路是否適合自己，甚至是你已經決定來嘗試看看，但又苦於沒有一個大方向的學習道路和統整後的資源，不知道該從哪著手——歡迎來 The Odin Project 走走。

在 The Odin Project 中，有不同的學習道路，如果你希望能學習全端的網頁開發，在完成基礎課程後，你能找到適合自己的課程包，如下圖。在這裡的學習道路上，並非單純的「開發技術傳授」，因為這些硬的技術和知識只是你轉職成為軟體工程師道路上的冰山一角。這裡還包含了許多軟知識，例如：轉職的利弊分析、轉職道路上會遇到的各種挑戰、轉職不同階段的心態調整、如何更正確和快速的學習、如何準備找工作等。不少轉職的學生都急於把開發技術學好，但都忽略了這些軟性的內容，而這些心態和心情的調整，往往卻是讓你能走得久，走得遠，學得更好的基石。

當然，如果你只想針對特定技術點和工具做學習，也能在首頁找到不同類型的課程。例如：想加強切版，就能直接點進下圖 HTML + CSS 的課程模組中。其中包含了基礎和進階的教材內容，你只需要跟著課程的順序一一學習和實作即可！

每個章節中大多包含明確的學習目標和清單、站內和站外的基本學習資源、進階的補充學習資源等。提供了複合式的學習資源：有文章類型、有影片類型、有文字和圖片的說明等。對於不喜歡只看文字學習的人來說，是加分的部分。

除了教材外，在學習完一個段落後，會請學生來挑戰一些有趣的專案作爲作業。例如其中一個章節就是要實作 YouTube 播放影片頁面，運用上一章節，學習在網頁中嵌入影片和圖片的技巧，非常有趣！最棒還不僅如此，你除了能上傳自己的成果外，也能觀摩其他學生的作品，甚至看到原始程式碼。下圖即是名為 Igor（GitHub Profile Page: https://github.com/igorashs） 這位學生的最終作品。
（作品連結：https://igorashs.github.io/embedding-images-and-video/）

影音和實作式學習：YouTube 教學影片

如果影音式的學習內容能提升你學習的效果，YouTube 絕對是你的好夥伴——平台上有非常多創作者錄製技術相關的介紹和實作的影片。對於初學者來說，可以先搜尋和關注幾個面向的影片：

1. 各項技術的教學
在切版時，會運用到非常多 CSS 的功能和技巧，例如：Grid / Flexbox / Positioning 等──這些都是切版前要學好的基本功！如果你好奇該如何找到這種類型的影片，你可以嘗試在 Youtube 上搜尋關鍵字「CSS + 技術關鍵字」，就很容易找到類似的結果。技術教學的影片，有些僅介紹大方向概念，有些則會透過程式碼實際操作展示效果，你可以依照自己的需求選擇，以下提供幾個範例的影片：

2. 手把手實作功能和作品

對於 CSS 的技術（基本功）有一定程度了解後，就能進到實作了──也就是如何將 CSS 技巧落地。例如：在學完 RWD 響應式網頁的概念和實作技巧後，如何真的運用在切版、又或是如何切版五星評價功能等，這些都是有趣的題目。在這個面向中，實作是很重要的，跟著講者們一起實作，並藉此學習對方的思考邏輯和實作技巧，對於切版的技術和知識是很有幫助的。以下提供幾個範例的影片：

3. 接收新知和趨勢資訊
這個面向時常會被忽略，因為許多人在經過前兩個階段後，就認為自己的實力已經很夠了。但實際上，前端的技術演進非常快速，最近所學習的知識和技術，或許在不久的將來就不再是最好的方法了。也因此，不斷的接觸和認識新技術是非常重要的。以下是幾個我個人有在關注的頻道。當然，如果透過前兩點的查找和練習，你已經有喜歡的幾個頻道，不妨可以先從追蹤和關注這些頻道開始：

常查找 CSS 資訊的朋友，應該都看過 CSS-Tricks 的文章，在 YouTube 上其實也有它們的頻道。在頻道中介紹了許多當前的網頁開發趨勢，關於 CSS / HTML / JavaScript 的主題都能在裡面找到。

在 Kevin 的頻道中，你能找到許多對 CSS 有深入介紹的影片，但最吸引我的，是他的影片長度都不長，且都簡單易懂，對於比較忙碌的學習者來說，能偶爾撿一些新技術，或沒碰過的功能，是很棒的。

DesignCourse 頻道中，除了有當前熱門的功能和趨勢介紹外，也有許多針對不同技巧和功能的實作，是很好練功的地方。頻道中不僅有 CSS 的影片，也包含許多網頁開發和設計相關的內容。

在 The Net Ninja 的頻道中，有非常多前端相關的教學影片。最棒的是，它包含了很多「系列式」的影片，也因此你能針對一個主題，有更全面的學習，甚至跟著講者完成一個個讓自己在完課後會滿意的專案。

影像和實作式學習：各種能透過操作看到成果的網站

切版能力要好，就需要把底子打好。學習 CSS 除了閱讀型教材和影片型教材，當然也能透過動手操作來學習和練習，這些都有助於增強學習效果。 另一方面，有些 CSS 功能比較複雜，沒有使用恰當，或如果學得不夠扎實，很容易實作出不如預期的成果，此時，藉由一些測試和 Demo CSS 功能的網站，能快速幫助自己釐清觀念和使用方法上是否正確。

以下舉幾個在這方面的學習資源和工具──前面幾項是讓你能透過遊戲來學習的網站，後面幾項則是幫助你測試和 Demo 功能用的網站。

開始前，額外補充一下：實務上，你會遇到的技術點和問題太多元了，如果你想找到這方面的相關資源，你可以嘗試搜尋的關鍵字是「技術點＋playground / 技術點 + game」，就有機會找到一些有趣或實用的網站：

透過幫助青蛙的遊戲闖關，練習 CSS Flexbox 不同屬性。

透過澆水灌溉的遊戲闖關，練習 CSS Grid 不同屬性。

透過各種 CSS 選擇器的使用，選擇到對的器皿、食物等的遊戲。

CSS :nth- 類型的選擇器不只一種，使用上很容易混淆，甚至容易因為觀念不清，選不到自己想要的元素，在這個網站，你能透過切換不同的 :nth 選擇器，直接即時看到最終會選到的元素，是開發上的好幫手。

在剛開始碰觸 CSS Flexbox 時，很容易被不同的屬性和屬性值搞混，如果底子不夠，很容易在切版時，瞎子摸象，不斷在猜哪個屬性和屬性值能成功套用上。這個網站能讓你透過切換不同的 CSS Flexbox 功能， 即時看到元素排版的效果，一目瞭然，是使用 Flexbox 切版時的好工具。

輕鬆快速調整 Grid 的設定， 並即時看到網格和元素排版的效果，是在使用 Grid Layout 在做排版的好工具。

實作練武的地方： Codepen

無論你跟著上面的教材和資源學了多少的知識與技能，最終都應該落於實作練習。就像學語言一樣，光透過閱讀課本和影片是不夠的──你需要大量的練習。但練習總需要有個「目標」，也需要有個「方式和地方」來練習。這個段落，會先介紹你在實作和練習切版時，可以發揮的地方：

  • 練武之地：Codepen

Codepen 絕對是練習切版的好夥伴──Codepen 像是個練習的沙盒，在你寫入程式碼後，就能立即呈現結果，也因此你能很即時的知道自己寫的程式碼是否符合期待。一切都在線上操作、執行和儲存，因此你完全不需要經過檔案儲存在本機上，也不需要懂如何部署等。對於不管是新手練習，或想要在線上先嘗試功能，都是很好發揮和練習的地方。

JavaScript 全端開發課程，16 週進度班帶你半年轉職工程師

一個範例的專案如下，在頁面上能快速撰寫 HTML / CSS / JavaScript，而下面就能立即看到結果。在完成後，也能在存取後，輕鬆的將這份專案分享給其他人，相當方便。

如果你想在專案中使用外部的套件或框架，例如前端切版常見的 Bootstrap 或 Materialize CSS，也能在「設定」中，直接載入進來使用。

分享一下我個人會使用 Codepen 的幾個時機：

  • 當在學習新功能時，需要有地方來嘗試把玩看看
  • 看影片或教材需要跟著實作時，想跳過專案建立和環境設定，直接開始寫程式碼
  • 練習切版時，將畫面切割成小區塊後，一個個先在各自的專案中嘗試看看，可行後，再融回主專案中
  • 與他人協作，需要先試做一個版本展示時，能開一個專案來嘗試，並分享給對方

練武的目標

有了練習的場地後，接著就是需要有一些能練習的目標。除了一般常見的 Todo List 或記帳本外，我更喜愛刻一些有趣的畫面或工具，一方面心情很好，另一方面，也能培養一些美感。以下會介紹幾個我獲取練習靈感的來源。

開始介紹前，補充說明：無論你想從哪獲取靈感，以新手來說，我都會建議從一些小功能或小畫面開始著手練習，再慢慢的把範圍擴大、把難度提升。例如：一開始能先嘗試做一個小按鈕，接著能進階到一個導覽列，最後才擴大到做一個畫面。

Codepen 上除了能練習外，其實也有展示非常多他人的作品集，小到一個工具，大到一整個完整的頁面，都能找到。如果不知道要以什麼作品來練習，可以瀏覽一下當前熱門的作品，挑幾個你常見網站的版型和工具來切版看看。

當然，如果有明確想練習的技術點，例如 CSS Flexbox 和 Grid，或各種工具，例如 Dashboard，也能直接透過搜尋，找到其他人的相關作品。

Codepen 中最棒的地方是：每個作品都有相對應的程式碼能參考。的確，並非所有程式碼的品質都是最好的，但透過這個過程，是有很多機會能觀摩其他人使用的不同做法，也是一個很好的學習方式。

以下提供幾個新手可以把玩的作品：

靈感來源：Dribbble

Dribbble 平台上有大量的設計作品，從一般的平面設計到各裝置網頁與應用程式的設計都有。一進到他們家網站，心情就特好，如果想找一些靈感，能到 Mobile 或 Web Design 的分類逛逛。同樣的，你也能先挑一些常見的頁面、區塊或工具來嘗試切版看看，例如：註冊表單、展示圖片的區塊、網站上方導覽列等。

以下提供幾個新手可以把玩的作品：

debug 工具：DevTools

切版過程中，最常遇到的問題不外乎就是你寫完了程式碼，但成果與你預期的不同，例如：元素排列的方式、元素的間距不如預期。又或是雖然如預期的呈現了，你不滿意成果，但一來一回修改程式碼與網頁預覽間非常麻煩，很想直接在瀏覽器中修改。

這時，Debug 的工具就是你最好的朋友了！接下來將介紹你能使用什麼樣的工具，讓你在往後練習時，如果遇到以上的狀況，就能立馬來使用看看了！

  • 瀏覽器 DevTools

幾乎所有瀏覽器都備有「DevTools 開發者工具」，在這裡，你能查看當前頁面 HTML 和 CSS 的結構和設定，也能即時的做調整和觀看修改後的結果。以上是針對切版常用的功能，當然在這個控制台中，也能透過 JavaScript 與網頁互動、查看網路請求等。

在主流的瀏覽器，如 Chrome、Firefox、Edge 中，Windows 或 Linux 系統下按 F12 / Mac 系統下按 Command+Option+I 就能開啟 DevTools。在任意網頁中開啟後能看到如下圖的控制台。你可以先點擊右上角的三個點來調整顯示的位置。

接著，你能點擊左上角的「元件選取工具」，並讓游標在網頁（DOM）裡各元件中游走，就能找到不同元件的資訊，與其在整個網頁結構中的位置與樣式的設定。

在右側的細節窗格中的樣式標籤（Styles Tab）裡，你能看到當前選定元素所定義的 CSS 樣式；計算標籤（Computed Tab）則是瀏覽器針對元素樣式的一些計算結果。你能在這直接對現有的設定做調整，它會立即套用在當前的頁面中──這讓我們能先在網頁中試驗看看成果，可行後再回頭去正式修改程式碼。

隨著時代演進，越來越多使用者不是透過桌機版來拜訪網站，而是使用手機或平板裝置。由於螢幕的尺寸不同，許多網頁都加入 RWD（響應式開發） 的設計，來確保網頁在不同裝置下，都能正常運作，也都能帶給使用者好的體驗。DevTools 中能找到類似如下圖中「裝置圖案」的按鈕：

點下去後，就能調整螢幕尺寸：除了能自行設定尺寸外，也能直接選定不同機型的裝置，瀏覽器會自動幫你切換成該機型的螢幕尺寸。此時，你就能清楚和快速地查看你的切版成果，看看在不同螢幕尺寸下是否跑版，也能直接在該尺寸下進行 Debug。

如何Debug ？從認識Chrome DevTools 學習前端優化Debug 技巧

本篇只介紹了幾個 DevTools 使用上的基本功能，帶你初步認識這個好夥伴。然而，今天所介紹的，遠遠不及實際上 DevTools 能發揮的強大功能──它不僅能幫助我們在切版時 Debug 用，在未來的網頁開發過程中，時常都還是會需要打開它來協助和加快開發與 Debug 的流程。如果想更近一步認識它，Firefox 提供了一段教學影片，手把手帶你認識開發者工具，也讓你懂得如何透過它來 Debug。

‍

  • Grid Layout

CSS 的網格系統是近期熱門的排版方式，也是許多人會接觸的一個技術點。所以在這邊特別花一小個段落來說明。網格佈局在使用上，經常是在網頁上先畫好一個二維的網格，並設定好網格的大小、間距等，確認網頁大方向的佈局是怎麼排版的，接著才會把元素一個個放進指定位置的格子中。

有時光是透過 CSS 程式碼在畫網格時，很難想像實際的樣貌；甚至在把元素放進網格時，很怕放錯位置等，這時就很需要有一個工具能將我們的設定視覺化。

因為網格系統是比較新的排版方式和功能，過去鮮少有瀏覽器的 DevTools 能支援這個功能，使得 Debug 起來很痛苦。當前針對網格系統做得比較完善，也發展比較久的是 Firefox 瀏覽器，我會建議大家在練習 CSS Grid 時使用 Firefox，借助其 DevTools，在開發上和 Debug 上有很大的幫助。

以下是一段官方的影片，過程是介紹如何使用 CSS Grid 來排版。在開發者開發的過程中，你能觀察她是如何借助 DevTools 的幫助，來加速其開發的過程。

補充：Chrome 從 87 版後，也針對 CSS Grid 新增和加強了檢視與 Debug 的功能，也同時開闢了一個小天地來讓大家透過遊戲的方式，體驗在使用 CSS Grid 做排版時，需要 Debug 的過程：

遊戲連結：https://developers.google.com/codelabs/devtools-debug-css-grid#0

官方文件連結：https://developers.google.com/web/updates/2020/10/devtools#css-grid