我是剛開始學習JS的小白，面對複雜的學習路徑，層出不窮的框架工具無所適從，不知道從哪裡學起怎麼辦？
作為一個剛剛開始學習javascript的小小白，平時有空也喜歡逛知乎，發現雞湯很多，推薦也很多，說這個框架好，那個框架好，但是框架是什麼？
html/css 和html5/css3 區別在哪兒？
jquery Node.js angularJS Bootstrap React.JS Vue.JS Sass/Less Webapp 等等，這些都是什麼意思啊，都是幹什麼的啊，有什麼區別啊，你們老是說這個好，那個也不錯，分析了一大串這個那個的優缺點，可作為小白的我聽不懂啊，一大串的名詞，庫啦框架啦，表示不知道是幹嘛的
每個人推薦的都不同，學習路徑也很多，都說看自己的興趣找到適合自己的，但是我表示看不懂，首先我都不知道這些是幹嘛的，又怎麼知道那個適合自己的那，而那些眼花繚亂的東西又讓我暈頭轉向！到底我要學那個那？要怎麼學那，你們推薦了那個多書那個多路徑，可我只有一雙腿，一雙眼，然而前面卻有無數條路，我不懂這些路好不好走，通向哪裡，無數大大又在耳邊推薦，走這條走那條……在這裡先對大大們說聲對不起，我並非說你們這些不好，只是有點不適合我而已，我也並非抱怨，只是一點點的小牢騷。
在這裡還是想要虛心求教，希望有大大能為我指出一條明路。
首先，如果你是真的經常且認真地刷知乎的話，你提到的很多問題都已經有非常好的回答了：
前端開發 - 話題精華 - 知乎所以你列出的這些語言/框架/技術名詞我就不再解釋是什麼意思了，而且也趕巧了，你列的這些全部都有很完善的中文文檔，連百度都能搜到。
另外關於學習路徑，我也知道有特別多，包括我之前自己都列過一個：
前端學習路徑 - 知乎專欄另外還有
StuQ技能圖譜或者你英文還行的話可以參考
kamranahmedse/developer-roadmap也有同學專門匯總了網路上大部分的這類資源
helloqingfeng/Awsome-Front-End-learning-resource你可能發現這類資源的一個共同點了，就是它們獲贊都很多。
你可以都拿來參考，也可以什麼都不看，因為對於一個剛開始學習前端的同學來說，價值和意義並不大，過於早的看這些roadmap啊知識體系啊什麼的，沒有特別大的意義，說白了就好像你看書只看了目錄一樣，翻翻這本的目錄，瞟一眼那本的目錄然後就撇到一邊，等於你什麼都沒學什麼都沒看啊。
這些路徑匯總再複雜，再花哨，再新潮，短時間內，也永遠跑不出這三大塊：
路徑再多無所謂，框架再多無所謂，講的還不都是 HTML/CSS/JS，框架也不都是用 HTML/CSS/JS 寫的？你說我什麼都不會，什麼都不會就學呀，哪裡不會就學哪裡，順序重要嗎？反正你早晚有一天得學的吧。而且只要你真的學了，用不了多久你就不可能有這種完全不知所措，完全不知所云的感覺了。另外其實也沒有那麼多路，只有一條路，就是把 JS 學好。
另外一定少刷知乎多看書。任意一家賣書的電商網站上面你搜JavaScript然後按銷量排序，買排名靠前的任意一本你都不會吃虧，書的目錄就是你最好的學習順序。學的時候也不要浮躁，誰不是從不會到會的。要求也別太高急功近利，要是你真的能把所有框架都吃透理解，也就可以像尤老闆一樣擼個框架養活自己玩了。
知乎上面的大部分內容，你當段子看就可以了，何必較真自己和自己過意不去呢？
真心想學的話，買上幾本書，手機扔掉網斷掉，踏踏實實看去吧。
html/css，去買一本書跟著敲就行了，什麼書都行，不用挑。慢慢你會明白html5/css3的特別之處的，最重要的是「馬上」開始，而不是一上來就站著琢磨這琢磨那。
你應該好好學Javascript，至少學會用Javascript寫一點東西。
再去熟悉jQuery。
然後才是去選一個框架，你會發現容易很多。
信不信隨你吧，我也不想費篇幅來解釋了。現在學東西的人的問題，就是太早淹沒在別人的意見里，自己卻沒有動手。
IT浪人我學前端，以前特別特別累，資料少，樣式表不兼容、JS函數不兼容，開發基於IE，沒有現在的console.log，沒有現在的調試工具，所以我入門的經歷不適合現在的初學者。
但是現在，我總結了一個更好、更高效的學習方法：
首先，先學習一點jQuery，會用選擇器就行了，不要學什麼Animation、各種插件怎麼用之類的，只要能看到jQuery代碼即可。
然後學習基本的CSS樣式表，其實也不需要深入，想實現什麼就直接去百度好了，無非就是一些，高度不起作用啦，表格被撐開啦，Padding、Margin搞不定啦，絕對定位和相對定位之類的問題，這些沒什麼難度。
以上是準備工作，下面開始動真格的
先學Sass或Less的基本語法，要保證自己能看懂別人寫的代碼。
然後去wrapbootstrap上買一套模板，注意，劃重點，是買，而不是去哪個網站上下載個共享版，因為這些模板的作者會經常更新，加入最新的技術在裡面，而你從網上下載的，很多都是非常古老的版本。
然後，挑選模板很重要，不要管他好看不好看，要看他提供了哪些例子，例如下面這個模板就列出了他有哪些版本：
通過他所展示的不同版本中，我們可以看到，買了這套模板，你至少能夠學會使用：
1. ReactJS
2. AngularJS 1.x
3. AngularJS 4.x
4. Gulp或Grunt，以及他們相關的技術
5. Sass
6. Less
7. jQuery（因為原生是基於jQuery的）
8. Bootstrap
並且你還能學到怎麼與後台交互，例如ASP . NET、PHP、Ruby，模板中包含了非常詳盡的例子。
最最重要的是，這些都是經過測試，並且能夠正常運行的！！！
當然，這個模板還列出了他所用到的所有插件（或特色功能）：
最後，你覺得這套模板需要花多少錢呢？
兩百塊錢，對的，不需要998，你只需要兩百塊就能拿到這麼多Examples！
我可以很負責的告訴你，你兩百塊買的書，國產的，基本上都是辣雞，抄抄API也能出書？國外翻譯的，你看起來會很彆扭。國外原版的，我覺得你英語可能沒這麼牛逼。
我也可以很負責的告訴你，他裡面所有的例子源碼，你要花時間去某度找，光電費就要花你兩百塊！還不一定靠譜……
只需要兩百塊，你就可以學會使用當前前端最流行的技術，你用這套模板，開始開發屬於你自己的小項目，比如看騰訊的郵箱不順眼，你自己開發一個（當然，我的意思僅僅是前台界面）。
發揮自己的創意，對著模板開始改，多改幾次你就找到門路了。
學完之後再去返回頭看什麼Vue、Blackbone、XXX你都會發現真的好簡單……
這套學習方法對我有什麼改變呢？
我好多年前是做前端的，當時只會用Ext JS（先學Ext JS，後學的jQuery我也是醉了），後來改行搞大數據，就把前端扔掉了，前幾年升職做了大數據的主管，發現前端沒人做（做的真是太丑了……），於是就心血來潮想自己把前端頂下來（其實是當時部門只有一個程序員……淚奔……）。
我就通過上面的方法，在兩個月內幾乎學會（注意，只是會用，別問我深入的，我只關心上線，沒興趣研究什麼原子彈，造什麼輪子）了所有流行的框架、工具（我後來又買了大概六七套類似的這種模板，純粹是因為好看），並開發上線了新產品。
第二次迭代的時候我就壓根兒不用什麼Bootstrap了，所有的組件樣式表都是我自己用Less寫的（當然有部分參考Bootstrap的實現，例如row、col布局）。
你說前端複雜么？
我要一個按鈕，你能寫出一個按鈕，就不複雜。
詞很多，但是沒什麼用。
別人說好，你自己不了解，還是沒什麼用處。
框架是什麼，以及一些概念性的東西，你可以自己查到，在現階段，更重要的是知道你在學的是什麼，現有一定的基礎之後再去了解這些框架。
需要做的是學好基礎，然後去練習提高，選擇一種或幾種框架做一些東西，自己去實踐了才懂這是什麼，也才會有更好地理解。
路徑很多，如果完全不懂，看看哪些路徑需要什麼，選擇你符合的開始並堅持下去。
我也曾遇到和你一樣的情況，在最開始想學前端的時候，被各種前端框架虐的死去活來，網上各種雞湯，各種博客，我眼花繚亂，精疲力盡，然後幾周以後我冷靜下來了。 那麼多的框架、工具，其實都只是圍繞前端最基本的三門需要衍生的。angullar,react,vue三門主流前端框架是圍繞js進行mvc展開的，webpack,gulp,grunt工具也是為了完成前端模塊化，優化資源載入。 less scss是為了更好更方便的編寫css，jade模板也是為了簡化html，bootstrap這麼流行也是別人在三門需要的基礎上做出來的。 說這麼多是希望你能明白，各種技術框架層出不窮，但是永遠都離不開js,css,html，尤其是js，是前端真正意義上的核心。 學習css和html我推薦你《Head Frist HTML與CSS》 學習js，我推介你研讀《javascript高級程序設計》然後《單頁web應用-javascript從前端到後端》，後端的部分你可以選擇不看，然後就可以開始學習react，vue等框架，學完入門文檔以後，去github上找幾個初級得項目研讀模仿然後達到能獨立寫，最後找一個別人的網站開始自己寫一個項目，模仿網站的一切功能，像餓了么就是一個很好的模仿網站。
平時空餘時間，多逛逛博客，論壇，了解前端發展動向，多做技術積累，多看看前端技術架構類的書，慢慢成長自己，日積月累，只要肯努力，或許成為不了最優秀的那一部分程序員，但是一定可以成為一名業內成功的前端工程師。
一起努力吧作為初學者你要明確一件事情: 那就是網頁是由html ，css和 javascript組成的。 javascript簡稱js 。
做網頁好比蓋房子，你自己一個人蓋用水泥磚頭慢慢蓋也是蓋，工程隊用現代化的圖紙工具和吊車等也是蓋，反正房子都是由水泥和磚頭組成的。就好比 網頁都是由html，css和 javascript組成的一樣。
至於框架， 根本不是初學者要考慮的問題，框架是為了造房子更快 做的一些套裝 或者叫toolkit什麼的 就好比造房子 工廠幫你生產一個屋頂 ，3D列印公司幫你列印一面牆一樣， 只是為了讓你更快的造房子。 不管是屋頂還是牆 他始終是 木頭 水泥 磚頭組成的。 也就是說無論是啥框架 他都是js css html 混雜拼湊的。
所以 html，css ，javascript 對初學者來說是最重要的，既然是初學者 ，當讓要嘗試自己造房子 才明白房子的原理 ，之後才能讓工程隊一起蓋。 學習的時候自己蓋房子，工作的時候就要工程化作業，所以工作的時候你80%的可能性是要用到框架的，一個目的就是為了快。
現在來解釋一些概念 html css 這兩個東西老早就有了 ，早於1999. html5 是html的第五個版本，之所以html5我們要強調5 ，是因為前4個版本都沒啥可說的，html4 老早就有了，就是2010年前你平時接觸的網頁都是html4 ， html5之所以不同是因為他的改動比較大，新創造了好幾個標籤，這些標籤是為了適應手機端頁面而創造的。 css也老早就有了 ，同理2010年前你看到的網頁都是css2， css3之所以強調也是因為改動比較大，也是為了適應手機端瀏覽新建了很多屬性來適應手機端的展示效果，包括media query這個偉大發明，css3 的media query是手機自適應頁面的基礎。 沒有media query的發明 現在所有手機頁面都會是丑的一比痹（主要是字會很小很小） 。css3還有其他重要的屬性 比如動畫，這也是因為喬布斯堅決封殺flash導致急需動畫解決方案而生的。
html一定包括html5 甚至將來的6，7，8 。。。。
css一定包括css3 甚至將來的4，5，6.。。。
所以不要以為html5 ，css3是全新的東西 。
大部分的網頁應用 一定是既有html5 也有html5以前的版本的代碼，既有css3 也一定有css2，css1 。
因為網頁就是html，css， javascript ，不可能有個網頁只包含html5 沒有html4 ，那這網頁還是網頁嗎 還能跑起來嗎。
就好比新研發的水泥 它還是具有老水泥的分子機構的。
jquery是一個js庫，（好吧，不裝逼，js庫就是用純javascript寫代碼） 主要是為了方便操作頁面的dom結構的，dom聽不懂的話就自動忽略。js主要是為了方便操作頁面html標籤（代碼）的，這回聽明白了吧。 dom結構就是html的代碼 因為html代碼非常簡單 且表現成一定的規律 這種規律我們叫結構。 或者dom結構。 先這麼湊和認識吧。 你也可以不用jquery 你用js代碼一樣能實現所有jquery能實現的功能，但是你會很累，而且由於水平有限，有人寫不出jquery的某些功能。 所以jquery就是給傻瓜和願意提高效率的人準備好的 本成品js代碼 ，方便使用加快開發速度。
Bootstrap ＝ jquery+ 半成品的css＋半成品的頁面代碼（html+js+css） 主要也是為了給傻瓜或者追求工作效率的人快速做網頁用的。
angularJS，React.JS ，Vue.JS 是相似的東西。都是為了一種叫SPA (single page application 單頁應用)的理念發明的js框架。 這些框架也是為了給傻子或者追求效率的人開發用戶體驗比較好的網頁用的。 為啥要叫單頁應用這個你可以百度。
Sass/Less 這兩個只是個工具 或者 中間狀態的css代碼 只是為了讓你寫的css代碼更加快速 更加合理 而產生的一種工具也好 編程語言也好的玩意。 就算沒有sass/less 日子還是可以照常過的，就好比 別人開賓士，你開大眾不都是能跑嗎。
webapp 就是用html5, css3 以及SPA這種先進的代碼或者理念作出網頁 ，這種網頁和傳統網頁的不同在於 用戶體驗更好，更像一個app 。界面的感覺或者用戶體驗更像個app。但骨子裡又只是html css 和javascript的東西就是webapp。
Node.js 和上面的所有概念都不一樣， Node.js是一種後端語言 。啥是後端語言，比如 php ,java, python ,ruby , c# 這些都是後端語言，後端語言說白了就是在伺服器上跑的，不是在瀏覽器上跑的。 javascript是前端語言 因為它是在瀏覽器上可以執行的，node.js是一種語法長相和javascript一毛一樣的語言，但是它是跑在後端的，它可以處理資料庫 。
再說一下，同樣是js 揉出來的半成品代碼，為啥有的叫庫（比如 jquery）有的叫框架（比如react）。 一般來說 能實現單一功能的代碼集合就是庫，而能實現一個整體的解決方案的代碼集合就叫框架 。 簡單說你可以同時用好幾個js庫，但是你幾乎很少同時用好幾個js框架。
比如你打算做一個webapp，你可以用jquery和weui (微信的jssdk庫) ，但你如果在一個項目里即用react又用angular ，那你一定是想自己為難自己。
這裡我做了一個簡單的矩陣，幫你理解什麼是框架什麼庫
在某些時候一個東東既可以叫庫也可以叫框架，取決於作者的無恥程度。
這下子是不是感覺豁然開朗了呢。
總之，對於初學者，去它媽的框架，框架跟我有毛關係。
雖然在初學者的階段，你不用考慮什麼框架 ，什麼庫 但是你需要迅速成長，度過初學階段。
一般的學習路徑是
html ：基礎標籤 看w3schoo即可
|
css ：理解 id ,class ，相對定位，絕對定位，浮動等感念
|
javascript 基礎: 循環，數組，函數，遞歸等概念
|
javascript 表單相關： click,submit，ajax等概念
|
css3 ：能理解自適應頁面的原理和刪格理論 能自由布局
|
jquery: $.ajax 等
|
bootstrap ：會自由而靈活的使用bootstrap ，且理解bootstrap的實現原理
|
建議學習使用一種webapp框架 比如framewrok7
|
學習一種前端mvc框架 比如vue.js
佔個坑等回去給你答，我是培訓出來的，略有心得，畢竟某培訓機構挺專業的。
----------2017-6-14 16:20:26更新----------
繼續更新，沒時間干別的事就是程序員的特性，所以想當程序員的考慮清楚了，哈哈。
6：移動端 主要學了布局方式：流式布局，響應式布局。 流式布局就是我們最常見的網頁方式，網頁根據屏幕的寬度而跟隨改變。響應式簡單來說就是同一個網頁在不同屏幕大小的設備上顯示不同的內容。原理很簡單：就是用到一個叫做媒體查詢的東西，當屏幕大於1200px時候顯示這一點東西，當屏幕小於768px的時候顯示這一部分東西，媒體查詢結合rem即可實現大小適配的問題。rem是一個大小單位，跟px是一個類別，但是有區別，以及em單位，自行查詢三者適應場景吧。另外還有一個移動端特有的屬性 touch觸屏事件。還有一個flex布局，c3新增的。移動端的js庫一般使用zepto，zepto官網有句話說， 如果你使用jQuery，你已經知道如何使用Zepto。 差點忘了還有ui框架 bootstrap，提供了一些現成的效果，比如下拉菜單，按鈕樣式等等，只需要引入相應文件加入相應標籤類名即可實現一些效果了。bootstrap也有一個布局方式叫柵格系統也挺好用。當然也有其他的ui框架 比如mui mint-ui ant等等。
到這裡基本就學習完了基礎東西了。
之後的內容學起來就要起飛了，沒多少人看就當回憶自己的學習了。有空在更，寫代碼去。
----------原答案----------
任何一個語言都要學基礎，基礎學不好框架也是白費，所以先去學習js基礎的吧，基礎學完還有高級的呢。
好了，那我就說下我學習的線路和學習的東西都是做什麼的吧
----------又是分割線----------
1：html +css這兩個太簡單了，用來實現靜態頁面，不過也不能小看，後台的夥伴們要是學會了這個你的工作就危險了一點。主要是布局和樣式的使用，多做做就可以了，模仿某東是一個不錯的選擇。第一遍不會寫可以跟著視頻寫，第二遍自己寫，效果出不來的多調試，第三遍閉著眼寫就行了。用時------8天
2：js基礎 這個也是簡單的，對於有語言基礎的同學基本無壓力，但是沒有基礎的同學就要深入的研究了，主要是基本數據類型 循環 判斷 函數 對象 數組 。這些學完就開始DOM操作了 ，DOM就是獲取標籤對標籤進行一些操作。與之對應的就是BOM操作了，查下他們的全程你就明白了。這時候你的靜態網頁就可以動起來了，比如來一個選項卡切換，輪播圖（需要動畫，動畫也是一個重點），瀑布流 ，電梯跳樓，手風琴，qq空間長圖滾動，等等。效果太多不列舉了，前兩個用到最多，後邊幾個都是特定場景需要。用時----18天
3：jquery jq是一個js的代碼庫， 內部封裝了許多方法供我們使用，（像你說到的angular vue react這些框架都是js庫），jq最主要的作用就是簡化代碼，簡化操作。把所有的方法熟練使用起來可以大大提升我們的效率，然而有一個東西更好用--插件，對就是他插件，有些效果比如輪播圖吧，最常見的，輪播圖的寫法有幾千種，你只需要去網上找一個代碼略微修改下就成了你要的效果了，放在你的網頁上so easy 。 用時----4天
4：H5+CSS3。有人問到我H5用過嗎，這時候其實很想問一句你問的H5是大範圍的前端還是單純的指html4的升級版本html5呢？所以這個問題這一句話就解決了吧。目前pc端支持不太友好。H5新增了幾個語義化標籤比如 header nav等 還有表單，還有多媒體標籤，DOM擴展，存儲。 CSS3也是css2的升級版本，新增了一些選擇器，陰影，過度2D變換3D變換（這三個是做動畫的）當然c3里也有專門的動畫，js中也可以自己封裝一個動畫函數。還有一個東西挺好用的，伸縮布局和bootstrap裡面的柵格系統一樣。用時---5天
5：ajax。這個就很重要了，使用ajax就可以讓你的網頁成為真正的動態網頁，這裡的動態指的是頁面的數據是不固定的。通俗的講就是通過ajax去伺服器把需要的數據拿到，在展示在頁面上。學習ajax需要深刻的理解他的原理，並能自己實現這個方法，面試經常問道。工作中一般都用框架裡面封裝好的ajax，現在有一個趨勢都在用fetch。 還有一點在這裡就要學習一個插件了template，模板引擎。 ---用時6天
先寫到這裡，有空再寫，
----------更新在上邊----------
解釋下你問的幾個名詞；
html/css 和html5/css3 區別在哪兒？ 後者是前者的升級版本
jquery js庫，
angularJS React.JS Vue.JS js開發框架 非常好用，目前市場上佔有率最多的三個
Sass/Less css的預編譯語言，提高css維護性，可以聲明變數像一門語言一樣。
Node.js 解析js的，是一門後台技術，主要做後台，使用的是js語言。
Bootstrap UI框架 很多樣式都給你寫好了，你只用複製代碼過來修改成你要的效果
Webapp app分為三種，你問的是第一種
- WebApp 就是在瀏覽器中運行的web應用。不可調用設備api
- NativeApp 原生語言開發應用 （android和Object-C）。可以調用設備api
- HybridApp 就是外面是原生的殼，裡面是web應用，兼具2者的優勢。可調用設備api
總結的不太好勿噴。前端小透明，有問題多指教。第一次寫這麼多，有贊嗎
面向職責要求學習是最好的，起碼你不會找不到工作。有很多東西都是在工作時才能學會的，所以你需要先讓自己入職，然後你才好走深入。
按照下面這兩圖選擇性學習
從上圖可以看出許多框架的核心就是JavaScript，所有學好JavaScript是最重要的。
偽程序媛強答一下。
最初遇到和你一樣的問題:
HTML和HTML5有神馬區別？CSS和CSS3有神馬區別？Less和Sass又是什麼鬼？
這些困擾了我很久的問題，現在想想，有很多問題本不是問題，之所以變成了問題，是因為自己實力太弱，操的心又太多。
其實有的東西不用懂，用著用著就明白了。比如對於我們小白來說，HTML和HTML5有啥區別？沒啥區別，有的那些區別都是我們現在聽不懂的區別。所以隨便拿起來一個用就行了。CSS和CSS3也是一樣，隨便用隨便寫，直到有一天發現，咦？為什麼這段CSS在這個瀏覽器不生效？然後就知道CSS3和CSS的區別了。
JS也是同理，我最初對JS的理解就是寫一些網頁特效，後來理解到，JS是用來操作網頁元素的，專業的叫法是操作DOM。
後來我問我身邊做前端開發的朋友，「JS和各種JS框架有什麼關係？」
他問我，「如果想把一段數據顯示到網頁上，你怎麼做？」
我說我可以用jquery獲取到相應元素，把數據加進去。
他又問我，「如果你在頁面改動了數據，想讓原始數據也跟著變，你怎麼做？」
我說我先獲取元素的最新值，然後賦值給原始數據更新一下。
他說，「框架可以提供給你很多方法可以讓你快速實現這種操作」
最後他說，「你現在還沒有迫切的需求去使用框架，等你需求迫切了，你就知道框架是做什麼的了。」
後來我做了一個個人網站，等那個網站做完，我就明白了很多原來不理解的東西，不然，題主也去做個個人網站試試？
框架只是別人把好的構建應用的方法封裝起來，我們只需要按照其思路來寫代碼就可以更快更好的構建應用（個人見解）。雖然說目前前端框架也這麼多，前端入門又相對簡單一點，但是太過急於求成也是不可取的，怎麼也得有個循序漸進的過程吧，所以說先不用去管眾多的名詞，可以腦子裡留個印象，或者簡單了解，先把基礎學好（js），隨著有了項目經歷，看的技術博客多了，就慢慢的開始了解和接觸框架等了。我就是這樣過來的，但是我大學就開始接觸了，稍微有年齡優勢吧。(哇快畢業了，玩的有點過，太久沒學習心裡有點慌。)
前端專業細分，選好專業方向是第一步，可以去囫圇吞棗地了解各種開源項目 package.json 里提及的庫，通過這些庫的 startkit 嘗試玩一玩，看自己做哪一塊最能進心流：
著重樣式書寫的需要了解 styled-component 等跨平台 css-in-js 樣式書寫方案，並熟悉 postcss 等 Web 樣式方案。
這一塊入門最容易，GitHub 上搜一個 postcss startkit 形式的「xxx start kit」，最好是自帶熱重載的，就能很快上手。著重前端數據流的需要了解 mobx redux-saga redux-observerable apollo-graphql 等框架，也是各找個 startkit 稍作修改加個讀取 GitHub API 的功能。這個過程中會用到大量 ES6+ 的知識，所以基礎牢固的人會感到非常愉悅。
著重後端的（雖然你說的是前端）也有 koa-startkit express-graphql-startkit http://ruff.io（物聯網） 等可以玩。可能有的人進前端界後來只是去搞爬蟲、建kg，那也不賴。
在玩中搞清了自己最喜歡的方向，再開始確定進一步的細分方向。每一塊都是深坑，庫不斷湧現，每個庫都從別的語言（例如elm）或者數學理論（例如範疇學）中帶來精彩的思想，深入鑽研能大大加強具問具析、隨機選庫的能力，也會使得你漸漸沒有時間鑽研其他大方向。其實呢，我覺得還是先腳踏實地的先把基礎的html，css，JavaScript先學好。你說得這些東西在你學的過程中自然就會明白的
來來來，題主看這裡，以下都是個人理解。
框架是你寫代碼前搭設的軟體環境，有環境就有約束，所以你得按照框架的語法API來辦事。譬如你列的那些名詞里angularJS Bootstrap React.JS Vue.JS 就是框架。
那麼為什麼要有框架？
這得從前端發展史說起。最開始的前端是從網頁製作發展來的，工作內容就是用網頁三劍客製作網頁。那個時候的網頁根本沒多少特效不像現在那麼絢麗多彩。那時候很多人都是兼職美工加製作的，做完了網頁就發給程序員，由他們把拿到手的頁面改成.php或.jsp等。你想想那三劍客生成的頁面全內聯樣式各種奇怪的代碼符號，可把當時的程序員們坑慘了，對了，那時候js也是後端程序員寫的，某些動態布局都是當時程序員用js寫的。
再後來css開始發展了，你沒看錯css比js晚出來幾年，所以現在還是有不少早些年的程序員喜歡用js去控制界面。css從table布局到float什麼的，那時候業界開始倡導內容表現分離，大家對DW罵聲不斷，業內開始要求當時的網頁製作者學習css，對了那時候流行div+css的說法。大家發現css寫起來雖然麻煩還不好控制，但至少比DW那一團糟好，大家都在推CSS，慢慢的大家發現CSS與JS一樣在不同瀏覽器上也有兼容問題，那一段時間各種hack技巧亂飛。還有那時候w3c也出來幾年了，w3c開始整合標準，結果IE吃虧了，大家都在罵IE。幸運的是這時候網頁設計與網頁製作開始分工。
然後就是ajax橫空出世。ajax的概念我就不說了。在ajax之前，界面更新都是全局的，後來大家想要局部更新的效果，各種人想辦法什麼用無邊框iframe啊什麼透明png啊，不同的方法還有不同的適應場景，直到ajax出現那些技巧都沒啥用了。很多人覺得原生ajax難寫，呵呵。然而這不是重點，重點是ajax的出現開始帶動了2點，一點是交互體驗上更好了，一點是界面模型上開始改變了。那時候很多人對ajax趨之若鶩，有人利用ajax做出了類應用的東西出來，也即現在所知的SPA(singe page application).
接者jQuery出來了，很多當時的程序員覺得哇塞這東西這麼簡單，搞頁面的那傢伙應該學得會吧，於是又開始推動頁面仔寫jq了。而在這之前頁面製作者主要負責把設計師的PSD稿轉成符合標準的html+CSS, 厲害點的頁面製作會寫一點當時比較流行的頁面特效,ajax的控制權多半還是在程序員手裡。再後來ajax也由頁面仔寫了。從這裡可以看出所謂前端就是從設計一步步分化，然後慢慢走向程序員這條不歸路的。這時候還是設計， 製作，程序員三分天下。
jQuery在網頁製作業壟斷了好多年了，於此同時有個叫YUI的庫開始思考網頁代碼能不能像後端一樣不要再寫麵條代碼(首推php)了，開始思考什麼架構啊組件啊什麼的。哦，對了，YUI學的是火的一塌糊塗的java,當時在真正的程序界面向對象火了好多年了，當時的js開始玩各種面向對象，YUI作為同jQuery一樣的一個js庫走向了不同的道路。那幾年js開始蓬勃發展，同時css標準也不斷更新，不知怎麼的誕生了一個叫前端的名詞。我對YUI，dojo之類的庫不懂，我不是那個年代進入前端界的人，這方面很多80後更有發言權。我看到的是那時候jQuery插件層出不窮。
後來Backbone出現了，除了帶著MVC思想外還附帶了underscore庫。所謂MVC也是從真正的程序員界學的，我也不懂MVC啥意思，就看作是分離吧。underscore就是對原生js API的拓展。Backbone倡導分離，就如同前面的內容表現分離一樣，只不過是要求寫代碼時一塊塊的，避免寫成一坨。因此Backbone給了不少約束，雖然這些約束比較弱，但你如果用backbone時則必須提前搭好環境依法辦事，因此Backbone就是框架。
再然後前端爆炸發展，專註響應式的UI框架Bootstrap， 類似Backbone的專註MV*思想的vue,angular,react都是，還有其他各種思想的框架太高深了我也不懂。各種庫也在發展，比如專註圖形表現的Echart.js.大概11年到15年的時候，前端可謂百家爭鳴。那時候node也出來了，各種基於node的工具使得前端也開始與後端一樣講究兵團作戰了。11年到13年學前端的還不多，然後陸續有人來，到17年前端已經人滿為患。
我上面的回答完全沒有太高深的概念吧， 從一路走來我們就知道用框架主要是為了規範操作，而用庫主要是為了快捷操作。另外插件是集成在框架或庫里，也就是要依賴才能運行。
很顯然用不用框架和庫得看項目複雜程度，人都是懶的，沒道理有斧頭不用要用石頭砸吧，那如果是石頭砸一下就能解決的事何必要去買把斧頭？
學習路徑是複雜，框架是層出不窮，但是你抓住了核心就不會迷茫了。前端的核心就是界面展示，後端的核心就是數據處理。不論你用什麼能做出頁面就是勝利，千萬別過早把精力放在各種框架的追風上。所謂學習與工作不同，學習可以很快的走馬觀花知道是個什麼東西優缺點是什麼就行了，所以知乎里那些前輩列出的路線圖你大可以去了解去試用去知乎一圈回來，然後把重心放在目前業界要求上。現在業界的要求是會規範操作，最火的框架是vue，所以學什麼不用問了吧。可能你覺得基礎不紮實直接上手框架很難，真的不必那麼想，我所理解的編程不過就是在既定的語法規則下利用它給好的API做事罷了，啥編程思想與我何干。我不懂編程思想不代表我不按照已有的最佳實踐敲代碼，我也經常看博客知乎，這就是我看這些網站的價值所在。說實話我也看不出他們討論angular，react, vue誰優誰劣, 所以我也有去看過寫過3個框架相關的demo，管他什麼思想，看哪個代碼順眼就選哪個唄，為什麼？因為看它順眼說明你潛意識裡能摸出代碼的規律，以後寫起來得心應手會快一點，慢慢的那些規律在腦子裡了，你再來看看知乎所討論的東西就會有種熟悉的感覺。
我反對基礎紮實才能學框架一說的一個重要原因就是當你用框架的時候那些基礎的80%都沒啥用，也就是說你花了100%的精力到最後只有20%在工作中有用，其餘不得不隨時間而忘卻。而且基礎不好其實並不太影響你做事情。要說基礎，我該不該問下各位前端操作系統原理，網路原理，編譯原理呢，當你答出完美答案時我該不該繼續深入問題計組員，數字電路，一路推下去？任何問題只要想深究都是問不完的。
我的建議是走馬觀化，重點突破，備好資料，邊做邊學，熟能生巧，觸類旁通。
下面說點實際的作戰方案，題主是剛學js的是吧。
1. 收藏JS官方解釋網站 MDN, 進去看看JS的有哪些東西。
2. 找一份自己喜歡的JS教程，不論是什麼形式（書，網站，視頻），走馬觀花一遍，不必懂，但得知道有這個東西。
3. 用你強大的搜索技巧，搞清楚(注意不是搞懂)js中有哪些典型的坑或難點。
4. 備足了上面的資料之後，打開codepen或runJS之類的前端demo網站，挑幾個自己喜歡的先抄寫別人代碼，知道哪些API，語法點比較常用，順帶培養下手感。這裡不必擔心別人代碼規不規範，你若覺得不規範多半是你看他實現的代碼不順眼，有能力就自己寫沒的話就先換那些設計和代碼實現都好看的抄。抄語法，API,想實現思路，抄的過程中經常用F12 debug一下，邊抄邊翻MDN， MDN上不詳細或書上也沒有的要做筆記，或者你直接做代碼注釋也好。也可以在抄的過程中小小的改寫下代碼。過程4會經歷不少時間，你會存下不少筆記和小demo(雖然是別人的)。
5. 開始學習Bootstrap, 裡面有jQuery,順帶學下，先不用管less/sass. 這段時間就用Bootstrap仿站，與前面抄demo不同，這裡是需要你自己動腦拆分組件動手實現的。你要多仿幾個首頁或站點就會遇到需要定製組件或特效的場景，那時候4會起不少作用，同時你js能力開始在這裡得到鍛煉。你在這裡寫的js會給你一種我寫的是實際有用的，不像前面的小demo給人很虛的感覺。jquery插件用多了，你自己寫的js也開始變得臃腫，這時候得考慮模塊化了。
6.模塊化說白了就是更好的管理你的js文件和script標籤。有的插件需要多個依賴，你手動管理太麻煩了。你再試用requireJS, seaJS, webpack, Browserify, 不管他們區別，看誰爽用誰。
7.開始學習Vue，Vue側重去DOM操作化，學習vue得換一種思想來看待問題了。不過先別想這麼多，抄代碼搞起。多抄點例子你會發現用上不jQuery了。慢慢的你就上路了，然後你還會想要是有個vue-bootstrap多好啊,
那些名詞題主大可不必關注，你工作中用不到學了也白學。假若還沒工作我給的路線還不明確嗎。你之所以迷茫是因為你沒做過多少東西吧？但凡寫多點代碼，問題會一個一個被解決的，要學什麼也會越來越明朗。而一開始沒什麼編碼經驗就接受那麼多，確實受不了。
說句正經的，要是初級入門，勸你在沒有任何經驗的情況下少看知乎，多看看慕課網一類的教程類乾貨，等到對前端有一個大體的了解之後再多刷知乎會有比較大的幫助。——來自一個前端小菜魚。
shut up and show your code.別管這麼多，先寫再說。js基礎不牢固這些框架和庫你學起來會很累的，不要捨本逐末。