以下將介紹幾個實用的切版學習資源與工具

e Odin Project(完整規劃和複合式學習)

這是一個開源的線上課程，讓所有人都能免費取得教育資源，並幫助學生找到適合的軟體開發工作。當中的學習資源和專案是由社群和志工們一起打造，是一個很適合新手的學習網站。如果只想針對特定技術點和工具做學習，也能在首頁找到不同類型的課程。例如：想加強切版，就能直接點HTML+CSS的課程模組中。章節中大多包含明確的學習目標和清單、站內和站外的基本學習資源、進階的補充學習資源等。提供了複合式的學習資源：有文章類型、有影片類型、有文字和圖片的說明等。

YouTube 教學影片(影音和實作式學習)

如果影音式的學習內容能提升你學習的效果，YouTube 絕對是你的好夥伴——平台上有非常多創作者錄製技術相關的介紹和實作的影片。

1. 各項技術的教學
2. 手把手實作功能和作品(以下提供幾個頻道)

CSS-Tricks
Kevin Powell
DesignCourse
The Net Ninja

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

學習CSS除了閱讀型教材和影片型教材，也能透過動手操作來學習和練習，都有助於增強學習效果。以下舉幾個能透過遊戲來學習的網站：

Flexbox Froggy
Grid Garden
CSS Diner
:nth Tester
Flexbox Playground
CSS Grid Cheat Sheet

Codepen(實作練武的地方)

Codepe在寫入程式碼後，就能立即呈現結果，可以很即時的知道程式碼是否正確。一切都在線上操作、執行和儲存，完全不需要經過檔案儲存在本機上，也不需要懂如何部署等。很適合新手練習。除了能練習外，也能展示他人的作品集，如果不知道要以什麼作品來練習，可瀏覽當前熱門的作品，挑幾個你常見網站的版型和工具來切版看看。如果有明確想練習的點，例如CSS Flexbox和Grid，或各種工具，也能直接透過搜尋，找到其他人的相關作品

DevTools(debug 工具)

切版過程中，如果寫完了程式碼，但成果與預期的不同，可能是元素排列的方式、元素的間距不如預期。又或是如預期的呈現了，但不滿意成果，在修改程式碼與網頁預覽間非常麻煩，想直接在瀏覽器中修改。那這時，Debug 的工具就派上用場了！以下就馬上來介紹幾個實用的工具：

• 瀏覽器 DevTools
  幾乎所有瀏覽器都有「DevTools 開發者工具」，可以查看當前頁面的HTML和CSS結構和設定，也能即時做調整和觀看修改後的結果。在這個控制台中，也能透過JavaScript與網頁互動、查看網路請求等。
  主流的瀏覽器，如 Chrome、Firefox、Edge 中，Windows 或 Linux 系統下按 F12 / Mac 系統下按 Command+Option+I 就能開啟DevTools。在

• Grid Layout
  CSS網格系統是熱門的排版方式，也是許多人會接觸的一個技術點。網格佈局在使用上，經常是在網頁上先畫好一個二維的網格，並設定好網格的大小、間距等，確認網頁大方向的佈局是怎麼排版的，接著才會把元素一個個放進指定位置的格子中。透過CSS程式碼在畫網格時，很難想像實際的樣貌；甚至把元素放進網格時，容易放錯位置，這時就需要一個工具能將設定視覺化。因網格系統是比較新的排版方式和功能，鮮少有瀏覽器的 DevTools 能支援這個功能，使Debug起來比較困難。而當前網格系統做得比較完善，發展比較久的是Firefox瀏覽器，建議大家在練習CSS Grid時使用Firefox，再借助其DevTools，在開發上和Debug有很大的幫助。