TL;DR，簡介30天切版臨摹

30天，跟我一起 trace 各大網站的 HTML, CSS 程式碼，直接學習好的網站是怎麼被切出來的，用最高效的方式累積實戰經驗。

這裡不教基礎語法，而是教你如何組合基礎語法，切出商用等級的網站。告訴你為什麼某網站某段code要這樣寫，其背後有哪些考量。

內容主要涵蓋 HTML/CSS 切版、RWD、跨瀏覽器支援，其他像是 Accessibility、語意化、SEO、可維護性、效能等，若有看到值得提的也會順便講。

本系列適合對象是學過基礎 HTML/CSS 語法的人，知道 div 和 span 的差別，以及 position: absolute; 的意思就行了。

我是誰，為什麼想當鐵人

嗨！我是 Eason，我是一位前端工程師。從高中自學第一行 HTML 語法到現在六年過去了，也在新創公司搞了兩年的前端。

我的前端學習歷程，個人成長受限於公司需求

我一路走來一直是拜 Google 為師，需要什麼功能就查什麼，一直沒啥時間有系統地鑽研新技術，個人成長很大程度受限於公司需求是否多樣。

有時候公司產品每週的需求都不同，這週要切版出一個有很多酷炫動畫的新頁面、下週實作自訂樣式的PDF檔預覽功能、下下週要調校 Google Tag Manager 的追蹤碼失效問題...，雖然很辛苦，但每天都在研究新東西，個人成長就飛快。

但也有些時候新需求其實只需要舊技術，把A頁面的表單改改文字變成B表單，把C專案的上傳功能複製到D專案...，這時候就沒啥技術含量，毫無反應，就只是個Ctrl-C、Ctrl-V工程師，成長的就只有體重。

工程師的職業生涯很短暫，不能把時間全浪費在重複性工作，我想把個人成長的主導權拿回自己手上，

今晚，我想來點鐵人賽

我常常在歷屆鐵人賽的文章查到我需要的東西，受惠很多，剛好最近鐵人賽又開始了，決定飲水思源，也來貢獻一點自己擅長的前端切版，系統性的把自己踩過無數坑後，淬煉出的切版經驗記錄下來。

為什麼我們要 trace 別人網站的程式碼

前端切版易學難精

前端三本柱：HTML、CSS、JavaScript，要學完基礎語法不難，認真看的話，一個禮拜就可以看得差不多了，再花一個禮拜排列組合一下，就能組出一個有內容的網頁了。但是要寫出一個漂亮、完整的網頁，要考慮的東西還有一大堆：

• 響應式設計 RWD
• 跨瀏覽器支援
• 無障礙設計 Accessibility
• HTML 語意化結構
• 搜尋引擎優化 SEO
• 多語系 Localization
• 程式碼可維護性
• 效能、圖片壓縮

這些也要掌握起來的話，就很花時間了，而且比較難依賴幾篇教學文章，就學完每一個面向，更多時候是靠大量實作和踩坑經驗累積起來的。

更好的學習方式：Trace 別人的 code

你會遇到的問題，每個網頁開發者都會遇到。但別人克服了這些問題，寫出了優良的程式碼，通過他們公司層層審核，上架到了網站上，並且經過了無數使用者摧殘，依然屹立在那裡為他們公司帶來價值。此時，我們能對那段程式碼做得最好的事情，就是按下F12開啟開發者工具，研究那段code如何運作，學習背後的思路。

「好的藝術家抄襲，偉大的藝術家偷竊。」

直接學習其他工程師的心血結晶，才是最有效率的學習方式。而且切版其實也符合80/20法則，80%的版面只需要20%的語法就能實現，與其埋頭苦幹搞懂所有HTML/CSS語法，不如看別人是怎麼寫的，找出最重要的20%語法重點掌握！

但是注意不是要你直接複製別人整個網頁code，放到自家網頁上，這樣會有授權的問題。而是去猜想別人為什麼要這樣寫，學習背後的關鍵概念，然後用在自己的程式裡，自己的code還是要自己寫啊XD

本系列內容規劃

本系列內容主要涵蓋 HTML/CSS 切版、RWD、跨瀏覽器支援，會透過trace其他網站的code，研究別人的實作方式、取其精華並重新復刻，過程中若有發現其他值得提的議題，像是 Accessibility、語意化、SEO、可維護性、效能等，也會順便探討。

預計大綱如下：

• 如何挖掘網站原始碼
• 如何找到值得參考的網站
• 5~10 個網站的原始碼分析
• 切版輔助工具推薦（瀏覽器extension等）
• 結語

本系列適合對象

本系列適合對象是學過基礎 HTML/CSS 語法，想要進一步提升實力，切出完整網站的你。
只要知道 div 和 span 的差別，以及 position: absolute; 的意思就行了！

讓我們一起加油！一起成為前端切版大神！