[小練習] HTML+CSS 復刻 w3schools 網頁
土法煉鋼切版初體驗記錄
(先打個預防針：此篇僅作為學習兩周 HTML + CSS 的極新手檢討筆記，不包含其他框架函示庫的運用。)
最近利用零碎時間閱讀 w3schools tutorials，重新複習 HTML elements 和 CSS 語法的基本觀念。看著看著，想起學長姐說過的話，我突然有一個大膽的想法(?)
網頁切版，看再多教材、收藏再多密技文章、做再多筆記都很難直接吸收，唯有馬上捲起袖子練習實作，實作實作實作，才能把這個技能變成自己的。
之前的學習方式是照著教學影片講解，一步一步做出一頁式履歷。因為完全遵照人家的步驟走，沒有自己從無到有的實際操作過，很難內化學習到的觀念，也無法想像自己切板會遇到的問題。擇日不如撞日，既然我現在在看w3schools的網頁，要不今天就來練習肉眼切這個版吧！
…結果就是惡夢的開始。
這次決定不打開 Dev Tools 查看原始碼，想要試著自己排版看看。首先開開心心地選定臨摹頁面：
秉持著「由上到下、由左到右」的網頁架構口訣，將大致上的版面切分如下：
話是這麼說，但接著我馬上就犯了錯誤1：沒有先把整頁架構和內容準備好，直接硬幹
事先切成不同區塊，為的就是先寫好整個網頁的架構，分配容器名稱。但我好像失憶一樣，看到哪裡就做到哪裡，而且只放當前工作區塊的 HTML 內容，完全無法想像整頁的內容配置。所以上面的拆解圖根本是畫爽的…
再來是錯誤2：沒有事先決定結構性的命名方式
後來想想，我都是覺得需要用 flexbox 排版，才去做一個外層容器，而命名方式很不一致，一直幫每個元素亂取 class 名稱，取到後來重複性很高，只好用 「-」 來加字隔開，搞到最後我已經不知道寫到哪了… 應該要先從拆解圖就規劃好容器配置並做由外而內的「階層式」命名，而非想到缺什麼就補什麼。
錯誤3：沒有在一開始就做好全站設定
在一開始沒做好全站的 padding: 0px; margin: 0px; 設定，後面除錯時一直找不到導覽列跟頁面邊界始終有距離的原因，不管怎麼改容器的 margin 和 padding 我的導覽列位置都無動於衷，浪費了許多時間亂試。許多全站式設定應該在一開始就完成，例如引用外部資源字體、整份網頁的邊界對齊設定等等，在後續的排版上也會更加精準。
錯誤4：把 <i></i> 包在 <a></a> 外面
一直想不通為什麼我從 Font Awesome 引入的 icon 沒辦法設定輯 CSS 排版對齊的屬性，也不知為何 icon 超連結在 box-model 中顯示的寬度比其他純文字超連結還要寬上許多。後來檢查程式碼才發現，原來是把 icon 包在超連結標籤的外面... 馬上筆記 <a></a> 超連結中間可以塞入文字、圖片、icon等等，要做為最外層。
諸如此類的大錯小錯不斷發生，每一次除錯都是在驗證我有沒有真的了解基本觀念，解決問題的當下有點成就感。於是就這樣做了一個肉眼看起來87分像的頁面，切版初體驗終於落幕，可喜可賀。
後記
這次切版練習的過程分為三項，都各有收穫：
- 實作：一邊複習學過的概念從無到有做出東西、一邊要查找文件學新功能語法，都是在內化深化基本觀念。比起只看教學影片照做，實際自己運用元素、排版配置，才知道自己過去根本沒有好好理解各種排版原理。
- 除錯：有時候一個地方卡關很久會先把 HTML 內容塞著，CSS 就先跳過，等找到答案再回來修改；有時候是沉澱一陣子的問題會突然間想通；有時候是在查找文件的過程中，再從頭釐清一次各功能和元素的基本觀念，才發現到自己過去理解的方式不對。除錯的過程也是在幫自己的大腦改正不正確或理解不全的觀念。
- 檢討：把自己犯的好笑或重大的錯誤挑出來，記下筆記，提醒自己以後每個步驟都要謹慎一點、能先設定好的東西就先設好，能把結構先畫出來也先畫好並分割區塊和取名，才能省掉後續的麻煩和錯誤。
後來跟大神 Alan Syue 討論，發現六角學院有開切版直播特訓班，有更多更扎實的練習。之後應該會轉向這種學習方式，而不是自己亂槍打鳥隨便選一個網站就開切。
期許學會更多工具後，切版能更熟練更精準！
