iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
1
Modern Web

30天切版臨摹!從模仿各大網站掌握商用級的前端HTML/CSS觀念系列 第 1

一起挖掘各大網站原始碼,掌握前端切版概念【30天切版臨摹 D1】

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; 的意思就行了!

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


下一篇
從 W3Schools 學習基本頁面佈局 - 前處理【30天切版臨摹 D2】
系列文
30天切版臨摹!從模仿各大網站掌握商用級的前端HTML/CSS觀念3

尚未有邦友留言

立即登入留言