摘要：也就正式開始了我的前端之路。在這期間，我還購買并配置了自己的云服務器，自己的博客系統，自己的還學會了的基本操作。不必說的是高級程序設計豆瓣鏈接這本書，也就是大家常說的高程，基本上每個合格的前端程序員都要熟讀很多很多次，每次讀都會有新發現。

原創 西安前端交流會: 卡農  ovenzeze@qq.com  
本文章同步發表在wdShare西安前端交流會網站、我的個人博客以及segmentFault和掘金。    轉載請注明出處

這是西安初級前端群里邊的一次分享，整理出來，分享給大家，希望對大家的學習有幫助，也希望大家可以和我多多交流。

Hello，大家好，我是卡農。上周Michael兄分享的內容機械轉行前端，半年零基礎自學的心路歷程干貨滿滿，非常精彩。本周的分享由我來帶給大家。首先非常感覺杰克哥給我這次機會讓我能夠在這里分享一點學習的經驗，也非常感謝F7哥提供的這么好的交流平臺讓大家能夠在這里心無旁騖的討論技術，共同進步。今天我分享的內容主要是關于前端初學者的學習路線和一些建議，還有自己在準備校招過程中的一點經驗。由于我目前還是在校生，所以在某些問題的見解和選擇上可能會更多的偏向于學生的思維，不一定適合群里的所有人，不足的地方希望大家多多指點，當然我會盡量從更大的適用人群的角度去輸出我的經驗，希望可以對大家前端學習有所幫助。
我會從我的入坑之路、初學歷程、學習路線以及準備應聘過程中的簡歷、知識、心態準備幾個方面來給大家分享。

嚴格意義上來說，我學的專業并不屬于計算機（智能科學與技術），更偏向于一個軟硬件結合的學科，而很湊巧的我們學校在安排我們專業課的時候把硬件課程放到了一個更重要的位置。所以專業課里能學到的知識其實并不多，當初也是見到這么霸氣的名字才填的專業。如果按照我們專業的路線，我以后應該研究的是人工智能、機器學習、機器視覺或者自然語言處理這些方向。但是在大二，我很認真的研究了這些可能的方向之后，我很嚴肅的發現了一個問題。這些看起來很高大上的學科或者職業，在我們這種學校是一個很尷尬的存在。以以我們這種普通學校本科生的學力和研究深度，幾乎不太可能在這些方向上找到合適的工作（至少是沒有先例的）,當然也有想過做第一個吃螃蟹的人，但是當認真審視自己的沒有良好的基礎學科功底和對這些方向有限的熱情之后，我還是選擇放棄。這樣，唯二的可選項是繼續深造和選擇別的方向。因為我一直都沒有在國內繼續深造的打算，所以我很果斷的放棄了這個選項。于是在選擇別的方向的路上，很巧合的碰到了學校計算機學院（我們專業被分到自動化學院）各種實驗室的招新。宣講會聽了一場又一場，發現我都大二了（對大一學生的要求比較低），還沒有任何可以拿得出手的作品，也沒有比較熟悉的編程語言，只有對互聯網和科技行業滿滿的熱情。最后抱著試試看得心態，初步選定了前端和產品兩個方向。但是在后來的就業前景、學習路線以及未來的發展這些綜合考慮之下（信息主要來自知乎），還是選擇了技術路線的前端。所幸的是那時候，大家的水平都不高，在我挑燈夜讀了大概一周之后，很湊巧的遇到一個非常賞識我的學姐，讓我進了實驗室的WEB組。也就正式開始了我的前端之路。

對于學生，我強烈推薦加入學校的實驗室，這會對你的學習之路有極大的幫助，在后面我會提到。
很幸運，我所在的實驗室是一個以項目為驅動的實驗室。實驗室里有各個方向的人才，嵌入式、安卓開發、大數據、WEB前端、WEB后臺等等，當你有一個好的idea很快可以匯集到各個方向的成員去實現它。于是我的第一個項目開始了。就是寫一個簡單的實驗室官網。
當然這時候，我才知道自己其實只是了解一點皮毛都算不上的知識，如何開始一個項目，前期的需求分析怎么寫，網站整體怎么設計，用什么技術棧，如何規范代碼，如何寫出健壯可維護的代碼，甚至與還有網站放什么東西，資料哪里來這些問題，一下子全部都出現了。我根本無從下手，不知道從哪里開始。這個時候，有人指導的重要性就凸顯出來了。在學長學姐的指導下，我參考了以前的項目計劃書花了一周時間寫出了網站的需求分析，畫出了大體的布局圖，選定了技術框架用Bootstrap。這個時候我就是在慕課網和官網上看Bootstrap的使用教程，發現僅僅是使用也沒有什么難度，大概兩周基本上都會了。但是會照著例子敲代碼并沒有什么用，還是什么都做不出來。這個時候，我做了一件很可恥的事情，我把學校成立比較早的幾家實驗室官網的代碼都扒了下來，看他們的目錄結構、布局以及代碼。很幸運的是大家都沒有在這個靜態網站上使用太復雜的技術，基本上都是我能看得懂的CSS和HTML，JS的部分很少。于是，參考他們的例子和我之前自己設計的整體布局和結構，我大概寫出了網站的整體框架，雖然很丑，雖然即使是用了Bootstrap還有很多布局上的Bug,但是看到自己設計并寫出來的第一個網站還是非常激動的。后面的工作就是在實際編寫過程中，不斷的改代碼，改布局，甚至還多次改了需求，歷時大概兩個月加上一個寒假，終于完成了自己的第一個正式上線的作品。在這期間，我還購買并配置了自己的云服務器，自己的博客系統，自己的Github,還學會了linux的基本操作。
要知道，在幾個月以前，我是想都沒想過自己能夠親自寫出一個網站并提供給這么多人使用，一是不相信我會有這樣的機會，二是不相信我有這樣的能力。but so what,事實是我真的做出來了這個東西，而且以后我會做出更多更好的東西。我寫這段經歷希望和大家分享的就是，dont be shy,勇敢的踏出你的第一步，如果你不給自己一個機會，你永遠都不會知道你到底能做什么，在這之前我完全不知道如何開始并完成一個項目，也不知道什么博客，Github，云服務器，這些完全是因為在這個項目中會用到，我不得已去學習，但是一開始學習我才發現這些東西為我們帶來的便利遠遠超乎我的想象，于是已經停不下來了。所以對于剛入行的初學者，我強烈的建議你，發揮你的想象力，嘗試親手去做一個完整的作品，當你想去實現一個東西，想去完成一件事情的時候，你會有更充足的熱情和動力去為之學習，每一次學習都是都會離你的目標更進一步，而每一次完成作品中的一個部分你就會更有動力去繼續，這是一個正向激勵的良性循環。相信在這種情況下，你會學的更快更有深度。

很容易看到，對我的整個成長過程，學校實驗室提供的資源、平臺和氛圍起了很重要的作用。在這里，我可以非常容易找到和自己同方向的學長學姐，在這里，我想再次想幫助過我的學長學姐們說聲“感謝”，沒有你們當初你們的指點，我現在還在泥潭中打滾，沒有方向的亂撞。也很容易有各種機會去做出會被大家使用的產品，同時還有良好的學習氛圍.舉個簡單的例子，在沒有加入實驗室之前，我最多學到九點（因為學校圖書館九點鐘關門），而且還要受到各種干擾，在加入實驗室之后，只要去了，我很少有十點之前回宿舍，因為在這個環境里，大家都在學習，都在討論，你很難有其他的想法。而住的更近的同學院同學，在保安大爺沒來催人之前，是絕對不會走的。
當你可以完整的做一個小項目的時候，我相信常用的技術你肯定都了解的差不多了，但是用歸用，如果僅僅是會用某項術，對你的成長幫助是非常有限的。

這個時候我推薦可以花大塊的時間系統學習知識點。比如，多久時間學習HTML4.1 HTML5 MDN-HTML5CSS2.1,CSS3霧雨漂零CSS手冊,ES5,ES6/ES7阮一峰ES6手冊等等。這個時候的學習就是既要有廣度又要有深度。不必說的是JavaScript高級程序設計豆瓣鏈接這本書，也就是大家常說的高程，基本上每個合格的前端程序員都要熟讀很多很多次，每次讀都會有新發現。JS最原理性的東西這里面都解釋的很清楚，但是它也有很多不夠深入的地方，這個時候犀牛書就出現了。但是犀牛書（JavaScript權威指南）豆瓣鏈接講的很細，很深，反正目前我是基本沒怎么看，水平還不夠很多地方理解不了。但是想深入理解JavaScript，這本書也是必讀的。CSS方面，我推薦CSS權威指南豆瓣鏈接和W3C 大漠老師W3C-PLUS的圖解CSS3豆瓣鏈接,基本看熟這兩本書，在絕大多數情況下CSS方面的深度和廣度就都夠了。

推薦一些網站，一個百度IFE前端技術學院，里面有百度IFE前端團隊為初學者設置的循序漸進的前端Tasks,只要按照順序一步一步做出來，你的前端技術一定會上一個臺階。而且有很多厲害的學學員在做同樣的事情，可以盡情參考和評價別人的代碼，可以學到很多的東西。還有一個是Free Code Camp,應該是全世界最火的技術學習網站，和上一個類似，也是任務形式的，他會提供很多的學習資源，然后完成目標學習任務，學習結束并完成作品，還可以得到學習認證證書。

但是光有這些知識也還是不夠的，現在的前端工程師不是只有HTML、CSS和JavaScript，現在的前端還要求了解網絡協議、網絡請求、瀏覽器運行機制、前端性能優化、服務端等知識，你沒有辦法很系統的全面的去學習，學的太深，可能你會發現光著一個知識點就夠我研究幾個月了，那么如何判斷學到什么程度呢？我覺得這個就需要根據你自己的情況來權衡，比我我自己，我是在校生，我有大把的時間，而且我以后要面對的是校招，校招是一個很注重基礎知識的面試，而且我也希望能夠深入的了解一些原理性的知識。那么我當然可以更深入的去了解這些相對屬于輔助性知識的內容，網絡協議我可以看HTTP權威指南豆瓣鏈接，服務端的知識我可以自己去搭一個服務器，做一個前后端完全自己完成的項目，但是也有很多人網絡協議看一遍博文就夠了，服務端只是知道Node.js、PHP,但是他也可以很出色的完成前端的任務，對于這些東西我的建議的如果你有足夠的時間和學力，你可以學的更深入一些，相信這些知識無論是對你自己駕馭手中的工作還是以后的發展都會有很大的幫助。
在這些路線學完之后，不出意外的話你應該有了自己的常用的組件庫，比如輪播圖、模態框等，還有JS的類庫比如操作Cookie、操作LocalStorage、Ajax等。
接下來，你可以嘗試用這些技術重構之前做的小項目，或者可以嘗試去做一個更復雜的項目，比如模仿一個知乎、自己動手寫一個博客系統等等。反正，到現在，基本的技術應該都會，只是還不熟練，需要的就是大量的練習使這些技術融會貫通。

因為最近一段時間，我都在準備校招，走了不少彎路，也踩了不少坑，希望也可以把這部分的經驗分享給大家。

既然要去面試，簡歷當然是最基礎的準備工作了。對于技術路線的人來說呢，簡歷需要注意哪些地方呢。簡單說下我的看法。
首先簡歷一定要簡潔明了，不然怎么叫簡歷。簡潔，主要包括排版、配色和字體。一般的建議是主色調最好用淺色調，整個簡歷的配色最好不要超過兩種，排版就按照自然文檔流的豎排排版，每個大的區塊之間有明顯的分界，字體推薦使用微軟雅黑、黑體、宋體等這種常見的字體，一是看起來舒服無壓力，二是常見字體會讓HR產生親切感，當然也不是不可以使用其他字體，只是陌生的字體會有很大的風險，除非十分有把握，否則不推薦冒險。
其次是簡歷內容的書寫，最重要的一點就是盡量寫和你求職意向相關的內容，并且要主次分明。舉個例子，在寫校園經歷的時候，A經歷是擔任全校最大社團某某會部長，組織了某某活動，成功吸引到多少人參與，達到了什么效果，B經歷是擔任某某不知名社團社員，完成了社團的網站建設，組織技術沙龍，吸引到多少人參與。對于很多同學，很容易先入為主的放棄B經歷而選擇A,理由也很好，A社團是全校聞名的一級社團，人盡皆知，在這樣的社團里組織活動并獲得良好反響是我實力的證明。而B社團，人數很少，在學校默默無聞，沒有幾個人知道，沒有什么說服力。這非常對，但是我想問的是A社團證明的你的能力是今天面試官關心的能力嗎？既然是技術面試，最關心的當然是技術能力，而且對于面試官來說他才不會在乎A、B社團那個人多，那個比較有名，在他們眼里都是一樣的社團，他更關心的是你在里面做了什么、承擔了什么責任。很顯然，建設社團網站、舉辦技術沙龍這種經歷，對技術面試來說是更加分的。
在寫經歷的時候，一定把與技術相關的放到最顯眼的位置，同時把自己最得意、最熟悉的項目放在前面，始終記住的是面試的是技術崗，始終把技術能力放在第一位，有其他的機會的時候再展示附加的能力。

其實在校招面試中，最注重的還是基礎知識。以我長期以來助攻實驗室學長學姐面試的經歷來看，問的最多的問題就那么幾類。一個是高程中的基礎知識，比如原型、原型鏈、閉包、對象、繼承等，一個是網絡協議、運行機制，比如TCP三次握手、Event Loop、消息隊列等，再就是算法，比如數組去重、快速排序、冒泡排序等。當然還有CSS和HTML相關的知識，熱點的是Flex，Position，CSS畫各種圖形，如何實現垂直水平居中，常用的瀏覽器Hack代碼等，這些相對比較雜且多，但是需要理解的部分不多基本上過幾次就能知道，復習起來非常快。
我的建議是在復習這些知識的時候，最好不僅要知道基本的內容，還要了解其概念和外延。
舉個例子，posiation有哪幾種屬性，各有什么特點？
絕大多數人都能回答出static | inherit | relative | absulote | fixed,其中fixed脫離文檔流，相對窗口定位，absulote脫離文檔流，相對最近的一個Position屬性不為static的父元素定位，relative不脫離文檔流，相對元素原來的位置定位。當然，這些說的是沒錯的。但是，如果你還可以說出 center | page | sticky 并且知道這幾種定位方式出現的緣由會不會更好，即為什么會有sticky定位，它解決了之前用CSS解決不了的什么問題或者更便捷的實現了之前用CSS需要大段代碼才能實現的效果。如果你還能說出目前的兼容性如何，都用在哪些地方，會不會更好。而由Position有經驗的面試官又會很容易的引出脫離文檔流的問題，如何脫離文檔流，不同的脫離文檔流的方式各有什么特點等等。
簡單的說就是在準備面試過程中，對熱點的知識點需要全面深入的了解，而不僅僅是了解其基本屬性和用法，同時面試中常用提問方式和技巧也要有所了解，在準備的時候就以面試官的思維去問自己問題。
在復習知識的時候，我非常推薦大家自己總結，寫成博客。因為要發到網上被大家審閱的文章，潛意識會寫的更加嚴謹、認真，會整理的相對完善并且準確。
我的習慣遇到比較大的知識點的時候會整理成一篇博文，在整理的過程中會參考很多的文章、查基本不同的書，很多時候你會發現同一個知識點在不同的博主筆下完全是不同的調調。有的甚至是有錯的。我比較推薦的阮一峰和張鑫旭老師的博文，大都寫得很完整且案例豐富。
下面就是我做過的部分整理和總結，有一些已經同步到博客，有些還在繼續整理。

找工作和招員工本來就是一個互相選擇的過程，沒有最優秀，只有最合適。
對于水平很好，有明確目標的人，要做的就是做好準備工作，充分了解目標公司，提高嗅覺，捕捉每一分信息。舉個例子，我對A公司非常感興趣，而且知道每年都會校招。那么你要做就是關注A公司的招聘官網、微信，加入A公司的招聘社群，同時積極利用已有的校友資源捕捉第一手信息，同時在技術上關注A公司技術團隊的微博、博客，及時了解A公司的技術動向，認真研究其使用的技術棧，分析其技術路線和口味。
而對于技術一般，沒有明確目標的同學。要做就是廣投簡歷，積累面試經驗，提高被選中的概率。這是很簡單的數學題，在同樣分子的情況下（技術水平），分母越大（面試公司），結果越好（offer越多）。而且面試本來就是一個打怪升級的過程，通過面試積累經驗，補足短板，最后拿到名企offer的案例屢見不鮮，重要的善于總結，面試沒有回答上來的問題，出來快速用手機記下來，下來一定要好好總結，想想面試官想考察什么，為什么這個知識我不知道，是因為知識點太偏，還是因為屬于非知識性的內容，還是因為不熟練，針對不同的問題用不同方式來補足，還有考慮一下如果回答上來了下一步他可能問什么。還是那句話，從面試官的角度去問自己問題。

最后，借用知乎上很有名的一句話共勉。以大多數人的努力程度之低，根本輪不到拼天賦。所以，拼命努力吧，各位小伙伴們，希望大家都能在前端這條路上越走越遠。
也希望西安前端群越來越專業，越來越開放有活力。
最后的最后，我要提一下我的學校西安郵電大學和我的實驗室ThoughtCoding實驗室，這是一個很棒的學校和一個很開放包容的實驗室。我很感謝在我的成長路上能夠遇到他們。
同時再次感謝杰克哥和F7哥提供這么好的交流機會和交流平臺，還有西安前端群的各位小伙伴的指點，從你們身上也學到了很多的東西，大家可以一起進步。

下面是我的Blog、Github和郵箱，歡迎有興趣的小伙伴和我一起討論問題，共同進步。

博客：ovenzeze.coding.me

Github：github.com/ovenzeze

郵箱：ovenzeze@qq.com