[新手練習] 用HTML+CSS復刻w3schools 頁面 - Medium

[小練習] HTML+CSS 復刻w3schools 網頁. 土法煉鋼切版初體驗記錄. 哪張是臨摹，哪張是原稿呢？(慘了好像連87分像都不到…). GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinICaughtaCode[小練習]HTML+CSS復刻w3schools網頁土法煉鋼切版初體驗記錄哪張是臨摹，哪張是原稿呢？(慘了好像連87分像都不到…)(先打個預防針：此篇僅作為學習兩周HTML+CSS的極新手檢討筆記，不包含其他框架函示庫的運用。

)最近利用零碎時間閱讀w3schoolstutorials，重新複習HTMLelements和CSS語法的基本觀念。

看著看著，想起學長姐說過的話，我突然有一個大膽的想法(?)網頁切版，看再多教材、收藏再多密技文章、做再多筆記都很難直接吸收，唯有馬上捲起袖子練習實作，實作實作實作，才能把這個技能變成自己的。

之前的學習方式是照著教學影片講解，一步一步做出一頁式履歷。

因為完全遵照人家的步驟走，沒有自己從無到有的實際操作過，很難內化學習到的觀念，也無法想像自己切板會遇到的問題。

擇日不如撞日，既然我現在在看w3schools的網頁，要不今天就來練習肉眼切這個版吧！…結果就是惡夢的開始。

這次決定不打開DevTools查看原始碼，想要試著自己排版看看。

首先開開心心地選定臨摹頁面：HTMLTutorial(截自w3schools)秉持著「由上到下、由左到右」的網頁架構口訣，將大致上的版面切分如下：先將網頁結構切成不同區塊，「由上到下、由左到右」話是這麼說，但接著我馬上就犯了錯誤1：沒有先把整頁架構和內容準備好，直接硬幹事先切成不同區塊，為的就是先寫好整個網頁的架構，分配容器名稱。

但我好像失憶一樣，看到哪裡就做到哪裡，而且只放當前工作區塊的HTML內容，完全無法想像整頁的內容配置。

所以上面的拆解圖根本是畫爽的…做完上面但無法想像下面的內容如何，中途又要添加內容、更改容器配置手忙腳亂地添加內容再手忙腳亂地添加樣式與排版再來是錯誤2：沒有事先決定結構性的命名方式後來想想，我都是覺得需要用flexbox排版，才去做一個外層容器，而命名方式很不一致，一直幫每個元素亂取class名稱，取到後來重複性很高，只好用「-」來加字隔開，搞到最後我已經不知道寫到哪了…應該要先從拆解圖就規劃好容器配置並做由外而內的「階層式」命名，而非想到缺什麼就補什麼。

一堆看起來很像又意義不明的class名稱(左)，寫到不知道現在在改哪一個元素的CSS(右)錯誤3：沒有在一開始就做好全站設定在一開始沒做好全站的padding:0px;margin:0px;設定，後面除錯時一直找不到導覽列跟頁面邊界始終有距離的原因，不管怎麼改容器的margin和padding我的導覽列位置都無動於衷，浪費了許多時間亂試。

許多全站式設定應該在一開始就完成，例如引用外部資源字體、整份網頁的邊界對齊設定等等，在後續的排版上也會更加精準。

紅框處，無解的距離錯誤4：把包在外面一直想不通為什麼我從FontAwesome引入的icon沒辦法設定輯CSS排版對齊的屬性，也不知為何icon超連結在box-model中顯示的寬度比其他純文字超連結還要寬上許多。

後來檢查程式碼才發現，原來是把icon包在超連結標籤的外面...馬上筆記超連結中間可以塞入文字、圖片、icon等等，要做為最外層。

百思不得其解，為什麼我偏偏改不到Homeicon的排版？諸如此類的大錯小錯不斷發生，每一次除錯都是在驗證我有沒有真的了解基本觀念，解決問題的當下有點成就感。

於是就這樣做了一個肉眼看起來87分像的頁面，切版初體驗終於落幕，可喜可賀。

最後做出來的樣子(下面連內容都懶的複製了直接用Emmet快捷呼叫亂數假文代替)後記這次切版練習的過程分為三項，都各有收穫：實作：一邊複習學過的概念從無到有做出東西、一邊要查找文件學新功能語法，都是在內化深化基本觀念。

比起只看教學影片照做，實際自己運用元素、排版配置，才知道自己過去根本沒有好好理解各種排版原理。

除錯：有時候一個地方卡關很久會先把HTML內容塞著，CSS就先跳過，等找到答案再回來修改；有時候是沉澱一陣子的問題會突然間想通；有時候是在查找文件的過程中，再從頭釐清一次各功能和元素的基本觀念，才發現到自己過去理解的方式不對。

除錯的過程也是在幫自己的大腦改正不正確或理解不全的觀念。

檢討：把自己犯的好笑或重大的錯誤挑出來，記下筆記，提醒自己以後每個步驟都要謹慎一點、能先設定好的東西就先設好，能把結構先畫出來也先畫好並分割區塊和取名，才能省掉後續的麻煩和錯誤。

後來跟大神AlanSyue討論，發現六角學院有開切版直播特訓班，有更多更扎實的練習。

之後應該會轉向這種學習方式，而不是自己亂槍打鳥隨便選一個網站就開切。

期許學會更多工具後，切版能更熟練更精準！--1MorefromICaughtaCodeProjectrecords/Leetcode/StudyNotesReadmorefromICaughtaCodeAboutHelpTermsPrivacyGettheMediumappGetstartedIcaughtacode130FollowersTheadventureofawebdevnewbie👀FollowMorefromMediumAmandaMcNayChangetheColorofaSingleNavigationLinkinSquarespaceEnricoGrunerCSSpositionexplainedRitikBhardwajProjectFoodyMoodAlexanderMaxwellOgleTheGraceandTerrorofDOMManipulationHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable