哪些網頁適合前端新手去模仿？實踐過程中需要注意什麼？

01-14

問題背景：我看完了W3School的html與css的課程與實例，讀了兩遍《head first html css》並做了相應的理論知識總結。現在想使用 html+css 模仿一些的靜態頁面，嘗試幾個頁面的模仿之後，發現特別容易在CSS的布局上卡殼，嘗試去讀頁面的源碼，卻發現源碼都是龐然大物，叫我無從下口。在此舉一例：知乎首頁的導航欄（頂欄）。
問題定位：各位前端前輩能不能分享一下自己起步時的實踐經驗——
1.我這個階段需不需要做一些css小的實例去鞏固基本知識？如果必需，有哪些實例資源推薦？

2.如是模仿靜態頁面，該選擇什麼樣的網頁去模仿，有代碼量少的典型頁面推薦么？
3.如果自己原創頁面，怎樣的頁面適合CSS的基礎知識實踐呢？
4.針對css布局知識點，能不能分享一下學習心得？
5.由於時間緊張，我希望能用1-2個月的非工作時間（工作日晚上2-3小時以及周末）能寫一些基本的動態頁面，不鑽研磚頭書可不可以上手？當然，如果有非常適合的實踐書推薦自然更好。

PS：其實我更多想知道大家在這個階段是怎麼突破瓶頸的，如果能對上面任何一個小問題有針對性的回答，那就再好不過了。

1.我這個階段需不需要做一些css小的實例去鞏固基本知識？如果必需，有哪些實例資源推薦？

你需要以模塊化為基準做一些商業網站的單個部件，如登陸 form，導航條，商品卡片。要追求精緻，hover 效果，瀏覽器支持等都要加上。說白了你這個階段從學習跨到可以用。

2.如是模仿靜態頁面，該選擇什麼樣的網頁去模仿，有代碼量少的典型頁面推薦么？

模仿靜態頁面可選擇「博客主頁」，「單頁廣告」和一些「論壇」去模仿。這些都不需要大量代碼。學習的圖片和網頁內容的結合。什麼地方是img，什麼地方是background。當然，排版也是要學的。不能只會套模版。

3.如果自己原創頁面，怎樣的頁面適合CSS的基礎知識實踐呢？

原創頁面就給自己寫個介紹信好了。按照乾淨 &> 規範 &> 圖片 &> 花哨進行原創設計。

4.針對css布局知識點，能不能分享一下學習心得？

先學會什麼是position，再學會display，再學好網格。之後多出來的時間看flex。

5.由於時間緊張，我希望能用1-2個月的非工作時間（工作日晚上2-3小時以及周末）能寫一些基本的動態頁面。

你如果1-4都做不好我不建議你學動態頁面。因為你會丟了西瓜撿芝麻。除非你以後不想做html css 專門做javascript 那你可以開始學 jquery 的 javascript 了。但是等你學會之後會發現大家都在用react什麼的。就又迷茫了。然後無限循環。學好靜態頁面是前端工程師最重要的部分。

我教程中三個案例。

不用table用css做布局。

不用js用css做多級下拉菜單。

什麼都用上做圖片滾動欄，然後嘗試不用全局變數、嘗試數據分離js生成html。

零基礎獨立完成會有大收穫。如果上網亂搜了就不可逆了。

收集各種重構練習或者面試的PSD去練習

另外推薦一個我寫的文章頁面重構

書的方面可以看看

CSS禪意花園

網站重構

css基礎可以看,CSS權威指南

最重要的就是多做多練，看那些書只是讓你記住了有哪些標籤屬性，

你現在要做的是用這些標籤屬性做出一個簡單的頁面，然後再兼容主流瀏覽器。

建議先從百度首頁開始，學習怎麼布局，然後找個註冊頁面練習，多練習幾個以後你就自然而然的發現有了進步，祝你成功。

有效練習時間太少，幾乎不可能，該走的彎路都會走的，少不了。