關於如何自學web前端以及一些面試的經驗分享

自學怎麼學好前端開發？

    一千我的來回答這個問題有一千種答案，每一個人的自學能力各不相同，適合個人方法不必定適合你。可是你們能夠相互借鑑，蘋果交換事後仍是一個蘋果，思想交換事後就是兩種思想了。我這裏把個人方法分享出來，多少也有一些借鑑的經驗或者讓你少走一些彎路。

    有的人喜歡安靜的一我的看書專研，有的人喜歡看網絡視頻教程，而我更偏向於後者，固然你時間充足的話看書加看視頻效果更好。學習的主線視頻是我花10塊錢在某寶上淘的，這套視頻是傳智播客2015.12-2016.3期間實體班的全程錄像，很新，最主要的是視頻質量超高，老師講得特別仔細，源碼筆記PPT都有，面面俱到，並且讓我特別佩服的是每一個老師都講得這麼好，我真的要爲傳智播客的老師點個贊！特別是汪老師！說到這裏有點小激動了，小小的幫他們打一波廣告，畢竟本身只花了10塊錢網上買的盜版資源，學到了東西仍是挺感激的。除了傳智播客的這套視頻以外，還有一套麥子學院的，也是完整的，以及一些其餘平臺零零散散的視頻，用來查缺補漏。

    下面我開始分階段的把個人學習過程回憶一遍，全程大概四個月，前兩個月是邊上班邊學，利用晚上下班回家的時間，8點-12點4個小時，後兩個月辭職在家閉關學習。全程80%都是看視頻學，視頻資源須要的能夠找我要，免費分享出來。

　　

 

 

1，HTML/CSS部分

    這部份內容很簡單，沒有任何的門檻，並且最主要的是你寫出來的代碼能實時的看到效果，很直觀，不像JS那麼抽象，因此我基本上花一週的時間把傳智播客的這部分視頻過了一遍，而後慕課網上《HTML+CSS基礎課程》http://www.imooc.com/learn/9也過了一遍，本身寫了3個demo，固然寫的不是很流暢，特別的慢，這沒關係，由於剛開始你還不是很熟悉，慢是正常的，後面寫的多了速度就漸漸會快起來。這部分就先過了，由於確實不難，因此我這裏也不爛費筆墨了。

2，原生JS部分

    這部分是重中之重，我前先後後差很少過了4遍吧，傳智播客的視頻一遍，慕課網上的文字教程加練習一遍，千峯教育的視頻一遍，以及智能社的視頻一遍。固然這4遍我不是都在這個階段完成的，由於原生JS這東西要學好仍是有必定的難度，我如今對高級面向對象這一起也還弄的不是特別的透徹，因此你一開始能夠把這部分放到後面回來複習的時候再學。傳智播客的視頻和慕課網上的教程我是在這個階段完成的。這裏我推薦下慕課網上的教程http://www.imooc.com/course/programdetail/pid/32，首先他把JS的內容劃分爲JS基礎，事件處理，JS動畫以及實踐幾個部分，這樣會讓你思路更清晰的去學習，並且每一個知識點都有相應的代碼練習，加強你對代碼的理解和記憶。你把傳智的視頻和慕課網上的這套教材都過一遍，而後再找點實例練練手找找感受，這個階段就能夠暫時先過了。

 

3，jQuery部分。

    若是你原生JS掌握的還能夠的話，jQuery這部分你學起來相對就會輕鬆許多。老套路，依然是傳智播客的視頻和慕課網上對應的教程走一遍，期間穿插一些實例作作練手。

4，慕課網上《手把手教你實現電商網站開發》實戰練習。附上傳送門http://www.imooc.com/learn/100

 

    視頻時長一共8小時，2天就能夠看完。固然你2天確定是搞不定的，重點在於你看完了事後要本身寫一遍。這裏我分享一下我是怎麼學的這個教程。

    首先每一章視頻先看完，而後把對應的PSD圖下載下來，這裏須要用到Fireworks軟件來切圖，本身上網查一下軟件的用法，會切圖事後，本身對着PSD原圖回憶視頻里老師怎麼講的，而後本身嘗試着把它寫出來，固然不必定徹底按照老師講得那麼來寫，你也能夠用本身的方法實現相同的效果。若是遇到不會的，倒回去看視頻裏面老師是怎麼寫的，這樣可讓你印象更加深入，之後遇到這個問題的時候就會了。一個頁面完成事後再開始看下一章的視頻，依次下去直到全部的頁面寫完。

    寫完頁面其實視頻裏面也完了，老師只講了純靜態頁面的實現效果，像裏面的輪播圖，放大鏡，登錄註冊表單驗證等功能模塊兒並無講怎麼去實現。前面JS部分和JQuery部分的視頻裏面應該有講到過，沒有的話去騰訊課堂或者百度傳課上搜，有單獨講放大鏡、輪播圖這些功能模塊兒的視頻教程。把這些功能都加到這個靜態頁面裏去，就能夠當成一個項目了，後面面試的時候會用到。

    慕課網有個比較好的地方在於他能夠在線記筆記，課程下面還有一些其餘同窗的評論，你們能夠在底下交流，你時常會在評論裏面看到跟你同樣的菜鳥各類抱怨聽不懂之類的，這能夠給你減輕壓力，你們都同樣半斤八兩，你不會的別人也不會，若是你肯多花點心思把你不會的這個點弄懂事後，那你就比別人前進了一步。

5，HTML5/CSS3，AJAX

    這部分純看傳智的視頻就夠了，講得特別細，重點在於HTML5新增的東西和CSS3的動畫，Canvas這東西面試的時候基本沒人問。由於AJAX這部分傳智的視頻也講得特別好，因此我把它也放到這個階段一塊兒了，重點搞清楚AJAX的運行機制和原理，jsonp是怎麼實現跨域的，面試的時候會問。

6，基於Bootstrap的PC/移動端響應式頁面實戰

    主線視頻第9部分前面三天講的就是這個項目實戰，是我最喜歡的汪老師講的，我說講得好那就是真講得好，幽默風趣的授課風格，面面俱到的授課內容。他特別注重對學生前端開發思惟邏輯方面的培養，尤爲是在AngularJS這部分，內部的原理，他會結合實際生活中的例子來說，讓你更容易理解。這點對我後面的面試幫助特別大。這個項目你也要看完視頻事後脫離老師的代碼獨自寫出來，後面放在簡歷當中。

 7，原生JS複習，外加高級面向對象

    由於5，6兩個階段基本上沒怎麼動過原生JS，因此你忘得也差很少了，這時候回去複習一遍，加深一下印象，鞏固一下。基礎夠紮實了後，能夠開始看面向對象的一些教程了，這部分特別的饒，初學者想要徹底理解是有點困難，不過不要緊，把幾個面試容易問到的東西強行記一下：1，繼承能夠經過哪些方式實現。2，什麼是閉包。3，什麼是原型鏈。

8，git/gulp/bower等工具構建前端自動化工做流，AngularJs

    全在主線視頻第13個流行框架裏面了，汪老師講的，擴展講了特別多知識，很受用。其中的這個基於AngularJs開發的實例項目你也能夠放在你的簡歷裏邊，你能夠不用本身寫出來，由於我本身也沒有寫，可是你得搞懂原理，否則面試官一問就露餡了。

9，附加知識：LESS，SASS，Node.js，Vue.js，guthub

10，最後再仔細過一遍原生JS

    若是你能堅持到這裏，成功了90%了！最後這一步都是爲面試作準備的，由於根據我面試經驗來看，面試官問的最多的就是原生JS，其次是HTML5/CSS3,AJAX,框架類的東西問的少，除非是比較特殊的公司，像我選擇的這家企業作通信項目的，用到的框架我聽都沒據說過，進去事後要現學，因此要求你對原生JS特別熟練，而後框架要接觸的多，會問一些框架裏面很深刻偏邏輯性的問題，雖然我答得也不怎麼樣，但還好以前汪老師講過一些前端框架方面邏輯性的一些思想，矇混過關經過了。

下面我把我面試遇到的一些問題羅列出來，理論性的東西我就不寫答案了，本身能夠百度，關於HR方面的一些問題我給出個人回答作參考：

1)HTML/CSS方面（包括HTML5/CSS3）

--你經過哪些方式來實現網頁優化？

--position:relation和position:absolute有什麼區別？

--爲何要使用CSS雪碧圖

--HTML5新增了哪些元素?

--CSS3動畫怎麼兼容瀏覽器？

--IE6有哪些BUG，你是怎麼解決的

2）JS方面

--什麼是變量提高，以及各類關於變量提高的筆試題

-- HTTP狀態碼有哪些？

--AJAX的原理，get和post的區別？

--json和jsonp的區別，jsonp是怎麼實現跨域的，跨域有哪些方式能夠實現？

--怎麼實現數組反轉？

--字符串經常使用的方法有哪些？

--JS實現繼承有哪些方式？

--什麼是閉包？

--什麼是原型鏈？

3）框架方面

--bootstrap裏面的柵格系統有多少格？

--jQuery裏面經過$（「#id」）獲取到的是什麼？

--end()是什麼

--你怎麼理解Angularjs的模塊化，它的雙向數據綁定是怎麼實現的

4）HR方面

--關於項目細節

個人簡歷裏面一共三個項目，就是以前寫過的電商平臺，基於bootstrap的響應式頁面，還有個AngularJs實現的項目，你在每一個項目下面寫上幾條你很懂的技術要點，面試官通常都會挑幾條問一下，由於你寫的都是你很懂的，因此回答起來就沒什麼問題。

--關於上家公司的一些細節

我是隨便亂寫的一家公司，問到以前公司關於人數的時候回答必定要很確定的說出具體數字，不能模棱兩可。最好說有一個師傅帶你。

--離職緣由

這個就隨便編了，注意不要說以前公司的壞話

--指望薪資

本身掂量一下本身幾斤幾兩，而後說一個適當的區間

--假如大家公司一個項目出現問題，要麼你留下來加班到12點，要麼你同事留下來加班到12點，而大家都有事不想加班，你會怎麼辦？

個人回答是我本身留下來加班，讓他欠我一我的情，下次我有事找他幫忙時也好說話一點。（本身有想法的自由發揮）

 

我大體是按照這個流程走下來的，中間可能有些許差異都不大。只要你努力付出了，確定是有回報的。

最後送你們一句話：當你的才華還撐不起你的夢想時，Power UP!