WEB前端是做什麽的？

　　那些什麽高大上的介紹作者就略過了，簡單來說就是做網頁的，我們上網瀏覽的網站界面就是WEB前端工程師做的。

　　在互聯網迅速發展的近幾年，你上網沖浪的時候是不是感覺WEB網站越來越漂亮酷炫，功能越來越多，越來越復雜？各種類似桌面軟件的Web應用大量出現，沒錯，WEB前端在其中有著很大的功勞。

發展方向

WEB前端的發展迅速導致其細分出了很多細分職業，我先來說一下我了解的WEB前端的分支，歡迎各位前輩補充：

　　1、網頁設計方向（移動和PC）：主要偏向html、css。js主要是做一些特效，最好有一定美術功底，很多公司還會要求會photoshop。Css功底一定要好，推薦看書《

　　2、B/S應用方向：這個方向就是用html、css、js來做一個web應用程序，和QQ、微信沒什麽兩樣，只不過是用網頁來打開的，舉個栗子：12306火車票訂票管理頁面、淘寶訂單管理頁面，或許你在工作中還會用網頁登錄XX管理系統。該方向主要偏向js，需要會一種以上的MVC框架，如angular、react、vue等，這些框架會在接下來介紹。

　　3、hybridAPP：沒錯，html、css、js也是可以開發手機app的，攜程、淘寶、支付寶就是其中的代表產品。

　　4、網頁遊戲：這方向需要有一定的算法基礎，面向對象編程功底，設計模式架構經驗，不建議新手從這方面入行，當然如果公司願意讓你往這方面發展又另說。

　　Web前端的細分職業還有很多，甚至有的公司在用WebGL來開發網頁版3D遊戲，不得不說web前端這幾年發展速度真快，所以說web前端是一個非常有前途的職業。

　　看了上面這些信息，是不是感覺太多東西要學，精力不夠用了呢？其實剛入行最好是在網頁設計和B/S應用兩者中選一個，這兩個方向也是應用最多的。

關於自學與培訓機構

如果在學習之前沒有編程的經驗的話，自學其實是一條很困難的路，因為不僅要從0到前端入門，還要從0到編程入門。

培訓機構可以讓人迅速入門，但也不是沒有缺點，下面的我總結的自學和參加培訓機構的優缺點。

——培訓機構

優點：

　　1、入門時間快；

　　2、知識點比較系統，針對目前流行的各種技術棧；

　　3、有一群小夥伴一起學習，一起鼓勵；

　　4、會針對面試技巧進行培訓；

缺點：

　　1、需要三個月到五個月不等的完全脫產時間；

　　2、收費很貴，投入成本高，成本=脫產的時間成本+學費，準備好3W左右的學費+生活費吧（有的學校提供分期付款，但跟分期買房一樣，有利息的），如果找不到工作，壓力會非常大；

　　3、短時間學會這麽多知識，帶來的必然是填鴨式的教學。學員的自學能力沒有得到鍛煉，而前端是一個需要不斷學習的行業。

　　4、很多公司對培訓機構出來的學員有抵觸情緒，所以簡歷一般要包裝過才能找到工作；

——自學

優點：

　　1、0成本投入；

　　2、學習的時間可以自行控制，甚至可以邊工作邊學習；

　　3、學習重心可以自行控制，針對前端某個細分方向，針對性的找工作；

　　4、很多東西是自行摸索，但也養成了自學的習慣，這對今後工作發展非常重要；

　　5、當自學成功入門後，會積累強大的自信；

缺點：

　　1、自學的周期比較長；

　　2、需要有一定的自制力；

　　3、有時候會很孤獨、很痛苦；

兩種方式各有各的優缺點，如何選擇就看看哪種方式適合自身的情況。

當初我決定自學主要是因為內心的一點小傲嬌：如果我自學入不了門，那我為什麽要做WEB前端？就算去培訓完找到了一份工作，那麽我需要的僅僅是一份工作麽？

下面是我在網上搜集的一些碎片化觀點，以及一些關於這個問題比較好的文章鏈接：

　　*如果同學你具備一定的編程基礎，邏輯，而且對開發語言非常有興趣，能夠堅持的每天在改正錯誤和克服難點，那麽你可以嘗試購買書，或者看看視頻自學。如果同學你是完全0基礎，非計算機專業，不容易堅持做一件事，那我建議同學你找一個培訓機構，這樣不僅有一個完整的0基礎入門教程，也可以有培訓的老師對你做出監督。

　　*如果非要用什麽比喻的話，培訓出來的就好比是練的辟邪劍譜葵花寶典之類的，雖然在短時間內會有一個比較顯著的提升，但是終歸是根基不穩。但是還是比不上那些從小研習易筋經的和尚。

　　*自學還是培訓這個東西因人而異，有的人有一定的計算機基礎，而且有一定的自制力，那麽他自學起來真的很快。同樣，我身邊也有很多培訓出來的人，他們給我的感覺就是沒有計算機相關的基礎，跨行業學習前端，所以自己自學上手很慢，且沒有方向。其次，有些人自制力可能有些差，自學進度及其慢，反而給培訓班砸上近兩萬塊的培訓學費讓他們感到肉痛，而不得不認真的去學習前端。

*做web前端開發，培訓靠譜還是自學靠譜？

初步接觸

　　剛開始自學時看教學視頻是最有效的方法，沒有之一，當然你有使用其它編程語言的基礎那當我啥都沒說。因為剛開始接觸，最難的不是知識點，而是各種概念，教學視頻裏不僅會有知識點的漸進講解，更會用通俗的語言來讓你理解各種概念，而這些概念通過書籍或者別人寫的技術文章是很難讓你理解清楚的。

　　我有個朋友是計算機專業的，在學校的時候準備學一下web前端知識，然後就抱著一本《JavaScript權威指南》開始看。結局自然是可以預見的，被書中各種難點：原型、繼承、閉包打擊的拔涼拔涼，然後就沒有然後了。

　　視頻的教程在網上可以搜集到很多，自己找一個比較專業的，我也就不推薦了，畢竟搜集信息也是程序員必備技能之一。建議直接去淘寶搜，裏面有很多賣視頻的，花幾塊錢就可以買到一整套視頻。

　　特別註意：每看完一節課程的視頻後，一定要把視頻裏的講的代碼敲一遍。可能你買視頻的時候還會贈送視頻裏面講解的源碼，但是我不建議直接打開這些源碼看，甚至可以直接把源碼刪掉。好記性不如爛筆頭，學習編程的過程中自己動手敲代碼永遠是必不可少的。

　　其實我覺得看教學視頻和培訓班上課就內容上而言沒有太大區別。只是學習氛圍不一樣，上課會強制你規律性的學習，學習的氣氛更濃郁一些，會有布置作業讓你動手。自己看視頻的話就得看你心情了，心情好就寵幸一下教學視頻，照著敲敲代碼，心情不好就玩去了。

　　不管你是打算自學還是準備參加培訓班，我都建議你先看看視頻。有些人一學起來就特別感興趣，根本停不下來，或許你就是其中一個呢?反正試錯成本很低，為什麽不呢？

　　如果是業余時間來學習的話，建議每天看1到2節課時，如果是全職學習的話，每天也別超過4節課時，學太多不容易消化。剩余時間可以去跑跑步、打打球，我們是準備長期作戰的，前期消耗太多熱情並不是什麽好事，每天來點運動可以讓你第二天保持清晰的頭腦。

　　可以發個朋友圈告訴你的朋友你在自學WEB前端，相信有了朋友的關註，你學習的動力會更足一些，畢竟牛吹出去了，卻沒有達成目標是很丟臉的。

　　在這一階段中，可能會花掉1個月到2個月的時間。這段時間後你應該學會了基礎的html,css,js知識，會做一些簡單的頁面和特效。達到哪個標準算是完成這一階段呢？你看去“w3school”和“菜鳥教程”（不要問我這是什麽東西，百度一下，你就知道）上的html、css、js教程，如果裏面的案例代碼你90%都能看懂，那恭喜你，第一階段任務完成了。

項目初涉

完成了第一階段後，你可以開始做一些小項目了，這個鏈接有一些適合新手的小項目：

https://zhuanlan.zhihu.com/p/22766255

　　最好自己去網上根據自己的情況找適合新手的小項目來做，一開始一定不要做太難的項目，不然很容易有挫敗感，得循序漸進，不斷建立信心。

　　這個過程是比較艱難的，你必須自己去分析這個項目如何去做，然後去查資料，搜索類似項目，有可能遇到一個坎就困你幾天。

　　做項目是為了強制你去查資料，去動腦筋，網上有些項目很詳細的寫了設計思路，設計步驟，能找到這種資料挺好的，但一開始盡量別去看這些東西。

　　盡量找有源碼的項目，實在完成不了，能看懂也有很大的收獲。

　　別忘了總結學習方法。

　　這階段的時間，業余自學盡量控制在一個月以內，全職自學盡量控制在半個月以內。

框架選擇

　　前端框架分為CSS框架和js框架兩種，PC端的CSS框架毫無疑問選擇bootstrap學習，這也是每個前端必學的框架。移動端的css框架是百花齊放，ionic、jquery moble、amazeui等等，作者了解不是很多，這方面就不多介紹了。

　　如果選擇了做網頁設計，那麽你就得多在html、CSS和jquery上下功夫了，jquery毫無疑問是用的最多的js庫（作者認為它不是一個框架，是一個js工具庫），社區有很多資源，各種插件，UI庫多的數不勝數，或許你在第一階段已經開始接觸jquery了。

　　如果你選擇了B/S應用方向，你得選一種mvc框架學習，並且不建議這時候去學習jquery，因為jquery的思維方式有的時候是和mvc思想是相左的，下面是作者對幾種主流MVC框架的主觀認識，僅供參考，主要還得你自己調研並判斷學習哪一種：

　　1、angular：非常優秀的MVC框架，社區非常完善，各種UI組件應有盡有，PC端移動端都很完善，對於大多數需求來說，你只需要去社區找現成的東西就可以用，不需要你再去造輪子。作者使用的就是這個框架，但目前比較尷尬，因為angular2已經發布了，angular1遲早要被淘汰，但angular2又沒有被國內太多公司使用，招聘這方面的人才的公司不多，並且angular2的學習曲線比angular1更陡峭，新手學習起來非常困難，雖然作者很看好angular2的前景，但確實不建議新手去學習。

　　2、react：跟angular不同，react是輕量級的框架，速度很快，但功能肯定沒有angular那麽完善，一般是和其它框架配合使用，一些業務是需要你自己造輪子的，不過現在web前端需求越來越復雜，社區提供的組件已經很難完全滿足某些需求，一個高性能的輕量級框架就受到了大家的鐘愛，華為就是用react，在2016年，react的使用量已經超過了angular，並且在移動端也有很快速的成長。

　　3、vue：vue是後來居上的一個框架，成長速度非常快，和react的適用範圍非常相似，比react更小、更快、更易上手，前景也是非常光明的。但目前社區不如react成熟，移動端也不如react完善。

其它MVC框架作者就不一一介紹了，作者個人建議大家從react和vue當中選一個進行學習。

項目進階

在學習框架的同時，你可以自己找一個稍大點的項目來做了，邊實踐邊學習是最快的成長方式。

　　如果選擇做網頁設計，你可以仿制一些大型網站，比如淘寶、百度的一些界面，裏面的數據你可以自己模擬，由於作者不是這方向的，能給的建議不多。

　　如果做B/S應用，可以仿制“Worktile”，“釘釘”這樣的大型B/S應用，同樣，裏面的數據你可以自己模擬，裏面肯定有很多的技術點你沒辦法完成，沒關系，別氣餒，只要大致框架像就行了，人家專業的前端團隊花了那麽多時間做的，你短時間想做到那種程度肯定不現實的。

　　當你的項目到一定地步的時候，你是不是感覺你的html、css、js文件越來越多了呢，而且越來越難控制了（雖然你可能不會覺得）。這時候你就需要一個前端自動化工具來對代碼進行合並、壓縮、部署、模塊化管理，目前比較流行的有webpack、grunt、glup，webpack現在非常火，用的公司也多，作者推薦用wenbapck，當然，你最好都了解一下，對比做出選擇。

　　如果是在公司工作，你總不能把代碼一直放在你自己的電腦上吧，所以你還得需要一個代碼管理工具，git好無疑問是新時代青年最好的選擇。順便你可以去申請個bitbucket免費賬號，創建一個代碼倉庫，把你寫的代碼用git push到倉庫，自己也可以多玩玩git一些常用功能。

找工作

你經過一系列闖關，終於要面對最後一關的大BOSS了，想想是不是有點小激動呢。

　　在找工作前，你得臨時突擊一下，去網上下載一些前端面試題來做吧！相信我，如果面試的公司有筆試環節，他們的題基本上都是在網上找的，很少有公司有那個閑功夫自己出題的（BAT這樣的大公司除外），做題的過程也可以不斷完善你的知識。

　　在項目進階這個階段時，其實你已經可以著手去找工作了，工作中技術積累是非常快的，別擔心技術不夠，一些公司還是願意招一些初學者，畢竟便宜啊，多投簡歷總能有機會的，不行那就繼續學習。

　　找工作期間多跑步吧，可以讓你保持好的精神狀態，並且也有助於緩解壓力。

　　註意別被一些XX教育投資公司、XX人才培訓公司招實習生誤導了，這些公司就是用招聘來說服你去培訓的，特點就是強調“無經驗”“包吃住”“對編程有濃厚的興趣”。

後續

　　如果你自學找到了一份WEB前端的工作，恭喜你，這段經歷一定會是你人生中寶貴的財富，從此你自信心爆棚，並且你一定積累了豐富的學習技巧，似乎只要你願意去學，就沒有什麽可以難倒你。

　　作者為你感到驕傲！

　　等工作趨於穩定了，別忘了夯實基礎，系統的梳理一下知識結構，看書是最有效的方式，推薦《css權威指南》《JavaScript高級程序設計》《JavaScript權威指南》《JavaScript設計模式》。

　　《JavaScript高級程序設計》偏向dom；

　　《JavaScript權威指南》偏向js語言本身；

　　《JavaScript設計模式》有一年工作經驗後再去看比較好，設計模式是可以受益整個程序員生涯的好東西。

　　作者見識有限，本文僅供參考！

作者寫在後面的話

　　不知不覺自學入前端的坑已經有段時間了，目前遇到了技術瓶頸，處在職業倦怠期，即：日常項目需求已經很難提升技術水平了，新知識的get速度很慢。這個時期對我來說是非常焦慮的，我想方設法在突破這種困境，寫技術博客就是其中一種方法。我定的目標是，每個月最少寫兩篇技術文章，最好每周一篇。每篇文章一定要有大量的調研，盡量保證文章的嚴謹，在調研的過程中就可以不斷紮實基礎。

　　博客的主要面向人群：WEB前端初學者。就跟做產品一樣，文章要有準確的定位。本人技術能力有限，寫不出精彩絕艷，有深度的文章。唯一值得一提的是我是自學入行的，走了許多彎路，深知自學的不易，甚至是痛苦，也總結了一些經驗，希望我的文章能夠對WEB前端初學者帶來一些幫助。

　　其實我生出寫博客這念頭的時候是很惶恐的，因為我也是個新人，我哪裏有這個資格寫文章給別人看？讓我安慰的是，一篇技術文章能不能讓人受益，不僅取決於作者的技術水平，也取決於作者的表達方式。所以我會努力讓自己的文章理解起來更輕松，對初學者更友好，也算是跟前輩大咖們進行差異化競爭。

　　文章中如果寫的有什麽不對的，需要補充的，希望各位前輩不要吝惜自己的鍵盤，多多斧正，就算是把我批的一無是處我會也很開心。

如何自學成為一個WEB前端