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

標簽： 轉行 自學

原創：Michael.Lu 277133779@qq .com 轉載注明出處

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

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

背景介紹

自學經歷與經驗

demo頁制作心得

以及對未來的展望

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

內容：前工作狀況(機械)、離職經歷、心態轉變、目標確定

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

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

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

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

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

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

內容：編輯器選擇、自學方法選擇、筆記、寫代碼、時間管理

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

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

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

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

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

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

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

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

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

內容：整站思路建議、素材來源

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

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

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

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

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

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

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

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