---

「錢可以決定一切嗎？非也」沒有錢就不能學習了嗎？當然不是。尚矽谷web前端教程全部免費，只為服務it行業。

get 它

這套web前端教程送您，再送您web前端學習路線規劃圖，兩者結合看。

自學過程中很難，很苦，但自學出來找到工作也是很酷的。既然決定了自學，那就合理安排好自己的時間，努力吧。「既然選擇了遠方，便只顧風雨兼程」。

【web前端乾貨】

為什麼知乎上大家都覺得前端自學比培訓好？

WEB前端工程人員每天都在幹什麼?

為什麼網上總有人說WEB開發沒技術含量？

自學前端兩個多月，感覺很迷茫，可以報個培訓班嗎？

自學 web 前端人怎麼找工作？

作為 IT 行業的過來人，你有什麼話想對後輩說的？

哪裡有比較好的HTML5視頻教程？

為什麼有人願意花兩萬塊去參加IT培訓學習呢？

求靠譜的前端培訓？

HTML5 開發人員的待遇普遍是什麼水平？

2020最新版前端學習路線圖及路線圖

---

其實我們學習web前端，無論你去是哪裡學習都是靠自己，只是說身邊有個可以問問題的人會好很多。培訓機構的話確實是會貴一些，也不會每個人都有這樣的條件。

學習web前端可以先去招聘網站上了解下前端要學習的技術有哪些，大部分企業招聘的要求有哪些，這樣的話本身自己也是比較瞭解需求的。

接下來的話可以先了解學前端的環境，歷史，具體是可以實現哪些技術等等。

零基礎如何學習前端，前端第一步要做什麼以及開發工具講解_嗶哩嗶哩 (゜-゜)つロ 乾杯~-bilibili?

www.bilibili.com

自學前端的網站推薦

1. W3school
2. W3cschool
3. 菜鳥教程
4. MDN Web 文檔
5. github

其他

1. freeCodeCamp.org2. CSS-Tricks3. CSS Weekly4. html5rocks.com/en/5. mobilewebweekly.com/6. Echo JS - JavaScript News7. Smashing Magazine — For Web Designers And Developers8. https://us5.campaign-archive.com/?u=ea228d7061e8bbfa8639666adid=68fee2a1f3e=91389ff35f9. sitepoint.com/

10. http://javascriptweekly.com/

11. http://frontendfocus.co/12. frontendfoc.us/13. https://ui.dev/newsletters/react/14. http://feeds.feedburner.com/html5rocks

作者：紅花綠葉

鏈接：https://www.zhihu.com/question/316318115/answer/1436978342來源：知乎著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

---

這是我最新的個人經驗分享。

2020.5.6更新

慕課前端階段一學完了。

源5876227的1.前端零基礎入門 學習報告_慕課網?

class.m.imooc.com

順便分享下我github的項目。我每做一個練習都有上傳github。

https://github.com/eryisan?

github.com

學CSS的Demo

https://eryisan.github.io/cssDemo.github.io/cssDemo.html?from=timeline?

eryisan.github.io

學JS輪播圖的Demo

jsSlideshowDemo?

eryisan.github.io

BEM模式階段最後項目Demo

webpageDemo?

eryisan.github.io

雖然這些項目都拿不上檯面，但對自己來說，很滿足！

這裡推薦兩款chrome插件，

Similar Sites，找相似網站，一個好網站再知道更多同類型的好網站！

Wappalyzer。看看當前網站使用了什麼技術！

沙拉查詞。查單詞。翻譯。集合多個詞典。

//2020.5.14更新

從2月底不知道編程到現在5月份，從編程是一個什麼概念都不知道的小白，到現在做過html css javascript html5 css3練習並開始深入JS和庫框架的2級小白，分享一點小白經驗。走過的彎路。

學習入門：慕課網

深入JS：

JavaScript高級程序設計（第3版）

MDN

精通CSS：高級Web標準解決方案（第3版）

英語：不背單詞APP

一天的學習計劃是這樣的：

1. 每天學30個英語單詞和複習（不背單詞APP自帶複習）

2.下班後基本就靠慕課網學習

————————————————————————————學習計劃

學習計劃太複雜太繁重繁雜就會耗費大量時間和磨滅星期。

所以認準一個網站學習就好。反正我自己主推慕課網。畢竟它帶我入門。

————————————————————————————關於英語

VScode代碼提示都是英文，調試界面都是英文，各種技術文檔官網都是英文。

雖然中文也有資料，但我始終覺得英語是程序員必須掌握的。

每天學習30個單詞+複習，少打幾盤王者上個廁所的時間就擠出來了。花不了多少時間。

即使學不會編程，學會英語，暢遊網路魔法世界也是很爽的一件事了。。。

不背單詞：真實語境例句學單詞 不枯燥

————————————————————————————關於書籍

因為下班後在慕課網學習的時間就佔據了大部分，JavaScript高級程序設計（第3版）

精通CSS：高級Web標準解決方案（第3版）讀書沒分配到多少時間，書籍對我來說是作系統化深入學習的，比較全面補充技術面的。但書籍光看不練不敲代碼記不住的。紙上得來終覺淺。編程還是得多練。慕課網學習外還有空閑時間就將書籍作為補充深入。

————————————————————————————關於MDN

MDN夠權威，夠新。我是作為既學英語又學技術的補充。主看英文網頁，電腦或手機配有道詞典遇到不懂得生詞查一查。聽大牛說技術文檔語法都比較簡單，就是多讀硬啃。所以定時花點時間每次看一頁英文網頁啃一啃英文技術文檔。而且MDN有實例，學的過程中敲敲代碼鞏固下知識又增添興趣。MDN有學習路徑。

————————————————————————————中英差異

舉例：

中文：全局作用域

————————英文：Global scope

英文：局部作用域

————————英文：Local scope

沒有編程概念的看到全局作用域和局部作用域會不會有一點懵逼？

global scope local這三個單詞不認識沒關係，現在來認識下。

global柯林斯詞典英文釋義：

• You can use global to describe something that happens in all parts of the world.
• 你可以用global來描述發生在世界各地的事情

local柯林斯詞典英文釋義:

• Local means existing in or belonging to the area where you live.
• Local的意思是存在於或屬於你居住的地區

scope牛津詞典英文釋義:

• the range of things that a subject
• 一個主題的範圍

如果你知道這三個英文單詞，你去理解是不是意思沒那麼晦澀比較易於理解？

你甚至能舉一反三，你住的城市發生的事能影響到全球嗎？

我個人是這樣理解的。所以比較看重英語。僅限個人看法。不會英文，編程一樣可以很6。

---

2020.5.27更新

————————————————————————————5.27進度

學習第一階段的時候有激情，學的比較用心比較快。現在第二階段了感覺整個人慢下來了，也說不清哪裡慢了，就是感覺學的時間明顯多了。或許是理解的問題？？？還是狀態？激情？

每天學習2組新單詞（15個/組）+複習，目前啃了一半這張圖片的一半。養成習慣了。說下技巧吧，看英文意思我都是看柯林斯英英釋義理解的。然後聽真實語境例句理解。

慕課第二階段步驟一快學完了，準備進入JQuery。這整個階段沒有學完，沒有太多可以分享的小白經驗。說下感覺。感覺這個時候是進入廣度的時候，JQuery和慕課階段三是WebAPP和小程序，階段四是框架。我自己打算放慢腳步，廣度組件化思想等接觸是件好事，放慢腳步把JS深入挖一挖，廣度深度同步進行。好像有時間可以把MDN和《JS高程》花點時間理解了。好像前端雖然雜，但相對入門容易，入門省出來的時候可以彌補深度和廣度。

————————————————————————————關於啃英文技術文檔

堅持了一段不背單詞APP後，上面的單詞更多是生活中常用詞，而不是技術文檔單詞。找到適合自己啃英文技術文檔的方法。

一、直接MDN生啃，遇到不懂的單詞用網易有道詞典查一查。不過太多不懂得單詞的時候，啃起來有點難受。得堅持啃纔有效果。就像剛開始背單詞一樣。

二、這是我打算嘗試的一種方法。電腦版用網易有道單詞，在MDN上直接把不懂得單詞全部（一頁）選到生詞本，導出到手機版有道詞典或不背單詞APP。通過學單詞---看牛津或柯林斯英英釋義理解--熟悉--再來看MDN英文頁面，覺得這一頁熟悉了就進行下一頁的重新選詞到生詞本。一頁一頁地喫透。如果上面用不背單詞APP養成了習慣，這個過程相對第一個方法要好受很多。但也慢。只有量變到質變，辭彙量到了一定程度才能解決的問題。也就是，堅持。中途而廢，前期努力白費。每天堅持學單詞看英英釋義看語境，蠻重要。

小白經驗，我也不知道能不能堅持下去，覺得好可以自己嘗試一下。

————————————————————————————關於手機 關於娛樂 誘惑

手機娛樂太多，好像離不開手機不行。手機抖音 微博 知乎 朋友圈 炒股 遊戲 王者 喫雞 嗶哩嗶哩 電影等等會浪費太多時間，知識碎片化 娛樂碎片化在我看來，都無法達到一個基本的專業素質要求。我的手機桌面比較簡潔。或許是我窮吧......只好獨善其身修身了....

當然上面有很多是我自己無法做到的，我不是個聖人。。。這也是我和大牛的差距吧哈哈哈。不過手機桌面放個計劃，每天該做什麼心裡都會有個數。慢慢養成習慣就好了。

————————————————————————————關於學習環境

環境塑造人，家庭影響人的性格。同樣的，我覺得小白在學習的這個過程中一定要泡到編程的環境當中，纔不容易放棄。微博關注編程的，知乎關注編程的，朋友圈關注編程的，進入社羣，不一定要看（畢竟分散太多心思），但這東西一定要有。四周泡在都是學編程的討論編程的，你自然就浸在其中了。也會產生興趣吧。懈怠的時候也不容易半途而廢。

這裡推薦一下： href="https://www.baidu.com/link?url=pdE2HXo2s4JC8_VqymGK_dzdyfXRK3Yz1ieOXW5YY4Gwd=eqid=b71153d6000043e3000000065ecde235">掘金- http://juejin.im - 一個幫助開發者成長的社區、SegmentFault 思否

公眾號：前端大全、前端時空、前端之巔、SegementFault、淘系技術、圖靈社區、w3cschool、道哥的黑板報、FreeBuf、菜鳥教程、InfoQ、JavaScript、justjavac、開發者頭條、開源中國、看雪學院、懶人在思考、慕課網

查看各個領域各個平臺排行榜：href="https://www.baidu.com/link?url=ZaYX7iEVRMHhvSE1GSRIF-W0M40zT7qBqM7GIx6dxGHCY2fRQzYWl_IQZkzX-K-ewd=eqid=c94abfaa00000d59000000065ecde313">新媒體導航 - 新榜——內容產業服務平臺 自己找一下。

當初看了菜鳥教程的雞湯還不錯：程序人生

w3cschool的極客導航也推薦：極客導航

菜鳥教程和w3cschool其實我都很少用，但也有些主題也可以利用。話說w3c編程獅充了幾百塊買了會員，基本沒怎麼用過。不太喜歡它的課程質量。僅此而已。

————————————————————————————關於瓶頸 關於原生JS

很難受,真的.目前是學到了正則表達式RegExp.我前面說了,這個階段看似在慕課深入JS這步驟好像快學完了,但辛酸冷暖自知啊..我尚不敢說我入門了前端,更不敢說熟悉了JS.前面學的html 和css我也是一種知其然而不知其所以然的狀態.或許是處在一種略懂但要運用起來一團糟的狀態.懂!=靈活運用.我已經很明顯明顯地感覺到了瓶頸和基礎的重要性.有時候代碼也能寫,但寫的亂七八糟和寫的好優化的好簡潔的好復用函數的好,完全是天上地下的差別.代碼不僅要會寫,還要寫好更難.我覺得這是一種追求極致的過程.至於外面很多聲音說編程說學C語言啊數據結構啊編譯原理啊框架啊webpack啊等等一系列,也知識焦慮過,但現在不會去想那些事情.現在只想把手頭上所面對的事情做好.也就是學好JS.

莊子這句話我也不是很理解,引用一下吧:吾生也有涯，而知也無涯 。以有涯隨無涯，殆已.

如果說為了速成,我就可以繼續下一步學JQuery,WebApp和小程序,框架等等.好像懂得還挺多不是嗎?好像可以滿足企業的需要不是嗎?不過是熊瞎子掰棒子,始終停留在表面的泡沫中狂歡罷了.我們需要沉潛於知識的海洋，觸碰知識的內核，而不是隨知識之沫而狂歡.

看到兩篇寫的不錯的回答,這裡推薦一下.

如何理解莊子所說的「吾生也有涯，而知也無涯。以有涯隨無涯，殆己」？?

www.zhihu.com如何應對知識焦慮？總感覺太多東西要學，而且感覺都是挺必要的？?

www.zhihu.com

我覺得還是不能浮躁和焦慮,否則會越陷越深.我曾經有過一段時間職業炒股,深深知道這些心態的作用.做任何事情一定要扎紮實實.功利心太強或者一直追逐著慾望(可能是知識,可能是金錢)跑,會迷失其中.

昨天那種寫代碼的無力感,不會寫不會運用,就算可以寫,但寫的不好一樣很難受,就感覺你知道可以寫的更好但你就是寫不出來那種非常噁心的感受.難受到直接躺牀上睡覺了,想過放棄(丟臉啊,才剛入門就想放棄),睡一覺醒來寫了這段文字,繼續向前看.我真的想穩固下基礎了.就先說這麼多吧.小白的感受.

————————————————————————————關於UI設計和編程

我其實並不懂UI設計,不過目前工作跟平面設計相關.我沒有資格去比較他們.只是分享一下我為什麼想學編程,也是從一些資料開始對編程感興趣,又看到一些與自身相關的資料,就下定心學編程了.

ui和前端對比前景怎樣？?

www.zhihu.com

————————————————————————————關於語法 關於解決問題

其實編程並不容易，並不是看懂語法知道有什麼作用就能做好編程。就像下象棋，知道走法卻沒辦法走出好棋；知道比喻誇張文字，卻沒辦法寫出優美的句子優秀的作文。目前的感覺是，知道語法，但要寫起來，怎麼寫，怎麼組織，結構是怎樣的，整個解決問題的思路和思維，全局性的概念是沒有的。其實編程應該是一項艱難的事情，這是一種工程技術。要想用這項工具去解決複雜的問題是非常不容易的。

————————————————————————————關於中文 英語2

今天有感比如學CSS的時候，有個屬性display:none;作為展示隱藏。一開始我只知道展示隱藏就用這個屬性。只是對display這個單詞死記硬背。

今天看英文版github guides的時候，去理解了一下。

GitHub Guides?

guides.github.com

display柯林斯詞典英英釋義：

• V-T If you display something that you want people to see, you put it in a particular place, so that people can see it easily.
• 如果你展示一些你想讓人們看到的東西，你把它放在一個特定的地方，這樣人們就可以很容易地看到它。

————————————————————————————關於自知之明

剛開始會有自知之明，然後走著走著又好像忘了自知之明。

突然意識到，我上面寫的大部分可能是沒用的無意義的。英語這部分其實說的通篇廢話。

但凡曾就讀本科或者重本的學生或者已經從這些院校出來的職業人士，都不太可能會擔心英語這些問題，因為這些已經是很長時間義務教育打下來的基礎了。從現在開始還要糾結重新學英語或者怎麼學英語，去搜集英語學習方法的，可能真的是基礎非常的差，當然了基礎非常差勁的人也包括我自己。基礎不牢地動山搖。喫透英語啃英語，還在看這篇文章的，或許別給自己太大壓力纔是好事。身邊有重本讀研的朋友，英文看技術文檔，發表SCI技術期刊都是再正常不過的事了。想想差距多大。之前自己都幹啥去了？

別糾結自學前端幾周，幾月找工作了，別糾結看不懂英語了，太浮躁了吧。我學了幾天編程幾天英語就在這裡教別人，沒有自知之明啊。所以學英語或者學編程最好當成一個興趣，養成一個習慣，培養一種邏輯思維，找到一份屬於自己的自信，和麪對看英文文檔和解決編程工程化項目的決心和勇氣。這些纔是最重要的。把擔當責任擔著，丟掉身上毛毛躁躁雜雜碎碎的雜質，跟牛人學習，進步。沉澱。差距越大越要沉澱。浮的越厲害會被浪沖走的。

其實想說的就是，想看英文技術文檔，和學好編程，先要有自知之明的心態。把自己的位置放的越低，才能收穫的多。沒有自知之明就不知道自己是哪根蔥，從哪裡來走向哪裡去。反正差距都這麼大了，那就放開去做好了，反正一無所有還有什麼可在乎呢？可能這種丟掉心裡包袱義無反顧的心理能讓人沉下心去歷練。

這裡還可以往更深入的角度去談一下，個人見解不一定對，見諒。不過可能談的就偏離主題了。現在所做的努力，更多的是為了彌補差距吧。差距可能是原生家庭教育，其他資源，環境，個人思維成熟等複雜因素帶來的。可能像香港的高房價，美國的黑人教育貧民窖？不同的環境和資源分配下，還有個人思維的成熟，所帶來的個人的差異化非常大。類似貧富差距。正因為這些差異化，在社會中人的財富不同地位不同資源不同，工作中能力不同責任不同做事方法不同，學習中進步不同方向不同。為什麼有些人能當專家有些人卻是業餘？很複雜。想學好編程或者英語，就要考慮深度剖析自己，去比較，去找方法去找渠道去學習，這樣才能學好學快學的精。工作也正需要這樣多方面綜合素質都完善的人才。技術，能力，人品等等這些。不是今天我自學幾個月，就立馬能找到實習的簡單問題。人是複雜化，社會也是複雜化，差距、思維等帶來的鴻溝也不是一下可以彌補的。最好認清自己有自知之明，哪些優勢哪些劣勢，去改進優化去彌補，可能是比較理想化的一個方向吧。沒有抱怨的意思，但人的力量是很渺小的，人受很多因素變化。認清自己，在編程和英語這個反向可能會找到自己的立足之地，也可能沒有立足之地，不過當個興趣還是非常有意思的。不是說學了編程自己就有邏輯化變得理性，做事更富有條理了。剝開自己，一層一層地分析，面對現實，再重構優化。

---

————————————————————————————2020.06.05

做事有始有終,既然說記錄小白從開始到放棄,現在還沒放棄,還在非常緩慢非常差勁的學習.

簡單說下html css javascipt jQuery,我還是小白,不專業,不一定說的正確,所以自行分辨和查看MDN資料.

html

&

這是一個文章段落,p標籤起和尾裡面放文字&

css

p{
width:100px;
height:100px;
color:red;
}
/*width設置寬度 height設置高度 color設置字體顏色 html負責結構 css負責表現*/

js

var text = document.querySelector("p");
text.style.color = "green";
//text通過DOM操作獲取到標籤P,並設置它的顏色為綠色,還可以設置點擊事件等等,類似人喫飯走路

jQuery

$("p").css("color","blue");
//$ === JQuery true
// jQuery是JS的一個庫,寫的更少做的更多,用原生JS代碼封裝好,方便調用.寫起來更加簡潔.

不敢在關公面前耍大刀!我只知道我目前我還很辣雞,只是單純分享一下想法!

目前學習進度

做過的練習

宣傳頁Demo

webpageDemo2?

eryisan.github.io

簡易計算器Demo

calculatorDemo?

eryisan.github.io

正則表達式Demo

RegExpProject3?

eryisan.github.io

jQueryDemo

jQueryDemo?

eryisan.github.io

現在正進入JQuery章節

我只知道自己是個很差勁學習能力比較差的人,一直碌碌無為,所以也沒想靠知乎等平臺當網紅的心!更沒想說學幾個月就自大到覺得能出去找工作!目前對我來說,就是想試一試學一學編程,當個小愛好這樣.分享小白走過的坎坷.

---

去B站看視頻，你想學的技術都有。Java，python，javascript，webpack，node.js，express都很齊全。

---

能會用知乎發文章，為什麼不會用搜索，一搜一大堆。就算是什麼21天精通xxx系列也可以看。

前端在知識開源這一塊，你絲毫不用擔心，只要有心。隨便點開知乎的控制檯，你也能學到很多。

---

推薦閱讀：