經常會有讀者朋友加我後，過來問，我是自學的前端，可以寫一些簡單靜態頁面，如果我想進一步提升自己，請問我應該怎麼做？今天我結合這個問題，梳理了一下自己這些年的一些經驗，跟大家分享一下，也希望對大家有幫助。
學個工具，依葫蘆畫瓢, 先學會實現效果，這個很重要
作爲剛入行的新人，先去仿一些頁面的實現效果，是成長的必經之路。不要覺得這是一個沒有含量的事情，覺得丟人，如果你能把別人實現了的效果，用自己現階段的知識，也將其實現出來了，這樣不僅可以增加你的自信心。還能更加理解CSS，HTML語言規範。
在這個階段，你還需要選一款適合的自己的開發編輯器工具。
比較常見的前端開發編輯器，有WebStorm，Sublime Text ，Notepad++，Dreamweaver，HBuilder，Visual Studio Code，Atom，Aptana等，但是這些工具各有優劣，只要自己覺得合適就可以了。總之，你的目的就是把頁面效果先實現了，然後選一款工具用起來，慢慢熟練。
同類型的工具，當你熟練掌握一個工具的時候，你再去學習其他同類型的工具，都是非常容易的事情，上手也比較快，只要你完成了從零到一的積累過程，你從一到十這個階段，也會快一些。
記得，我當時自學入門前端，我是先學的Dreamweaver，後來換Sublime Text。當學Sublime Text的時候，學習成本就相對低很多。
在後來的工作中，有次項目，公司要求大家統一採用WebStorm，那時候，我也是第一次接觸WebStorm這個工具，後來爲了配合團隊，就把Sublime Text 換成了WebStorm，也是拿來就用，也沒有特意去學習過，就是在項目，如果遇到不懂的地方，然後會去查看，關於快捷鍵的掌握使用，自己在寫代碼的時候，學習刻意去使用一下，然後稍微用心記下就可以了，也不用像小時候讀書那樣去特意背誦。
在這個階段裏，你只要看見自己喜歡，或者自己目前還實現不了的一些效果，你就努力去模仿練習，去看一下別人的源碼，是怎麼寫，怎麼實現的，然後自己跟着寫一遍，這個階段的學習原則只有一個就是依葫蘆畫瓢，把別人已經寫好的界面效果，自己動手寫一遍，把它實現出來。如果還沒有開始學習js，一些交互效果，也可以先放棄。可以放在語言專題練習裏。
在這個階段，看到網上各種效果還需要將其分類收集起來，可以慢慢練習，如果現階段，實現不了，也沒有關係，等到知識累積到一定厚度了，自然就會了。
同時，在這裏，我也給你推薦一個學習網站，https://codepen.io
這個網站裏面有很多炫酷的效果，可以在線進行編輯代碼。你可以先收藏起來。
除了進行頁面效果的初步刻意模仿練習以外，你還需要進行效果專題的模仿練習。
對於效果專題的模仿練習，主要是爲了解決某類問題。比方，圖片輪播效果，這個也是我們經常用的一個效果，但就是這麼一個效果，它有很多實現的方式，現在可以用純CSS3直接實現，也可以用JQ插件，還可以用JS，總之，不管用那種方式，你的目的就是實現圖片輪播的效果。
而當你熟練了之後，你就會知道，什麼情況下，選擇哪個方式來實現比較合適，練習模仿階段，可以先不用太考慮這個問題，包括瀏覽器的兼容，你都可以先忽略，等到效果實現了，你再慢慢去分析研究。
在專題效果練習時候，你除了看一些網站的效果，你也可以去特意找一些與你練習階段相關的效果來模仿練習。
我們除了對專題效果的練習，我們還需要對語言的專題練習，其中這個跟前面的專題效果練習差不多。
像我們前面說的，圖片輪播的效果，可以用CSS3實現，也可以用JQ，還可以用JS，但是不管哪種方式，目的都是一樣的。
而我們對專題語言的練習，目的是爲了，更加熟悉和熟練使用裏面的一些特性。而不是單純的實現效果了，在這個時候，我們就需要考慮他們的兼容性，以及具體應用場景，擅長解決什麼問題。
比方，我們對CSS3的練習，但是CSS3可以解決很多以前不能解決的問題，像圓角，以前都是用圖片，現在就幾行代碼就可以搞定了。但問題就來了，同樣是圓角，但圖片沒有兼容性的問題，而用代碼就會有。
因爲在實現的時候，你需要考慮，它的屬性，那些屬性瀏覽器顯示是沒有問題，那些是有問題的，有問題的，又有什麼解決方案。
總之，我們先模仿，然後才能熟能生巧，最後纔是融會貫通。
不管怎麼樣，都不要看不起模仿練習這個階段，我們每個人學習都是這麼過來的，就像小孩子成長一樣，肯定是先練習走，然後再練習跑；對於技能的學習，我們也是先進行大量的練習，然後纔是自我創造。
在這個階段，也是磨練心志的階段，需要你靜下來去好好學習。不能太浮躁。更不能急於求成。
就連達芬奇這樣的大畫家，在開始學習繪畫的時候，都是通過大量模仿練習，而我們寫代碼，其實也是一個畫畫的過程，只是我們用的是計算機開發語言，達芬奇用的是畫筆，工具不同而已，本質都是相同的。
包括後期，學習框架也可以採用這樣的方式方法來進行學習。
我想做一個自己的個人站點，需要怎麼去實現？
我們經過了前期大量的模仿與學習，在下一個階段，我們肯定都會想寫一個屬於自己的站點，這個想法沒有錯，當時我也是這麼幹的，因爲當你會了很多東西以後，出去找工作，HR或者需求部門的面試官，也會問你要一個之前的線上作品，看看之前寫的界面效果有那些，是否可以勝任他們的工作。
這個階段，爲啥要去做一個屬於自己的個人站點呢？
第一，就是爲了系統的瞭解整個開發流程，包括那些階段。
第二，通過自己的搭建的站點，持續維護營運下去，說不定會有不一樣的收穫，雖然大家都說，現在已經過了人人建站的浪潮了。
但是作爲一個開發人員來講，建一個自己的獨立站點還是非常有必要。像我們熟悉的阮一峯，張鑫旭，他們都是建有自己獨立博客站點，而且瀏覽量還不錯，現在可以接一些廣告業務，雖然這些都是後話了，但是做一個站點，也是爲了磨練自己，學習堅持去做一件對自己有用的事情。
下面我們就來聊一下，做一個自己的獨立站點需要經過那麼些階段。
其實，我們在企業開發項目的時候，都是有，開發需求，設計，開發，測試，營運維護等崗位人員來進行配合工作，但是我們在做自己個人站點的時候，就沒有那麼多人蔘與進來，從頭到尾，就只有你一個人。
所以，不管怎麼樣，它們的流程還是一樣的。
1）個人站點，如何定內容開發需求
在這個時候，我們就要考慮，我做一個什麼類型的站點？主要內容有那些？
內容，是一個站點的靈魂，一個沒有內容的站點，就好比一個擺設的花瓶，雖然我們不要求內容高深與豐厚，但是，也不能只是一個空架子。
就拿我最近在做的一個項目【有課網】來說，開發需求，設計，文案內容，目前都是我一個人處理。
當時，定【有課網】的時候，我想了很多，到底做成什麼樣？最後，我定下來，我就做5塊內容：編程，設計，寫作，英語，攝影，爲啥選這個5塊內容呢？
編程，是我從畢業到去年一直幹着這個活，這個是我非常熟悉的領域。現在也依然把當成副業在進行中，其次，我想一直繼續下去。所以定了這個內容。
設計，是我後來完全自學入門的內容，並且，我現在也是一名專業的設計師，擅長UI 設計，平面設計，定這個內容，是想分享與記錄總結一些自己的學習經歷。並且達到不斷提升自我的目的。
寫作和英語，我覺得這個是大家都應該掌握的基本技能。我們從上小學開始，我們就學習語文，學習寫作文，這個也應該是人人都會的技能，雖然，我們不要求人人都能靠寫作，靠英語爲生，但是，能夠熟練掌握寫作和英語，不管是在生活中還是在職場都是加分項。所以就把這個內容定下來了。
攝影，通俗講拍照，也是現在人人都喜歡的事情，雖然我們不需要成爲非常專業的攝影師，但我們看見好風景或者美食時，我們都會想總要通過自己手裏的手機或者相機記錄下這一刻。
其次，我選攝影這個內容，還是一個目的，就是，我現在想通過自學攝影技術爲設計來採集一些一手素材。如果我想做一些屬於自己的創造作品的話，我就必須要採集一些獨一無二的素材。
所以，我就這樣把【有課網】的主題內容確定了，並且這些技能，也是在很長一段時間裏，不會被淘汰的技能，也是可以人人學習的技能。
這個就是開發需求，自己給自己定一下，這個時候，你就可以來想，你的要做的網站，主要想給你的用戶呈現什麼內容？是分享編程知識，還是分享一些自己的見聞奇事，還是其他什麼內容？
當然，你也可以，你想學習什麼內容，然後放自己最不擅長又最想學習的內容，這樣你可以一遍學習，一遍定期營運維護你的站點。
另外，我們在一些事情的時候，我們先不要考慮去幫助或者改變別人，我們首先要考慮幫助自己，解決自己的問題，然後再考慮去解決別人的問題。因爲改變自己比改變別人來得容易。
2）我不會設計，應該怎麼做？
這個設計對與很多人來講，估計有點難，但是我們沒有必要必須去設計一套完整專業的設計稿，你的目的就是練習自己寫代碼，熟悉整個開發流程，所以，這個設計，你只要會用筆，都可以完成。
首先，在紙上用筆畫個大概佈局，具體放什麼內容，可以自己先列一個大概。
1、我的站點，是要什麼顏色，可以在紙上寫下來，是紅的，藍的，橙色？選個自己認爲好看喜歡的顏色即可。
2、站點，菜單欄，需要放幾個內容，具體哪些內容。
3、我想爲站點做個banner，輪播圖效果，那輪播圖片放幾張，是通欄還是跟頁面寬度一樣等等等，
4、站點主體內容放什麼，怎麼佈局，是兩欄式，還是三欄式，都有哪些內容，等等。
5、站點底部版權的部分，放那些內容
總之，這些都可以通過一張紙一支筆來完成，其實，就是畫個草圖，把佈局與內容記錄下來。
這個也非常簡單，也不需要你非要精通PS，然後出一個專業的PSD設計稿。
再說了，我們是自己做站點，暫時沒有，因爲，你的目的就是練習寫代碼。
如果在這個時候，你沒有一點想法的話，你還可以去網上借鑑一下別人的個人站點，看看他們都是這麼呈現自己的個人站點，你也可以突出自己的一些個人特色。
3）開發
開發，你的強項來了。可能很多人有會說，我只是在企業負責某塊內容，並不瞭解怎麼去進行前後臺內容的銜接，所以，這才需要你去進行開發一個個人獨立站點。
前面，你已經在紙上畫過大體框架了，這個時候，你就根據前面的圖紙，用你的方式將其實現出來就可以了。
如果你寫前端，那後臺你就可以採用一些常用的CMS來實現，如，DedeCMS，Wordpress，PHPcms等，反正，這個也很多，但是我建議你採用，大家比較常用的CMS，因爲這樣的話，當你遇到問題，你可以在網絡上找到解決方案。
如果你只寫後臺，那你前臺也可以交給一些前臺框架來處理，比方我們熟悉的Bootstrap，jQuery UI，layui，H-ui，SUI等，至於他們的優劣與相應特色，你可以自行去做一下功課，我在這裏只是提供一個思路。
4）測試，營運，維護
這個測試階段，就是將頁面完成了。然後除了測試外，你還需要購買一個域名，與一個服務器，把你寫好的代碼，發佈到你購買的服務器上，通過服務器做域名解析，綁定以後，就可以通過域名來訪問你的站點了。
這個時候，你需要做的就是營運與維護的工作，至於怎麼去做，也是需要去簡單學習一下，如果你喜歡，你也可以深入學習，畢竟這個也是專業領域的東西，我對這個涉足不多，就不多說了。
如果後期，涉足多了，我也願意與你一起分享探討。
養成不斷總結分享學習的好習慣
這個也是我經常提的一點，我們需要堅持學習，不斷進步，哪怕今天只是學習了一個很小的知識，經過不斷積累，那也是可以提高你的工作效率。
1）養成收集分類的習慣
當我們想不斷提升自己技能的時候，我們就需要寫大量的代碼來進行不斷的練習，但是在我們的工作中，可能很多都是重複性的工作內容，所以這個時候，學習收集各種案例效果來進行練習，就顯得非常重要了。
在這個時候，做的練習，主要是爲了不斷的學習新技巧，達到進一步提升自己的目的。同時也可以瞭解自己，到底掌握了多少東西。並且掌握到了一個什麼樣的程度。
學習的內容，我們不僅只是輸入，同時也需要做一定量的輸出，這個輸出，可以是一個Demo，也可以是一篇圖文教程，或者就是一篇純文字的總結。
在這個時候，如果我們能夠通過文字把一個東西說的通俗易懂了，讓那些外行人都能聽懂聽明白了，就說明你已經掌握了。
2）做好打一場持久戰的準備
堅持，是最難的事情，當你把它變成一種習慣後，做起來就會容易很多。
你在做一件事情的時候，練習一天兩天，或者練習一個兩個，都是非常容易的事情。但寫代碼，也是一門熟能生巧的技術，所以需要我們堅持，不斷的去練習。
同時，還不要忘記多去看一些理論，原理，職業修養方面的圖書，來進行自我綜合能力的提升。
因爲在職場上，我們還是需要跟人打交道，不僅只是跟機打帶交道，所以，我們不僅需要寫機器可以認識的語言，我們還需要說，大家都能聽懂明白的人類語言。
3）養成總結的習慣，因爲你提交的不僅僅是一份代碼
不斷的總結自己的開發經驗，不但可以梳理自己的知識體系，還能對一些不太牢固的認知進行重新驗證與強化。經過每次的練習，都要對自己進行一次全面的總結，不斷的分享自己的練習作品或者經驗總結，可以和更多的人交流想法，也可以得到別人的指點。長此以往，你會發現自己收穫到的不僅是專業的提升，還有一種陽光積極的心態，就會不斷驗證那句話：“越努力，越幸運”！
以上分享僅代表個人多年以來練習提高和工作方式的一些點滴經驗，不足之處望留言指正，期待大家一起進步！