摘要：受上海杰克大大委托，于今晚分享一下本人的自學(xué)歷程主題機械轉(zhuǎn)行前端，半年零基礎(chǔ)自學(xué)的心路歷程。所以我就這半年個人自學(xué)修行以來的一些感觸和心得方面進行分享。背景介紹內(nèi)容前工作狀況機械離職經(jīng)歷心態(tài)轉(zhuǎn)變目標(biāo)確定大家好，我是，一枚前端萌新。

標(biāo)簽： 轉(zhuǎn)行 自學(xué)

原創(chuàng)：Michael.Lu 277133779@qq .com 轉(zhuǎn)載注明出處

這是初級群（西安初級前端群：4983126）里邊的一次分享，然后整理出來，分享給大家。

大家晚上好。首先感謝(@西安-F7)大大提供的平臺。受(@上海 -杰克)大大委托，于今晚分享一下本人的自學(xué)歷程——主題：機械轉(zhuǎn)行前端，半年零基礎(chǔ)自學(xué)的心路歷程。以前從沒有進行過這樣形式的交流，內(nèi)心緊張與激動的并存，也非常榮幸第一次在初級群這個大家庭里做分享。這是我知道的第三次分享，前兩次分別是從實習(xí)到找工作之間的經(jīng)歷以及前端職業(yè)規(guī)劃方向來做的分享，很遺憾我還沒有正式進入具體的工作領(lǐng)域，連班門弄斧的機會都沒有。所以我就這半年個人自學(xué)修行以來的一些感觸和心得方面進行分享。主要內(nèi)容：

背景介紹

自學(xué)經(jīng)歷與經(jīng)驗

demo頁制作心得

以及對未來的展望

由于是個人經(jīng)歷，加之視野狹隘、技術(shù)水平較低。如有不妥之處，歡迎各種形式的批評指正，忠言逆耳利于行，大伙的聲音是我在正道前行的完美路牌。

內(nèi)容：前工作狀況(機械)、離職經(jīng)歷、心態(tài)轉(zhuǎn)變、目標(biāo)確定

大家好，我是Michael.Lu，一枚前端萌新。早在2016年4月份之前，我還是一名大型石油裝備制造公司的機械工程師，勤勤懇懇，工作強度不算低，即使在規(guī)定時間內(nèi)完成任務(wù)但還是得常年形式加班(大概896)。生活節(jié)奏中規(guī)中矩，幾乎泛不起一點點漣漪。變化的是眼花繚亂的三維機械模型和無窮無盡的生產(chǎn)藍(lán)圖，不變的是工作內(nèi)容以及職位和薪資。雖然平時表現(xiàn)出了足夠的上進心，但在這樣的環(huán)境中，我開始慢慢意識到，在應(yīng)該升職的時候總是會有奇人從天而降穩(wěn)準(zhǔn)狠的擊中我的晉升目標(biāo)。在應(yīng)該加薪的時候總是能趕上國際油價下跌導(dǎo)致公司利潤下滑開支緊縮。我。。。

從2013年7月大學(xué)畢業(yè)，全國包括我在內(nèi)一共600多名大學(xué)生進入該公司，14年走了一半，15年還在堅持的不到100人，到16年3月還剩不到50個，想想是我也算持久堅挺的一員了?？墒蔷驮?月的某一天早晨，新空降的不知道第幾任的領(lǐng)導(dǎo)來給我們打招呼，我的腦海里浮現(xiàn)并不是一片欣欣向榮的未來工作情景，而是一眼望穿的未來10年內(nèi)的半養(yǎng)老生活格局，舊國企般的腐朽人際關(guān)系網(wǎng)，永恒不變的工作內(nèi)容。再加上每逢佳節(jié)倍思親和親更思我的情節(jié)，離職的念頭瞬間爆炸，當(dāng)天就提出了離職。從提出辭職到真正變成無業(yè)游民花費了我整整一個月的時間，其中不乏各種HR畫餅挽留、人心盡失工作交接障礙以及簽署發(fā)射原子彈般的復(fù)雜離職簽字流程。就在最后總裁拿起筆準(zhǔn)備簽名的一瞬間，仿佛高考最后一門考完交卷一般的清爽。皮皮蝦，我們走！

之后4月到7月是我人生中最開心也是最失落，也是我永遠(yuǎn)無法忘卻的時光。這算時間里，可謂是云游四海，心靈在天堂，身體在地獄，但卻樂此不疲。孤身走遍大江南北去尋覓故友，雖然故友多數(shù)都在上班沒多少時間接待我，也沒去多少景點，但是灑脫光環(huán)加身，怎樣都開心。后半段時間一邊返程一邊旅游一邊開始準(zhǔn)備簡歷，落實下一個落腳點，這也是我心情俯沖直下的轉(zhuǎn)折點。真是不看招聘信息不投簡歷不知道這個行業(yè)有多殘酷，需求都是要么應(yīng)屆畢業(yè)生，也么5到10年工作經(jīng)驗的高級工程師，中不溜的待遇和要求根本無法直視，這個時候我才意識到我到底是有多年輕多不成熟。幾經(jīng)投遞無果之后，帶著比上墳還沉重卻又不能表現(xiàn)出來的心情回家。繼續(xù)投簡歷，要求底線不斷降低，投遞頻率不斷上升。接到面試通知電話的公司，不是遠(yuǎn)在天邊的未知企業(yè)，就是連糊口都難的鄉(xiāng)鎮(zhèn)企業(yè)。落腳點毫無進展，慢慢感覺在家里呆著如同身陷囹圄，心情從沖動、激動、開心到氣憤、失落、后悔甚至是絕望，心態(tài)逐漸瓦解崩壞，最后為自己貼上了loser的標(biāo)簽。

所以，三思而后行，當(dāng)你面臨是否跳槽或是否轉(zhuǎn)行抉擇時，無論答案是什么，一定要清楚這絕對不是一個瞬間解，而是一個經(jīng)歷過漫長的思想斗爭和深思熟慮之后的產(chǎn)物。你需要先思考現(xiàn)在的工作到底是哪一方面差強人意，具體到關(guān)鍵點比如：薪水與付出嚴(yán)重失衡、晉升通道不清晰明朗、工作內(nèi)容重復(fù)冗長、工作強度大身心俱疲、行業(yè)迅速衰退大背景不景氣、還是人際關(guān)系不和諧領(lǐng)導(dǎo)不賞識？再想想針對以上情況可以通過什么具體的途徑能夠改變現(xiàn)狀或者與現(xiàn)狀共存從而活在當(dāng)下。如果可以得到緩解，那應(yīng)該堅決否決自己的辭職念頭去改變?nèi)ゴ蚱?。如果不行，ok，要在辭職之前就未雨綢繆，盡量在落實好下一份工作的時候或者時機成熟的時候再提出離職。絕對不能像我這樣頭腦發(fā)熱，自命清高，覺得之前工作那么努力也獲得了多方肯定，找工作必然不是問題，升職加薪是遲早的事，真是too young too simple。這樣的離職就如同炒中國的股市，一片綠的時候你一賣它就漲，一片紅的時候你一買它就跌，氣憤的認(rèn)為是命運的不公，其實是自己根本沒有看清現(xiàn)狀，做決定不過腦子的結(jié)果罷了。

自己挖的坑，還是得自己填，解鈴還須系鈴人。6月下旬心情煩躁到極點的時候，轉(zhuǎn)行的想法應(yīng)運而生。于是再也不敢草率做決定的我決定找我爸商量一下，畢竟現(xiàn)在也老大不小了，良心迫使我不能啃老，但又迷失方向，希望能得到一個曲線救國的方法。一起喝點酒微醺之時，鼓起勇氣告訴他我喜歡音樂彈的一首好吉他，樓下就有一家比較大的樂器店正在招聘，我可以教吉他可以賣樂器balabala一大堆。而他就好像沒聽進去一樣，開始回憶我上大學(xué)前報志愿的情景，他說的話我到現(xiàn)在還記憶猶新：“當(dāng)時石油行業(yè)確實如火如荼，所以我?guī)湍銏罅诉@個專業(yè)(油氣儲運工程)，雖然行業(yè)興衰輪轉(zhuǎn)，卻沒想到你剛好趕上了退潮。你從小就喜歡玩游戲，為此沒少去網(wǎng)吧抓你，也沒少揍你。如果當(dāng)時給你報計算機專業(yè)就好了?！蔽抑浪静幌胱屛胰ソ淌裁醇?，也沒聽進去我說的，可是，重點是我聽進去他說的了！?。≌媸且徽Z點醒夢中人，我瞬間就想到了兩個從事互聯(lián)網(wǎng)行業(yè)的同學(xué)(一個純前端&一個半前端半后端)，那時的心情難以用語言來表達，仿佛是行走在黑暗漫長走廊的人看到前方微弱光線的瞬間。不晚！絕對來得及！我瘋狂的告訴自己。與此同時我向這兩個朋友咨詢了一下行業(yè)情況，于是確定了前端之路。And I take a deep breath and I get real high!

在此先行感謝聽我啰嗦的朋友們，這也是一種傾訴，壓抑半年的感情沒想到以這種形式得以釋放，喜悅之情難以言表。隨后就是開了掛一樣的自學(xué)經(jīng)歷了。

內(nèi)容：編輯器選擇、自學(xué)方法選擇、筆記、寫代碼、時間管理

這是我自學(xué)前端時的第一個頁面。當(dāng)時還在糾結(jié)到底用什么編輯器好，于是到網(wǎng)上看各種編輯器的優(yōu)缺點，從Vim、Sublime text這種輕量級編輯器到Dreamwaver、WebStorm等大型IDE，有同樣經(jīng)歷的朋友應(yīng)該也知道，網(wǎng)上褒貶不一，眾說紛紜，看的是一頭霧水?，F(xiàn)在想想當(dāng)時真是可愛，所以在這里告訴還在為編輯器糾結(jié)的剛?cè)腴T的朋友，唯一的擇偶標(biāo)準(zhǔn)就是顏值(順眼)和身材(順手)。因為處于啟蒙階段的我們實在是沒有什么必要去關(guān)心它們多么強大的功能，不僅用不到，還會在分散注意力。如果硬要我推薦一個，那就Sublime Text3，不為別的，就是啟動快！而到后面能力有所提升，視野漸漸開闊以后，編輯器的選擇也就沒有那么困難了，需要用到什么功能就用什么編輯器，公司需要你用什么就用什么，不需要你自己選擇。而且就我目前的經(jīng)驗來看，隨便哪個編輯器都能很快上手，因為基礎(chǔ)功能都一樣，就是熟悉界面、快捷鍵、特殊功能的問題了。你聽過跨瀏覽器有兼容性問題，但你聽過前端代碼跨編輯器有什么問題嗎？

從第一個html文件到現(xiàn)在為止，去掉期間各種節(jié)假日、推不掉的舊友小聚以及春節(jié)前自制力失控玩了近一個月的游戲，粗略估算自己真正在自學(xué)的時間只有半年左右，很多人都說我進步快。講真，如果你也有我上面闡述的類似經(jīng)歷，你肯定比我快得多。因為我不僅自制力差，而且從小就看不進去白紙黑字的書。所以無論你現(xiàn)在是在上學(xué)，還是準(zhǔn)備進擊前端行業(yè)在自學(xué)，亦或是已經(jīng)工作但是想通過自學(xué)來提升，那就行動起來吧，You can do it！

很多人認(rèn)為玄學(xué)說錯了是自學(xué)有什么好說的，不就是摒棄一切雜念，埋頭苦讀奮筆疾書嘛？其實不然，在我看來自學(xué)這種形式的學(xué)習(xí)最容易缺少動力、鞭策力，沒有達到自己既定目標(biāo)而中途放棄的人不勝枚舉，尤其是對那些自學(xué)時間少，條件有限的人群而言。最形象的例子就是自學(xué)好比健身，鍛煉少沒任何效果健身卡墊桌腳，鍛煉多傷筋動骨身體吃不消，而且在沒有任何指導(dǎo)的情況下還容易練的左右肌肉不對稱，自己看著都難受。所以，來不及解釋了，快上車。

自學(xué)接受知識基礎(chǔ)方式從大方向上來講個人認(rèn)為主要分為死磕專業(yè)書籍和死磕專業(yè)視頻兩種。只有最合適自己的，沒有大眾最佳款。所以一定要在自學(xué)前先對自己有個客觀評價，然后對號入座，這樣才能更高效的自學(xué)。這非常重要，試想如果看書或者看視頻的時候都能看睡著了，那還談什么自學(xué)。如果能清晰的明確自己接受知識的習(xí)慣，就可以有效的避免這些不經(jīng)意的厭倦或者困意，從而在自己可利用的時間內(nèi)，最大程度的縮小不必要的時間流失。隨著時間的步伐，慢慢的注意力開始高度集中，心無旁騖。不知道大家有沒有這樣的感受，一邊工作一邊一個耳朵聽歌，不知不覺等自己完成了自己的任務(wù)或者回過神來才意識到，上一首歌是what？想不起來了？這也許就是所謂的進入狀態(tài)，這也與我說的自學(xué)過程不謀而合。正是因為我深知自己看書犯困，所以我選擇看視頻，并且整個自學(xué)過程中也主要是以看視頻(秒味、慕課)為主。群里也有很多群主分享的相關(guān)電子書籍，如果你感興趣，盡情去下載，不用排隊。如果你能選擇適合自己的自學(xué)方式，那么恭喜，火鍋底料有了。

好記性不如爛筆頭，自學(xué)不僅要汲取知識，還得轉(zhuǎn)化知識，其中一種方式就是勤做筆記。這一點我做的還算不錯，半年來，一本pc端一本移動端合起來也差不多一整本了，反正你們也看不見。不過重點是，準(zhǔn)備好一個檔次稍微高一點的筆記本，當(dāng)你面對這么好的一個筆記本，心想總不能在上面胡寫亂畫吧，那就老老實實的好好寫字，寫什么呢？照搬書籍原文？或者是照搬視頻里面的ppt？肯定不是，不然書和打印機要收你的智商稅了。所以肯定是寫經(jīng)過自己的腦回路之后，提煉的精華部分，這樣以后再翻看的時候才能體現(xiàn)出筆記的意義。All right，好習(xí)慣你這么被你輕易的養(yǎng)成了。而且我在看視頻的時候會在另一個草稿本上刻意模糊的記錄知識點，看完視頻后一個一個回憶，就像背單詞，如果這個記得很清晰，ok next one，如果不行，那就再看一下視頻相關(guān)的知識點，直到所有本節(jié)知識點clear，抄起筆頭就是一頓記。這點對于看書的朋友同樣適用。菜品有了！

眼過千遍不如手過一遍，是時候該展現(xiàn)真正的技術(shù)了，真槍實彈的寫代碼，這就是所學(xué)知識的終極輸出手段。這也是一個老生常談的問題，也確實是一個答案只能是量變產(chǎn)生質(zhì)變的的問題。對于一個復(fù)雜抽象知識點或者體系的記憶程度而言，如果你不想很快的忘記，那至少寫一遍；想長一點時間忘記，那至少在若干時日后再寫一遍；什么？你想要通過某種方式達到倒背如流刻骨銘心的地步？對不起，她只是一個人生過客。曾經(jīng)我有就這樣的困惑，一個功能不是特別復(fù)雜的自定義拖拽，幾個月前我來回寫了兩三遍，但是在我近期學(xué)OOP的重構(gòu)這個拖拽的時候，第一次我竟然把把onmousemove和onmouseup這兩個事件綁定到了被拖拽元素而不是document身上，其中禁用拖拽時的系統(tǒng)默認(rèn)事件return false也忘記寫了，為此懊惱不已。這也引申出兩個問題：我為什么沒記住和我需不需要記這么清楚？第一個問題反映出我雖然寫過幾次，但短期記憶使然，并沒有徹底理解他的底層原理，于是我又重新記憶了一遍，一個是讓元素離開可視區(qū)域還能回來，另一個是拽圖片和帶文字的元素也能拽的動。第二個問題自己沒想明白，向朋友請教，他的答復(fù)是：無論是工作還是不刻意刁難你的面試過程中，只要能對答如流并理清清晰的脈絡(luò)就行，不至于卡殼和無從下手。所以，我的理解是勤寫代碼對我們最大益處就是更容易的接近底層原理去理解，并且有助于永久性的思路建設(shè)，日積月累，善于重構(gòu)，于是一個業(yè)界大牛粉墨登場了，對就是你，不要往別處看，說的就是你！那么，火鍋點火走你！

自學(xué)那些小事
倉庫https://github.com/codefine/p... (別因為我是一枚小鮮肉而憐惜我，用star粗暴的來吧)

Reading、Watching、Writing、Noding、Reading、Wa…...Wait！誤解太深了，我們不是錢多話少死的早的人肉代碼器，也不會陷入這樣的死循環(huán)，什么時間做什么事情我們比誰都清楚！不過確實，如果停止學(xué)習(xí)，那將被這個爆炸式發(fā)展的行業(yè)所淘汰，干這一行就要付出和犧牲更多，才能不說造福世界起碼出人頭地，這也很容易積勞成疾，所以不論工作還是自學(xué)，我們都要學(xué)會時間管理。先來個沒錯就是我的反面教材：由于原來沒有意識到這個問題，還有各種壓力，加之對這個行業(yè)的熱情，于是我自學(xué)的時間管理就是沒有管理。除了吃飯睡覺其余的時間幾乎全部用來學(xué)習(xí)，半年以來平均每天10小時毫不夸張。晚上睡覺的時間由寫沒寫完代碼決定，早上起床的時間由還有沒有意識決定，期間最長紀(jì)錄是將近一個月沒下樓沒出家門，也得益于家人的悉心照料和督促，要不然頭上都能長出蘑菇來。也許科比在下一次說只有他能看到凌晨四點的太陽的時候我會義正詞嚴(yán)的反駁他。當(dāng)然這是我年前自制力失控之前的時候，也是一個徹頭徹尾的反面教材，千萬別學(xué)我。而正面教材是：連續(xù)寫代碼一個小時無論寫沒寫完，至少休息5到10分鐘，一方面可以整理思路從而更高效的完成余下任務(wù)，另一方面你對身體好點身體也會對你余生請多指教。以后的工作和學(xué)習(xí)生涯中，我將堅決執(zhí)行這條原則。勞逸結(jié)合，拒絕猝死，從你我做起。鍋里的菜快熟了，我們?nèi)フ{(diào)一下油碗兒吧。

自學(xué)期間如果遇到自己解決不了的問題怎么辦？這個問題問得好，這也正是我們這個群存在的意義。我們要充分貫徹群內(nèi)不懂就問精神的同時，跟隨群主以及眾管理理解先想、再查、后問的三步走思想，切實做到有的放矢的提問方式，拒絕假大空的無理取鬧，把問題。。。好了，你不要說了，我選擇去吃火鍋，廣告你都打到自家門口兒了。

內(nèi)容：整站思路建議、素材來源

個人Demo頁地址：https://codefine.github.io/ ，各位先睹為快。

對于github這個網(wǎng)站而言，我也是懂得pages的皮毛而已，而且pages功能也只是github全站功能的冰山一角，最重要的功能個人認(rèn)為還是他的共同協(xié)作主線分枝系統(tǒng)，并且網(wǎng)站本身也是全球最重量級的開源社區(qū)，希望大家多多關(guān)注，多多學(xué)習(xí)，早日貢獻自己的開源作品而造福一方。這個網(wǎng)站的存在，對于我們而言，就是一筆無價的財富。

如果了解pages的功能，那我建議先去看看官方說明https://pages.github.com/，看不明白的話百度一下，相關(guān)攻略也比較多。如果還是沒研究明白，那也沒關(guān)系，這也是我下一次分享的主題——如何通過github的pages功能輕松搭建個人主頁。我將帶著大家從github注冊、用于展示個人主頁的倉庫建立、簡易個人主頁搭建、克隆和同步這四個環(huán)節(jié)，一步一步由淺至深的完成。而且，圖文并茂，過程中只要有新的頁面或者界面都有對應(yīng)的全新截圖和說明，個人認(rèn)為是迄今為止最為細(xì)致的攻略了，細(xì)致到令人發(fā)指！力爭全民輕松搭建個人主頁！屆時希望大家不要錯過，精彩等著你。

在這里我先放出自己繪制的簡明流程圖，整個過程中不要你具備后端知識。配合官方文檔說明食用更佳。

關(guān)于個人demo展示的這個網(wǎng)站，由于時間倉促，制作過程從頭天中午吃完飯一直到次日凌晨4點左右，僅僅用了不到1天的時間，UI、代碼優(yōu)化等方面做的確實不夠好，但是目前這個頁面對于我而言，也僅僅只是陳列我自學(xué)期間的積累，能在面試的時候加點分就行了。到后期如果有好的idea并認(rèn)認(rèn)真真做個人網(wǎng)站的時候會考慮買域名和云服務(wù)器。整站用bootstrap搭建，不得不說這款框架真心適合不懂設(shè)計，又不想太難看，還想做到響應(yīng)式的人群了，而且這種UI框架API文檔相對簡單易懂，邊查邊寫，幾乎不用對原框架進行改寫就能做出一個比較優(yōu)雅的網(wǎng)站了。在此也推薦各位小伙伴，如果沒有什么好的idea而且想快速搭建demo頁，那這款框架是不二之選。

網(wǎng)站中的demo素材均來源于自學(xué)期間的積累，但不是全部不積累，只是很少的一部分可以拿得出手的，剩下的家丑不可外揚。其中最得意的就是那個移動端安踏去打破的demo，年前做到年后，陪我跨了個年，而且所用到的較為新穎的思路比如css3構(gòu)建的偽圓柱結(jié)構(gòu)，以及原生js陀螺儀相關(guān)api實現(xiàn)的手機位置與場景交互，都是一邊研究一邊寫代碼。也非常感謝秒味網(wǎng)站的相關(guān)導(dǎo)師和群友，在不同時期給我了不同程度的啟發(fā)和指引。所以為什么我的整個學(xué)習(xí)過程幾乎是加速狀態(tài)，這全都得益于那些看得見和看不見的良師益友，在此特別感謝期間為我答疑解惑的前輩和群友們。

轉(zhuǎn)眼就到了快要和大家說再見的時候了。這個時候如果有一首《What’s Up - 4 Non Blondes》來作為離場時的bgm，那就再好不過了?；厥渍恼?，雖然文風(fēng)略顯戲謔，但均是真情流露，本人也不擅長寫一板一眼的教條式文章。所以希望這篇文章帶給大家的是一種不一樣的感受，全當(dāng)是聽了故事會里的一篇小故事，也是極好的。

我想，互聯(lián)網(wǎng)行業(yè)在未來幾年內(nèi)的發(fā)展，肯定會持續(xù)這種爆炸的態(tài)勢。那么，既然我們選擇了這條道路，無論你是被迫還是主動都已經(jīng)無所謂了，因為經(jīng)歷過隔行如隔山的我已經(jīng)深深的意識到，我可能，終于將要走向了一條正確的道路，而已經(jīng)在這條路上的你們就應(yīng)該珍視眼前的一切。寶劍鋒從磨礪出，梅花香自苦寒來，持之以恒，身體力行，盡自己最大的努力在還算可控的幾年內(nèi)鶴立雞群，這樣，未來的自己和家人一定會為現(xiàn)在你而驕傲自豪。雖然我還處于沒找到工作沒入門的階段，但經(jīng)歷了這么多，我的心態(tài)已經(jīng)擺出了一個大寫的正，就等著去工作，去拼搏，去證明我辭職轉(zhuǎn)行是一個多么正確的選擇了。我愿意相信這是一個可以通過付出百倍努力就能遨游的時代，而互聯(lián)網(wǎng)行業(yè)就是我們的星辰大海！