最近我侄子快實習了，學校跟培訓機構合作，交兩萬多可以參與一個培訓，培訓四個月，可以包就業。侄子問我，是否要去培訓，培訓出來可以找到工作嗎？
現在很多大學生，上學的時候談戀愛，玩遊戲，快要畢業就焦慮了。大學四年什麼都沒學到，之前也沒考慮未來工作方向，到快要畢業了，迷茫，不知道能做什麼。
我給他的答案是：這個培訓，並不是交了錢，知識就灌到腦子裡的，你沒有基礎，沒有學習能力，沒有狠勁，可能學了四個月跟現在水平差不了太多。
最後，建議考研，或者學一下前端技術。
程式設計師分前後端，後端有c，java，.net等後端語言支撐，競爭比較激烈。前端入門比較容易，只要按照以下學習路線，持續輸入，成長還是很快的。
下面我介紹一下，小白從零開始學習web前端技術路線圖，文章比較長，主要是我對過往學習路線的總結，建議看完收藏，需要的時候用pc打開學習：
前言首先，自學是件很苦的事情，學習本身就是件反人性的過程，更何況在一個從零開始的全新領域獨自奮鬥，這裡不是要打擊你，而是要你認真想好，結合自身的環境、條件。不然半途而廢浪費的不僅是時間，還有精力、金錢。
如果你已經想好決定去做，那就不要猶豫，堅持下去你就可以成功，很多學渣都可以，你沒有什麼不可以的，一定要相信自己。
興趣是最好的老師，很多人對這句話非常反感，被生活所迫，談興趣不可笑嗎？其實不是，問問自己對技術有沒有興趣，坐不坐得住。做自己喜歡和感興趣的事情才能夠走的更遠和更久。
做好持續學習，時刻保持學習的心態，說實話現在社會，科技的發展非常之快，技術的更新更是如此，如果你覺得學習一門技術就可以吃到老，我勸你還是打住，可能考個公務員更適合你（不要槓精，我並不是說公務員不要學習，自己體會就好）。
永遠不要覺得遲，種一棵樹最早是十年前，其次是現在。只要行動然後堅持下去，你就幹掉了 80% 的人，自學的人很多，但是堅持下來的沒有幾個。就像郭德綱說過，不是我的相聲說的多好而是我活了下來。
一、工具篇工欲善其事，必先利其器，所以在開始之前選擇一個合適好用的編輯器是很重要的，工具不再多，在於好用就行，除了編輯器，我們也要掌握其他的一些工具，才能夠讓我們在學習的道路上更加的順暢。
1、Visual Studio Code微軟開源免費產品，受到非常多技術人員的喜愛，基本上成為前端開發者的必備編輯器，強大的插件擴展，可以靈活的打造自己喜歡的風格。給你們送上常用插件列表拿走不謝。
Visual Studio Code 官網下載地址：https://code.visualstudio.com/。
VSCode 拓展推薦：https://github.com/varHarrie/varharrie.github.io/issues/10
使用頂級 VSCode 擴展來加快開發 JavaScript：https://www.html.cn/archives/9507
vscode 插件推薦：https://segmentfault.com/a/1190000006697219
2、科學上網每個程式設計師都應該具備的工具和能力，否則很多事情都無法辦到，至於怎麼做，你可以自己查閱資料，這裡不就不在多說了。而且下面推薦的很多資源都是需要科學上網之後才能訪問，所以一定要學會。
不懂就問google，問百度，一個人的知識是有限的，掌握了搜索的技巧才能以不變應萬變。還搞不懂就請教別人，或者請教我，私信都會回復。
全球最大的開源交流社區，沒有帳號的趕緊註冊，在這有很多優秀的資源項目，各種大神。觀摩優秀代碼是我們學習的很好路徑。另外在開發過程中，很多時候任務重、時間緊，應該避免重複造輪子，這裡能夠找到你需要的工具或代碼。
對應的國內版的技術問答交流社區，如果你英文不好，也可以在這裡找找答案。
5、MarkdownMarkdown 輕量級標記語言，簡潔的語法，讓作者專注內容而非複雜的格式要求，我認為人人都應該掌握，特別是經常寫博客的人。想想你在用 world 時的場景，每次寫完文章之後，不得不話費很多時間進行格式的排版，使用它你就可以避免這些煩惱。
Markdown 中文文檔：https://markdown-zh.readthedocs.io/en/latest/
HTML 篇一些準備就緒之後，開始我們的學習之旅，首先我們先從 HTML 開始。
HTML名為「超文本標記語言」，是整個頁面的結構基礎，它承載了我們的頁面內容。
1、基礎w3school 在線教程（http://www.w3school.com.cn/h.asp）：內容非常的基礎，適合小白學習，對 HTML 有一個入門了解。
freeCodeCamp（https://www.freecodecamp.cn/）：一個非常好的入門學習網站，採用闖關的模式，就像遊戲打怪升級一樣，非常的有樂趣，準備自學的小夥伴不妨試試。
2、進階MDN HTML（https://developer.mozilla.org/zh-CN/docs/Web/HTML）：這裡的內容質量更好，錯誤更少，內容也更加的全面。
HTML 和 CSS 編碼規範（https://codeguide.bootcss.com/）：掌握一些代碼技巧，寫出更好，更高質量的代碼。
CSS 篇HTML 承載了頁面的內容，但是有時候會略顯單調與「醜陋」，CSS 的作用就是為這些內容加上樣式，就像一個美女也要有漂亮的外衣去修飾才會更加漂亮，「人靠衣裝馬靠鞍」，網頁的內容也是需要穿上一件漂亮的外衣去吸引用戶。而 CSS 則完成了這個裝飾。
1、 基礎學習 CSS 布局（http://zh.learnlayout.com/）：帶你一步一步的完成 CSS 的學習。
CSS 參考手冊（https://css.doyoe.com/）：對CSS可以有一個全面入門的學習。
w3school CSS 參考手冊（http://www.w3school.com.cn/cssref/index.asp）：同上也是非常基礎的知識，適合入門。
2、進階書籍：
《CSS揭秘》（https://book.douban.com/subject/26745943/）：非常推薦的一本 CSS 書籍，可以學到很多鮮為人知的技巧。
在線系列：
MDN CSS（https://developer.mozilla.org/zh-CN/docs/Web/CSS）：和 HTML 都是 MDN 社區文檔，質量保障。
HTML和CSS編碼規範（https://codeguide.bootcss.com/）：掌握一些代碼技巧，寫出更好，更高質量的代碼。
大漠老師的CSS系列（https://www.w3cplus.com/CSS3）：大漠老師對CSS有非常深入的認識和豐富的實踐經驗，《圖解CSS3：核心技術與案例實戰》的作者。
大漠老師的SASS系列（https://www.w3cplus.com/blog/tags/302.html）：大漠老師的 sass 文章系列。
SASS中文網（https://www.sasscss.com/）：成熟、穩定、強大的 CSS 擴展語言解析器，它可以讓你使用變量，條件語句等書寫 CSS。
Stylus官網（https://stylus.bootcss.com/）：同樣是 CSS 預編譯器，但它省去了一些符號，讓 CSS 寫起來更加的簡潔，清爽。
HTML5和CSS3（https://github.com/qianguyihao/Web/tree/master/07-HTML5%E5%92%8CCSS3）：詳解HTML5 和 CSS3。
知識點：
別說你懂CSS相對單位（http://wuyuying.com/blog/archives/css-in-depth-relative-units/）：深入了解 CSS 的相對單位rem，em區別。
CSS 進階內容（https://github.com/coconilu/Blog/issues/29）：常見知識點的深入了解。
Flex 布局教程：語法篇（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）：阮一峰老師的flex講解。
Flex 布局教程：實例篇（http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）：阮一峰老師的flex講解。
「CSS相關」目錄存檔（https://www.zhangxinxu.com/wordpress/category/css/）：張鑫旭大佬的CSS系列文章，深入淺出，《CSS世界》作者。
CSS繪製的40種形狀和圖形（http://www.open-open.com/lib/view/open1476240478941.html）：利用CSS繪製出的40各種圖形形狀。
CSS-大前端（http://www.daqianduan.com/tag/css）：一些 CSS 的知識點。
JavaScript 篇有了 HTML 與 CSS，網頁也就有了內容和樣式，但是會缺少與用戶的互動，所有的內容都靜靜的躺在那裡死氣沉沉。就好比一個美女穿著漂亮的衣服在你面前一動不動好像也沒有什麼吸引力，但如果又唱歌，又跳舞，還向你拋媚眼，那可真就把持不住了。JavaScript 就是給網頁添加這樣的「行為」。
Javascript 簡史（https://blog.csdn.net/qq_32135281/article/details/81667714）：可以簡單了解下，JavaScript 發展由來。
1、 基礎書籍
《JavaScript權威指南 （第6版）》（https://book.douban.com/subject/10549733/）：俗稱「犀牛書」，JS 的經典之作，提升JS技能的必備書籍，我的JS基礎知識全都是啃這本書啃下來的，剛開始讀時可能有會有些吃力，但是只要堅持下來收穫滿滿。
《JavaScript高級程序設計（第3版）》（https://book.douban.com/subject/10546125/）：俗稱「紅寶書」，JavaScript 超級暢銷書，全書闡述了JavaScript語言實現的各個組成部分，ECMAScript，DOM，BOM，事件，面向對象等等，隨時拿出來翻翻，更加深入了學習 JS。
在線系列
除了書籍之外，也有很多優秀的在線教程，可以幫助我們更好的學習。
現代 Javascript 教程（https://zh.javascript.info/）：非常全面的JavaScript 學習教程，從基礎到高階，非常詳細，相信你會愛上它的。
廖雪峰的JavaScript教程（https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000）：廖雪峰系列教程。
JavaScript 標準參考教程（alpha）（https://javascript.ruanyifeng.com/）：阮一峰老師的系列教程，通俗易懂，案例豐富。
2、 進階JavaScript語言精粹（https://github.com/qibaoguang/Study-Step-by-Step/blob/master/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/javascript_the_good_parts.md）：揭示JavaScript中的精華。
JavaScript 秘密花園（http://bonsaiden.github.io/JavaScript-Garden/zh/#other.timeouts）：對 JS 一些的核心知識點進行梳理講解，例如：this，閉包/作用域，構造函數，原型等等，都是面試必考知識點。
ECMAScript 6 入門（http://es6.ruanyifeng.com/）：阮一峰老師ES6入門書籍，全面介紹 ECMAScript 6 新引入的語法特性。
JavaScript使用技巧（http://www.jstips.co/zh_CN/）：可以認識到一些你平時沒有接觸過的小技巧。
深入理解javascript原型和閉包系列（http://www.cnblogs.com/wangfupeng1988/p/4001284.html）：詳細解釋了原型和閉包，看完之後對原型與閉包讓你徹底明白。
大漠老師的JavaScript系列（https://www.w3cplus.com/JavaScript）：大漠老師的JavaScript系列文章。
JavaScript 算法與數據結構（https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md）：基於 JavaScript 的算法與數據結構，讓你愉快的學習。
JavaScript中的正則表達式（https://blog.csdn.net/qq_32135281/article/details/78274563）：我自己的一篇正則表達式的文章，希望對你有幫助。
30分鐘掌握ES6/ES2015核心內容（上）（https://segmentfault.com/a/1190000004365693）
30分鐘掌握ES6/ES2015核心內容（下）（https://segmentfault.com/a/1190000004368132）：闡述了一些常用的ES6的知識點。
學用 JavaScript 設計模式（https://www.oschina.net/translate/learning-javascript-design-patterns）：闡述JavaScript程式語言中經典和現代的設計模式。
你不懂JS（系列叢書）（https://github.com/getify/You-Dont-Know-JS/tree/1ed-zh-CN）
InterviewMap（https://yuchengkai.cn/docs/frontend/#%E5%86%85%E7%BD%AE%E7%B1%BB%E5%9E%8B）：聚集了很多知識點，包括JS，瀏覽器，性能等。
30 秒就能理解的 JavaScript 代碼片段（https://www.html.cn/30-seconds-of-code/）：讓你更好的理解一些有用的JS代碼片段。
Jquery篇雖說現在已經是單頁面應用時代，有React，Vue 這種強大的框架可以使用，但也不缺乏一些老的項目需要維護，而且在學習之初，可以用它做兩個簡單的應用還是不錯的，可以相對了解下基本用法，它可以讓你更好，更方便的操作DOM。但不建議再深度學習。
《鋒利的jQuery(第2版)》（https://book.douban.com/subject/10792216/）：一本很不錯的 Jquery 學習書籍。
jQuery API中文文檔（https://www.jquery123.com/）：JQuery 中文教程。
TypeScript篇ES6 的超集擴展，嚴格的數據類型，帶來更好的維護，適合大型項目的開發工作，有人說它是未來的發展趨勢，你說要不要了解？
TypeScript 中文手冊（https://typescript.bootcss.com/）：官網翻譯版。
TypeScript Handbook（中文版）（https://zhongsp.gitbooks.io/typescript-handbook/content/）：中文版。
RxJS 中文文檔（https://cn.rx.js.org/）：中文官網。
30 天精通 RxJS (01)：認識 RxJS（https://ithelp.ithome.com.tw/articles/10186104）：繁體字可能閱讀起來並沒有那麼順暢。
Ajax篇掌握了的HTML、CSS、JavaScript時，這時候可以嘗試自己做一些項目了，而項目中肯定會有數據的交互，這時候就是 Ajax 的用武之地了。
廖雪峰AJAX（https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000）：廖雪峰大佬的博客知識。
XMLHttpRequest 對象（https://wangdoc.com/javascript/bom/xmlhttprequest.html）：阮一峰老師的AJAX詳解。
JSON風格指南（https://github.com/liuxiaodeng/free-programming-books/blob/master/free-programming-books-zh.md#javascript）：前後端的交互數據通常都是 JSON 格式，所以了解 JSON 是必要的。
NodeJS與模塊化NodeJs 的出現讓前端發展進入了一個新的領域，並且滋生出專業的 Node 工程師，不僅如此 Node 在前端模塊化，工程化起到很重要的作用，所以了解是必須的，如果感興趣的可以深入學習，可以向全棧工程師發展。
Javascript模塊化編程（一）（http://www.ruanyifeng.com/blog/2012/10/javascript_module.html）：模塊的寫法
Javascript模塊化編程（三）：require.js的用法
前端模塊化開發那點歷史（https://github.com/seajs/seajs/issues/588）：了解下，前端模塊化的發展。
Node.js 官方（https://nodejs.org/zh-cn/）
狼叔：如何正確的學習Node.js（https://github.com/i5ting/How-to-learn-node-correctly）：狼叔江湖地位頗高，《更了不起的 Node.js》的作者。
全棧工程師之路-Node.js（http://i5ting.github.io/nodejs-fullstack/）
框架篇隨著日益複雜的用戶需求，與系統的複雜度上升，傳統的開發模式日漸的很難滿足，此時的三大框架孕育而生，讓開發者更加高效，可復用，把關注點都放在數據層的操作，免去那些繁瑣而又重複的視圖操作。
現在框架的能力已經是前端開發人員必備的技能之一也是趨勢，三大框架的「最終目的」都是一致的，我認為開發者不必糾結於到底應該選擇哪一個學習，可以選擇其中的兩個是最好的。對於剛入門的人來說，建議選擇 Vue 入手，比較簡單，靈活。
MVC，MVP 和 MVVM 的圖示（http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html）：在學習框架之前，你應該了解下MVVM的設計思想。
框架原理（https://yuchengkai.cn/docs/frontend/framework.html）：了解一些框架的基本原理。
React
React官網（https://www.reactjscn.com/）VueVue（https://cn.vuejs.org/index.html）：官網，最好的學習資料。圖形可視化隨著日益增長的數據，如何利用高效的利用數據，是每個企業都考慮的問題，而人的眼睛看到的東西要勝過閱讀的問題，俗話說「一圖勝千言」就是這個道理，所以數據的可視化就會格外的重要，以下都是我常看的一些技術，書籍，和關注的可視化開源庫。
《HTML5 Canvas核心技術》（https://book.douban.com/subject/24533314/）：學習 Canvas 比較好的一本書籍。
Canvas系列（https://www.w3cplus.com/search/node/canvas）：大漠老師的 Canvas 系列。
Echarts（https://www.echartsjs.com/index.html）
Highcharts（https://www.highcharts.com.cn/）
AntV（https://antv.alipay.com/zh-cn/index.html）
Mapv（https://mapv.baidu.com/）
工程化與版本控制篇Git
版本控制工具，很多新手往往把 git 與 github 傻傻分不清楚，二者是不同的東西，一定要去區分清楚。
Git教程（https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000）：廖雪峰老師的教程。
Learn Git Branching（https://learngitbranching.js.org/）：一種有趣的學習 Git 的方式。
GitHub 漫遊指南（https://github.com/phodal/github）：作者是一個極客。
git - 簡易指南：http://www.bootcss.com/p/git-guide/
Gulp
自動化構建工具，項目打包部署前的壓縮合併，節省時間，提高開發效率。
Gulp 中文網（https://www.gulpjs.com.cn/）：官方教程。
gulp詳細入門教程（http://www.ydcss.com/archives/18）：非常詳細的實現步驟。
Webpack
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。
Webpack中文文檔：https://www.webpackjs.com/
webpack原理：https://juejin.im/entry/5b0e3eba5188251534379615
Webpack揭秘——走向高階前端的必經之路：https://juejin.im/post/5badd0c5e51d450e4437f07a
Webpack HMR 原理解析：https://zhuanlan.zhihu.com/p/30669007
webpack 熱加載原理探索：http://shepherdwind.com/2017/02/07/webpack-hmr-principle/
Babel
JavaScript代碼編譯器，可以讓ES6及以上語法轉換成瀏覽器支持的語法，一般會在框架的腳手架中自行配置。
Babel（https://babel.bootcss.com/）：官網教程。代碼質量
ESLint（https://eslint.bootcss.com/）：javascript代碼檢測工具幫助我們寫出更規範的代碼。瀏覽器與HTTP瀏覽器的常見知識點（https://yuchengkai.cn/docs/frontend/browser.html）：需要我們了解的常見知識。
網站安全（https://yuchengkai.cn/docs/frontend/safety.html）：幾種常見安全問題。
同源限制（https://wangdoc.com/javascript/bom/same-origin.html）
從URL輸入到頁面展現到底發生什麼？（https://github.com/ljianshu/Blog/issues/24）
深入理解瀏覽器的緩存機制（https://github.com/ljianshu/Blog/issues/23）
網頁性能管理詳解（http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html）
關於Http協議，你必須要知道的（https://github.com/ljianshu/Blog/issues/22）
HTTP 協議（https://github.com/coconilu/Blog/issues/135）
HTTP2 協議（https://github.com/coconilu/Blog/issues/134）
瀏覽器同源政策及其規避方法（http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html）
跨域資源共享 CORS 詳解（http://www.ruanyifeng.com/blog/2016/04/cors.html）
總結 XSS 與 CSRF 兩種跨站攻擊（https://segmentfault.com/a/1190000004623125）
性能優化性能優化（https://yuchengkai.cn/docs/frontend/performance.html）：常見性能優化。
前端性能優化的七大手段（https://www.cnblogs.com/xiaohuochai/p/9178390.html）
延遲加載(Lazyload)三種實現方式（https://zhuanlan.zhihu.com/p/25455672）
詳解懶加載和預加載（https://www.geekjc.com/post/58d94d0f16a3655650d6fafe）
前端優化帶來的思考，淺談前端工程化（http://www.cnblogs.com/yexiaochai/p/4901341.html）
推薦幾本與Web性能優化有關的書籍（https://w3ctech.com/topic/108）
vue + webpack 前端性能優化（https://juejin.im/post/5bc5c106e51d450e7a253e1b）
SEO
SEO優化實戰（https://imweb.io/topic/5682938b57d7a6c47914fc00）博客系列現在是一個信息爆炸的時代，網上有很多優秀的博客文章，每個人的精力都是有限的，不可能關注到所有的博客，每個人關注點可能不太一樣，所以關注的個人博客也會不同，這些推薦幾個我比較常看的幾個高質量博客。而且是持續更新的。
阮一峰的個人網站（http://www.ruanyifeng.com/home.html）：阮一峰老師江湖地位不必多說，博客不止有技術，現在阿里任職。
廖雪峰的官方網站（https://www.liaoxuefeng.com/）：廖雪峰老師寫過很多優秀的系列教程，值得去學習。
張鑫旭（https://www.zhangxinxu.com/）：專注前端技術的大牛之一，出版《css世界》一書。
W3cplus（https://www.w3cplus.com/）：大漠老師在手淘任職，CSS，HTML 有著豐富的經驗。
前端入門和進階學習筆記（https://github.com/qianguyihao/Web）：從零開始自學，然後進入京東，記錄作者一路走來的學習筆記。
團隊
奇舞周刊（https://weekly.75team.com/）：收集每周前端精華文章。
美團技術團隊（https://tech.meituan.com/）：分享一些美團的技術路線。
JavaScript Weekly（https://javascriptweekly.com/）：每周都會分享一些 JavaScript 優質內容。
印記中文周刊（https://weekly.docschina.org/）：如果你對英文有閱讀障礙的話，印記幫你翻譯。
凹凸實驗室（https://aotu.io/index.html）：京東團隊。
淘寶前端團隊FED（http://taobaofed.org/）：淘寶前端團隊，不必多說了。
網易FEG前端團隊（http://feg.netease.com/）：網易的前端團隊，網易的產品一直都是我最喜歡的。
IMWeb前端博客（https://www.imweb.io/）：騰訊公司前端團隊，負責QQ的相關業務你就知道了，都是億級別。
tutorialzine（https://tutorialzine.com/）：高質量教程和文章庫。
項目資源前端技能匯總（http://html5ify.com/fks/）：一個前端工程師需要的技能點和學習資料。
You-need-to-know-css（https://lhammer.cn/You-need-to-know-css/#/）：一個CSS的優質項目，純 CSS 實現我們項目中很多常用，不常用的樣式。
JavaScript libraries（https://www.javascripting.com/）：一些優秀的JavaScript 開源庫。
awesome-web-dev-books（https://github.com/jobbole/awesome-web-dev-books）：前端經典學習書單。
前端 TOP 100（https://www.awesomes.cn/rank）：基本涵蓋了所有前端在用的開源項目，我覺得收藏這一個就夠了。
常用工具CSS Sprites Generator（https://www.toptal.com/developers/css/sprite-generator）：雪碧圖的在線製作工具。
Lorem Picsum（https://picsum.photos/）：好用的圖片臨時佔位符。
Md2All（http://md.aclickall.com/）：優秀的現在 Markdown 編輯器。
優波設計（https://ubuuk.com/）：優秀的設計導航網站，幫助你更好的尋找資料。
搬書匠（http://www.banshujiang.cn/）：書籍搜索下載。
史萊姆導航（http://www.slimegps.cn/）：資源搜索。
codePen（https://codepen.io/）：在線代碼編輯工具。
Iconfont（https://www.iconfont.cn/）：阿里的字體圖標庫，支持多種格式，下載圖片，在線使用，SVG等等。
Can I use（https://www.caniuse.com/）：可以查看瀏覽器兼容 CSS 情況。
在線工具（https://tool.lu/）：工具資源導航。
最後內容比較多，如果以上都掌握了，月入兩萬不是夢。
所以，前端和後端最大的區別，後端可能會sql和java就可以幹活，前端涉及的面比較廣，需要持續不斷的學習。
以上內容，你不需要想一年就全部搞定，如果你是小白，可以把戰線拉長到三五年，在項目中學習會成長更快。
快速具備可對話能力沒有太多訣竅，重點就是放下身段，磨厚臉皮，不懂就問。 每個人都會有知識盲區，抓住機會向身邊任何層次/背景的人請教，收穫的是自己的成長。
最後，祝各位有個美好的前程！