從哪裏開始
當然，從最基礎的開始。這裏最重要的莫過於學會怎樣切割頁面，所謂切割，即能通過div標籤的嵌套方式進行頁面分割，配合少量的css樣式，勾勒出想要的，但並不美觀的頁面。若能至此，那麼就基本pass了。總結起來，即熟悉常用的標籤在界面上產生的效果。
對於小白，在學習階段，難免會碰到例如導航欄是怎麼切割出來的，毫無頭緒，怎麼辦呢？
打開瀏覽器，任意搜索一網頁，通過瀏覽器自帶的調試工具（F12進入調試）開始調試。具體如圖1瀏覽器調試操作圖所示。
圖1瀏覽器調試操作圖
簡單來說，即通過此類工具快速定位到所需查看的模塊，然後參照他人的做法，仿製自己的頁面。在前端學習過程中，個人認爲，大量的仿製爲重要的且必不可少的學習過程。
當頁面切割不成爲時，相關css樣式的使用當然也應跟進，儘量讓自己的頁面美觀。
從哪裏轉折
話說，當對一個頁面有足夠的的瞭解後，這裏的足夠即指的是當看到一個網頁，我們能比較快速的判斷其是通過什麼手段切割並製作其中的各個模塊，並通過實踐證明自己的想法切實可行。那麼，我們可以開始第二階段的學習了，即轉折。
現在，我們已會切割頁面了，一個網頁拿到後，對於其中的每個頁面模塊，我能判斷其使用了哪些標籤。那麼問題來了，我的界面還是那麼讓人糟心，怎麼辦呢？
這裏，我們就要學習一些前端的工具。如果說每一個網頁的製作都需要我們前端工程師一行一行的把代碼敲出來，那絕對夠嗆！
我們一定聽說過bootstrap，jquery等等啥的，雖然不知道它有什麼用，或者知道但是不會用。所以，在這裏就得學會，怎麼使用這些已開發好的前端資源。如果我說圖2導航欄圖是我花了一兩分鐘時間做出來的，可信嗎？
圖2導航欄圖
絕對可信，因爲僅僅是引用了bootstrap和jquery資源，並從教程上拖拽了一塊導航欄（附件中附有該demo，以及所需的資源包，源碼有註釋）。
值得一提的是，這裏我們需要做的，並不是跟着教程學習，而是找一個屬於自己的idea（若無，那麼依然可以仿製，只不過這次徐得保持功能及美觀，但不必全然相保持一致，理由就是同樣的功能實現，在界面上卻可以有不同的展示方式），使用這些工具，去拖拽，想要什麼，從教程上找到相應的模塊，拿到後通過不斷的修改實踐並應用，自然而然就會掌握。
值得注意的是，萬不可被教材教程牽着走，前端知識龐大，當然是用什麼即學什麼。
炫酷前端
如果說以上這些我們都會了，那麼一個普通的網頁開發任務，絕對難不倒我們。所以，爲什麼該有這部分呢？
理由很簡單，爲了高效。能完成一個前端項目，同時也要注意整個項目週期。因此，前端並不能佔有很長的項目週期時間，具體的後臺功能實現以及調試依然爲主體，且此過程難免會出現需求的變更而導致需要不斷的修改界面。
因此，爲了高效，我們當然得收集資源，即網站模板，各種插件，以及注意平時遇到的各種新穎實現的積累。
有了這些，那麼我們即可通過修改模板的方式，快速獲取所需的前端的功能模塊。後續不過通過不斷的修改調整，讓其更符合項目需求（附件附有一份後臺前端源碼模板）。
注：
1.bootstrap資源下載位置：http://v3.bootcss.com/
對於開發過程下載編譯且壓縮後的版本即可
2.jquery資源下載位置：http://jquery.com/
同理開發過程僅需下載編譯後的版本即可
另文章所提的demo等資源在csdn資源上可所搜到，博主已上傳