切版是前端工程師必須要具備的技能，但到底什麼是切版？白話來說，切版就是要把設計師針對使用者需求所完成的設計稿，透過程式讓它在網頁中實際呈現出來。切版是很神聖的，因為少了這個過程，在網頁中就沒有畫面；少了畫面，使用者也就沒有任何方法，能獲取我們想提供的資訊和服務了。
*這邊小知識補充一下：切版多由前端工程師來完成。而實際上，前端工程師的工作內容很廣泛，有些工程師的工作就是在切版。但對於不少前端工程師而言，切版只是其工作內容中的其中一項而已。
切版和開發流程的關係
透過以往的經驗，來簡單談談其中一種常見的開發流程，讓讀者對切版這個過程在實際開發流程中的環節有些基本概念：通常在需求確立後，設計師會針對需求，完成介面、使用流程與體驗的設計。
在工程師實際開發前，會先跟設計師走過一次設計稿和流程，透過這個過程能理解設計團隊在規劃上的概念和想法，工程師也能藉由這個機會和設計師溝通實作上的可行性—如果覺得仍有優化之處，會再一起討論和調整成更合適的方向和方式。
切版的功能可大可小，複雜度也可能不同，在經驗還不夠充足的情況下，拿到設計稿切版和開發時，很可能會有以下這幾種反應：
- 被內容的豐富或版面的多元程度給嚇到，一時間不確定自己能不能完成，而過度緊張。
- 看到有些區塊的功能和版面設計沒實作過，感覺很難，而否定自己的能力。
- 因為時間壓力或一時的興奮，而立馬打開電腦開始撰寫程式碼。切版到一半，才發現可能無法實作出來。
- 實作功能時，發現當前方式無法運作，在還沒了解原因，就到網路上查找方法，無腦逐一套用直到可行為止。
這些都是初學者常見的反應，對於多數對開發者來說，通常會帶來負面的影響、降低了開發效率和程式碼品質，甚至對於學習和成長毫無幫助。探究原因會發現，事實上就是「經驗不足」—你的技術不夠扎實、你接觸的不夠多，不夠廣、你的實務經驗太少。
這其實就和小時候在學文言文一樣，如果底子不夠好，當你看到文章時，就會有種「彷彿看得懂，但其實不懂」或「文章看似短，但就是不了解含義」的感覺。
然而，這都能透過不斷的學習和練習，甚至面對不同的刺激和挑戰，來讓經驗值慢慢地累積。久了，不能說你就不會緊張，但你能夠更清楚地預想藍圖、可能遇到的障礙、什麼能做什麼不能做，以及你缺乏什麼，需要補足什麼，來完成眼前的任務。
開發前的心態準備與前置作業
- 確認開發目標
選定開發目標後，第一步要先做的就是「從頭到尾打量一遍需求」，從大方向到小細節一一確認有哪些是需要被完成的。這個步驟是最基本的，因為如果等到開發完後才發現少了哪些功能或效果需要加，運氣好可能直接修一下即可，但有時卻是會需要回頭調整架構，如此一來，就會讓開發效率降低。
- 將大問題切成小問題
有時開發所設定的目標是很大或很複雜的，一時間可能會不知道該如何下手。此時，將大區塊切割成一個個小區塊來思考，就猶如遇到大問題，先切成小問題一一擊破──當小問題都解決了，大問題也就不難了。以 Nextmeal 這個網站舉例（連結：https://nextmeal.herokuapp.com/#/），如果一下子要想怎麼刻出整個首頁，不如先從熱門餐廳這個區塊來剖析和練習（如下圖）；假使還是有點困難，也可以再切成一張張餐廳的卡片來看（如下圖一個紅色框框），那就更好下手了。
在這切割的過程中，你或許同時發現了許多重複性的區塊，例如一張張餐廳的卡片的樣式和內容排版都是一樣的，我們就能知道在程式碼、命名上，有很多能重複使用的地方。這對於後續開發上的效率就能有所提升。
- 深呼吸，查找資料
許多的功能「看似困難」，但實際上卻未必，有時難就難在「少了經驗」。因此在看到沒看過的功能時，先不要自己嚇自己，慌了手腳。我的習慣是，是先深呼吸三口，想想看有沒有看過類似的功能，或想一下可能可以實作的方式，甚至翻一下學過的技巧中有沒有能擦上邊的，再從那個方向著手，甚至先在 CodePen 上開個專案嘗試看看。假使還是沒有頭緒，資料查找就是很好的方法──我的天真想法總會是：「當我遇到了這個問題，很大的機率有其他前輩或大大們也有遇過」。
資料查找毫無成本可言，先搜尋一下總是無傷大雅，或許還能找到更簡單、更好的實作方法！
資料的查找仰賴於你有沒有搜尋對的關鍵字。把握幾個面向的關鍵字，能大幅縮小搜尋結果的範圍，以下列了幾個面向幫助你去組裝你的搜尋關鍵字。
開始前，額外補充：以下為繁體中文舉例，如果你想找到更多資訊，可以嘗試使用英文或簡中去下關鍵字，你只需要先將關鍵字翻譯成當地的語言即可。
– 使用的套件或框架，例如：Bootstrap、Element、Materialize
– 使用的語言，例如：HTML 、CSS、JavaScript
– 使用的語法或組件，例如：Positioning absolute、input 元素、彈跳視窗元件
– 想要達成的目標，例如：背景圖片滿版、實作客製化 radio button
– 遇到的問題，例如：圖片溢出、視窗無法開啟、點擊沒有效果
– 特別想要參考的網站或類型，例如：CSS-tricks、MDN、範例、心得
- 簡單畫 Wireframe 組織切版架構Wireframe 線框稿能用來呈現網頁的樣貌與排版佈局，如果規模比較大或功能較複雜時，也會包含使用的流程與規範。在目標明確的情況下，我們能事先思考和規劃網頁 HTML 的架構和佈局，讓我們在開發前，對於接下來要開發的方向和內容有一定的構思，而非走一步算一步。舉例來說，當我今天以下圖的導覽列做為練習的目標：
- 在實作前，能先簡單畫出類似下面這個 Wireframe ──大致呈現 HTML 的結構與佈局，也把 CSS Class 名稱也先定義好，如此一來，我們能確保在開發前，是經過一段縝密的思考。也由於已經勾勒出 HTML 結構和 CSS Class 命名，在開發時效率會更快：
- 學習切版時，繪製 Wireframe 是用來幫助思考，因此美觀並非重點。你可以用簡單的紙筆繪製，也能使用輔助性的軟體。以下介紹兩款我個人比較常使用的線上繪圖工具（如果你想尋找其他的免費線上繪圖軟體，關鍵字是：「online + draw wireframe + free」）：
Wireframe是什麼？認識網站UI設計排版草圖與資訊架構
draw.io 是一款線上繪圖軟體，透過樣板，使用者能快速繪製流程圖、時間軸、網路架構圖、文宣等。當然，其中也包含 Wireframe 的樣板，讓我們能快速繪製一張簡單的 Wireframe。雖然看似陽春，但功能也是不少，對於要畫張簡單 Wireframe 的我們來說，是相當充足的了。
如果你覺得 draw.io 的功能不夠用，你能嘗試看看更專業的設計工具 Figma。Figma 允許多人協作，且在你每次做出變更時，能自動存取到雲端當中。在介面上與功能上都更精緻，也更符合設計上的需求。對於較複雜的功能設計，也能依照需求安裝外掛（例如：嵌入圖表和分析圖等）。另一個很棒的附加功能，是當你在設計時，元素會產生相對應的 CSS設定，協助工程師在開發上的效率。
JavaScript 全端開發課程，16 週進度班帶你半年轉職工程師
更多的經驗分享談
對於剛起步學習切版的新手來說，你可能是第一次認真在觀察各種平常會拜訪的網站和裡面的功能，什麼都覺得很新鮮、很想嘗試──這種好奇心與熱情是非常珍貴的。
然而，有時將目標放得太大，一次想嘗試的太多，反而容易亂了陣腳，也容易因為難在短時間內做出成果，就落入了失落的狀態，甚至開始懷疑自己到底適不適合走這條路，這其實不是我們所期待的。
在本篇的最後，來分享一下我這一路走來的的經驗，希望有機會能讓大家能在接下來的道路上，少採一些坑：
- 大方向上，永遠都要抱持著那份好奇心與熱情，並為自己設下一個目標，期許自己在一定的、適合的時間內能走到。
- 將大目標切小──確認有哪些技術點需要拿到，並安排學習的優先順序後。至於有哪些技術點，你可以跟著或參考如 The Odin Project 或其他課程的設計，又或是查詢關鍵字「CSS / HTML / Front-end + roadmap」。
- 扎實的學習每項技術，最好針對那個主題，找一些練習切版的小目標實作。
- 隨著技術點越撿越多，開始找一些複合型的目標來練習。例如：客製化註冊表單，能練習不同的 HTML 和 CSS 結構與樣式設定等。
- 當技術學習到一定階段，實作也有一定的量後，開始嘗試多個區塊、多個頁面、為不同螢幕尺寸開發的目標練習。
- 最後，等技術底子夠了，未來則能去學習如何優化程式碼和架構──讓程式碼寫得更乾淨、更有結構性、可讀性與可維護性增強等。這些方向的查詢關鍵字如：「CSS Best Practice / Advance CSS / Write Better CSS」。
最後的最後，我想分享的是：在這條道路上，有太多東西需要學習了，況且技術也會不斷推陳出新，老實說真的很難學習的完。
所以再容我說一句「吸吸吐～不要慌！不要慌！不要慌！」
會這麼撈叨是因為在這條道路上的某個時間點，我也曾擔心自己是不是還學得不夠多、不夠好，甚至因為想快點把 Roadmap 上的技術點都採集完畢，迷失了自我，最後陷入失落的境界。
然而，在跟我的主管請益後，他只回了我一句話：「開心最重要！」至今我還是很感謝他——做一件喜歡和熱情的事情，你能一直做一直做，甚至做到廢寢忘食、渴望挖得更深。即便如此，你都走在對的道路上，而當時間久了，你的實力也會越來越強；相反的，學一些完全沒有興趣的領域，你會做得痛不欲深，我也相信這無法持久，甚至會想放棄。
祝福大家都能找到適合自己的道路，持續學習、持續練習、持續發光發熱！
11個切版學習資源與工具：The Odin Project、Codepen、DevTools
