10大頂級(jí)公開課，帶你入門小程序，Web前端開發(fā)

時(shí)間：2023-10-02 15:54:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-02 15:54:02 來源：網(wǎng)站運(yùn)營(yíng)

10大頂級(jí)公開課，帶你入門小程序，Web前端開發(fā)：10.16, 更新Treehouse 35小時(shí)體驗(yàn)后評(píng)測(cè)

---------------


很多微信小程序的文章分析指出，可能會(huì)讓前端開發(fā)程序員更搶手。而不僅僅是程序員能從中受益，對(duì)于產(chǎn)品經(jīng)理、營(yíng)銷運(yùn)營(yíng)和自媒體作者，學(xué)習(xí)前端開發(fā)也是非常有益的。（馮大輝的 如何把握「微信小程序」這一波紅利？ 李笑來的 微信小程序是誰的“通往財(cái)富自由之路”？）








微信小程序大部分和前端開發(fā)類似或者通融，都是 HTML, CSS和JavaScript的入門課程。




所以本文，也就對(duì)目前市面上，前端開發(fā)入門的公開課作為一個(gè)資源匯總吧。適合任何想入門前端開發(fā)的人，尤其是針對(duì)零基礎(chǔ)小白，推薦理由中做了些解釋和必要的刪減。推薦中很多都是系列課程，并不需要學(xué)完全部，所以正文也在標(biāo)出了HTML, CSS和JavaScript的入門 部分。




本文咨詢了杭州大學(xué)計(jì)算機(jī)系的研究生，參考了本站、Quora 的問答，以及過往學(xué)習(xí)者、資深程序員的點(diǎn)評(píng)，筆者查閱了相關(guān)課程的學(xué)生評(píng)論，尤其是差評(píng)，并且自己注冊(cè)，初步體驗(yàn)部分課程，從而完成這篇總結(jié)評(píng)測(cè)的，但個(gè)人能力有限，若有疏漏錯(cuò)誤，還望指正。




文章太長(zhǎng)，寫完自己都沒耐心看了，建議看“太長(zhǎng)不看版”。

/*********** 太長(zhǎng)不看版 ************/

注： 只能接受中文資源的，請(qǐng)直接拉倒結(jié)尾，抱歉只評(píng)測(cè)了一個(gè)中文資源。因?yàn)樵谖铱磥?，有相?dāng)多的英文資源都非常優(yōu)質(zhì)好太多，僅從編程上說，是完全新手友好適合入門的?？梢栽囍蟭reehouse的課，然后用中文參考著看，本身也是對(duì)英文的提高。

所以對(duì)于那些不能使用英文資源的表示可惜，當(dāng)然也十分建議打磨下自身英語技能，同樣是非常有用有價(jià)值的投資學(xué)英語有什么用？ - FreeGrit瀟灑毅行的回答。


所以對(duì)于英文不夠的，此文提到的大部分，當(dāng)然不能當(dāng)做入門資料了。請(qǐng)直接跳轉(zhuǎn)結(jié)尾。


非常推薦以下3個(gè)，可以按需選擇一個(gè)，或者幾個(gè)同時(shí)學(xué)習(xí)。

1. Treehouse | Tracks 里面的 的 Front End Web Development
最推薦，非常適合零基礎(chǔ)新手（所有課程之最），交互式有趣的學(xué)習(xí)體驗(yàn)，游戲化的點(diǎn)數(shù)、成就系統(tǒng)，甚至讓我在開始的時(shí)候?qū)W上癮了。同時(shí)學(xué)習(xí)社區(qū)很活躍，提出的問題幾小時(shí)內(nèi)就收到答案。


2. Udacity 的 前端工程師（英文）
由Google等公司合作制作，高質(zhì)量，以實(shí)戰(zhàn)項(xiàng)目為導(dǎo)向的課程，基礎(chǔ)課程免費(fèi)，適合有一定編程基礎(chǔ)的。但若要參與的實(shí)戰(zhàn)項(xiàng)目，收費(fèi)較高。


3. Coursera 上 約翰霍普金斯大學(xué)的 HTML, CSS, and Javascript for Web Developers

https://www.coursera.org/learn/html-css-javascript-for-web-developers

課程和Quiz都免費(fèi)，在Coursera同類課中，好評(píng)率第一，1700+的學(xué)生中，僅4個(gè)差評(píng)，很適合新手，并且會(huì)講解一些實(shí)際項(xiàng)目的要求。








以上都是全英文授課，僅有英文字幕，但課程的質(zhì)量非常優(yōu)秀。必須要中文資源參考的，可以參考正文部分第三類，中文資源。




對(duì)于有一定基礎(chǔ)背景的，默認(rèn)具有了科學(xué)上網(wǎng)、搜索技巧，可以在以下資源站按需搜索。

1. Udemy 付費(fèi)

2. Udacity 基礎(chǔ)免費(fèi)

3. Coursera 基礎(chǔ)免費(fèi)

4. Edx 免費(fèi)，但開課時(shí)間有限制

5. Lynda 付費(fèi)

6. Treehouse, codeschool, codecademy月費(fèi)/年費(fèi)




========

其他可能有用的資源：

1. 編程領(lǐng)域的本站： Stack Overflow

2. 開發(fā)工具（編輯代碼和編譯的工具）：WebStorm (憑借edu郵箱，可免費(fèi)使用 https://www.jetbrains.com/student/ ），Sublime Text 3


3. 搜索類：一顆懂得搜索的心 + Google + 百度（中文，或者網(wǎng)盤資源）




4. Learn to Code and Help Nonprofits FreeCodeCamp （@LALH 推薦） 免費(fèi)的課程，實(shí)戰(zhàn)項(xiàng)目，很強(qiáng)的互動(dòng)，順帶還能做公益。

/*********** 完整評(píng)測(cè)版 ************/

正文評(píng)測(cè)導(dǎo)航：（詳細(xì)評(píng)測(cè)還在更新完善中...）

第一類： 交互式，在線編程課程

第二類：傳統(tǒng)英文公開課

第三類：中文資源




================

第一類： 交互式，在線編程課程

評(píng)測(cè)的主要是Treehouse, codeschool 和 codecademy，這些相比于國(guó)內(nèi)外公開課平臺(tái)，有時(shí)在于都可以在線編程，及時(shí)反饋結(jié)果，對(duì)新手很友好的交互式指導(dǎo)，比如會(huì)提示你具體哪步錯(cuò)了。并且相比Coursera等理論型的公開課，這三家會(huì)加入實(shí)戰(zhàn)項(xiàng)目，更強(qiáng)調(diào)實(shí)操訓(xùn)練。三家各有利弊，個(gè)人傾向Treehouse.




1. Treehouse | Tracks

里面的 Front End Web Development




10月16日止，共在這學(xué)了35小時(shí)。

本身教學(xué)質(zhì)量就很高，而且對(duì)零基礎(chǔ)新手非常友好，相比Coursera，一開始省去了開發(fā)環(huán)境安裝的過程，是所有課程中，最新手友好的。很多細(xì)節(jié)做得很棒，每個(gè)視頻的提問，智能填充代碼等，相比另外兩個(gè)網(wǎng)站更便捷，學(xué)習(xí)體驗(yàn)更好。同時(shí)還有積分、排行榜、徽章等游戲化的系統(tǒng)，會(huì)讓學(xué)習(xí)者覺得有趣，獲得成就感、掌控感。

除了學(xué)習(xí)體驗(yàn)比另外兩家更好些，其課程的結(jié)構(gòu)，是以職業(yè)職責(zé)劃分的，成為Tracks，包含多種需要的語言，而其他兩家是以語言劃分的。每個(gè)Track，含有一系列1-8小時(shí)的小課程，比如下圖第一個(gè)前端網(wǎng)頁(yè)開發(fā)（也就是我們需要的入門課程），整個(gè)系列就需要70小時(shí)。


視頻下有課程的重點(diǎn)筆記，名詞解釋，額外的資源等。并且會(huì)給出windows和mac不同系統(tǒng)下的快捷鍵操作。





每看完一個(gè)視頻，就會(huì)出現(xiàn)前幾天的學(xué)習(xí)記錄，激勵(lì)你趁熱打鐵。并且會(huì)增長(zhǎng)相應(yīng)的“技能點(diǎn)”，解鎖一些成就。








要通過每個(gè)章節(jié)的Quiz，你才能拿到成就.





社區(qū)比較活躍，課程中不明白的地方，可以在下面提問，就像本站一樣，可以邀請(qǐng)同學(xué)，或者工作人員（moderator）,好幾次，都是1小時(shí)內(nèi)就給出答案了。

可能的存在的缺點(diǎn)是，Code Challenge 的答案比較唯一，而且只能按照規(guī)定的一步步來，不過后面習(xí)慣了就好，也能發(fā)現(xiàn)自己具體哪一步錯(cuò)了。這里code challenge 和 quiz 你是無法看答案的，自己做不出來，就去前個(gè)視頻下面提問，其實(shí)已經(jīng)存在很多和你一樣的問題了，瀏覽這些問題和回復(fù)，也能學(xué)到很多。相比之下Codecademy的正確答案更多樣化些。

使用Treehouse每個(gè)月25美元，可以免費(fèi)試用7天，不喜歡就退訂。
用這個(gè)鏈接，可以第一個(gè)月50%優(yōu)惠：Plans & Sign Up 2. Codeschool
其path 中的 HTML/CSS ， JaveScript
Learn HTML and CSS JavaScript programming: JavaScript for beginners

只有極其少數(shù)的課程免費(fèi)，29美元/月。

界面顏值很高，但個(gè)人認(rèn)為學(xué)習(xí)體驗(yàn)上不及treehouse，習(xí)題有些重復(fù)冗長(zhǎng)。同樣的，有積分、成就系統(tǒng)，每個(gè)測(cè)試滿分250分，當(dāng)你提交前使用答案會(huì)扣除一定的分?jǐn)?shù)。有時(shí)候字幕會(huì)遮住視頻中的操作。并且有人反應(yīng)，國(guó)內(nèi)上Codeschool的視頻，一些會(huì)加載很慢。


下圖是Codeschool的小測(cè)試界面，每題滿分250分，每次查看提示（答案），會(huì)扣除一定的分?jǐn)?shù)。和另外兩家一樣，也給出了在線編程-及時(shí)反饋的功能。有些不方便的是，雖然直接提供了回看視頻的鏈接，但需要整個(gè)頁(yè)面回過去，無法一邊回看一邊編程。這點(diǎn)上，codeacademy就更好些。Treehouse由于編程窗口永遠(yuǎn)是新開的，可以一邊看視頻一邊編程，但Quiz的時(shí)候同樣不能直接返回。



3. Codecademy, Learn to code
其中的 HTML & CSS | Codecademy （就是默認(rèn)推薦你學(xué)習(xí)的第一個(gè)課程），
之后再學(xué)Introduction to JavaScript

所有基礎(chǔ)課程免費(fèi)，附加服務(wù)20美元/月

秉承練習(xí)是學(xué)習(xí)編程的最好方式的邏輯，所以哪怕是一個(gè)很小的知識(shí)點(diǎn)，Codecademy 也會(huì)給你一個(gè)個(gè)操作的指示，直接通過實(shí)際操作來學(xué)習(xí)。

同樣是交互式的學(xué)習(xí)方式，但是教學(xué)主要通過文字指示，而非視頻那么直觀，因此學(xué)起來可能更枯燥些。相比之下，優(yōu)點(diǎn)是，練習(xí)題中的答案比較多樣化，而treehouse會(huì)更嚴(yán)格。




============

第二類：傳統(tǒng)英文公開課

傳統(tǒng)公開課，主要以視頻教學(xué)為主，含有在線答題Quiz測(cè)驗(yàn)，但沒有交互式學(xué)習(xí)那樣對(duì)新手非常友好的指導(dǎo)。并且更多需要學(xué)生自行閱讀課外材料，搜索來解決問題，對(duì)學(xué)生的自學(xué)能力有更高的要求。因此建議零基礎(chǔ)的，可以至少參加一個(gè)交互式學(xué)習(xí)，然后可以依需求選擇相應(yīng)公開課。







1. Udacity 的 前端工程師（英文）

其中前2-3個(gè)項(xiàng)目的5-7個(gè)相關(guān)課程，屬于入門類，單獨(dú)上這些課程是免費(fèi)的，參與實(shí)戰(zhàn)項(xiàng)目需要付費(fèi)。付費(fèi)服務(wù)還包括結(jié)業(yè)證書，一對(duì)一輔導(dǎo)等。

注：視頻在國(guó)內(nèi)可能無法觀看。




課程是Google Amazon等企業(yè)聯(lián)合制作的,并且是以實(shí)戰(zhàn)項(xiàng)目為導(dǎo)向的，網(wǎng)上的評(píng)論都非常認(rèn)可Udacity的質(zhì)量。




2. Coursera 上 約翰霍普金斯大學(xué)的 HTML, CSS, and Javascript for Web Developers




https://www.coursera.org/learn/html-css-javascript-for-web-developers

學(xué)生評(píng)分 4.9/5

Quiz 小測(cè)驗(yàn)免費(fèi)。

耗時(shí)：5周，4-6小時(shí)/周




1700+的學(xué)生評(píng)論，只有4篇差評(píng)，并且一些是學(xué)生自身的問題，比如有學(xué)生期待所有的都由老師解釋，而不是自己去搜索。




好評(píng)大多集中在，課程的結(jié)構(gòu)易于理解，上課方式非常棒，很有趣，并且會(huì)和你講解實(shí)際項(xiàng)目中的要求。另一個(gè)很大的優(yōu)勢(shì)是，相比于大多Coursera的付費(fèi)Quiz測(cè)試來說，這門課的Quiz全免費(fèi)。




Coursera上還有3門前端開發(fā)的入門課，但評(píng)價(jià)都不及上述約翰霍普金斯大學(xué)的。

對(duì)新手友好程度來說，略低于Treehouse等那種交互式的，尤其是開頭部分，需要一定的毅力和自學(xué)搜索能力。


a. 倫敦大學(xué)的Responsive Website Basics: Code with HTML, CSS, and JavaScript

學(xué)生評(píng)分 4.5/5

耗時(shí)，4周，2-4小時(shí)/周

Quiz小測(cè)驗(yàn)免費(fèi)。




差評(píng)集中于，原本期待中級(jí)課程的學(xué)生，會(huì)失望的覺得太簡(jiǎn)單。對(duì)于完全新手來說的問題，主要是測(cè)試中的一些題超綱，并且因?yàn)椴恢佬g(shù)語，難以用google搜索到。













b. 香港科技大學(xué)的HTML, CSS and JavaScript

學(xué)生評(píng)分 4.7 /5

Quiz 小測(cè)驗(yàn)需要付費(fèi)。

耗時(shí)：3周，3-7小時(shí)/周

全英文，有英文字幕，是全棧工程師專項(xiàng)系列的第一課。綜合評(píng)論來看，對(duì)于有一定編程基礎(chǔ)的，會(huì)比較容易。相比倫敦大學(xué)的課，內(nèi)容更多更詳細(xì)些。




負(fù)面評(píng)論主要集中在，對(duì)于一些有背景的學(xué)生，這門課過于簡(jiǎn)單、重復(fù)，而對(duì)于完全的新手，感覺這門課上的有些快，并且會(huì)有些過于理論學(xué)術(shù)化。







c. 杜克大學(xué)的Programming Foundations with JavaScript, HTML and CSS




學(xué)生評(píng)分 4.4/5

Quiz 小測(cè)驗(yàn)收費(fèi)

耗時(shí)：4周，3-7小時(shí)/周




這門課評(píng)分最低。差評(píng)集中在，不適合新手，課程解釋不清楚，簡(jiǎn)單問題復(fù)雜化，Quiz小測(cè)驗(yàn)和課程相關(guān)度低。并且差評(píng)中也出現(xiàn)了一個(gè)17年的碼農(nóng)，他也認(rèn)為這門課對(duì)新手極其不友好，連他這樣有編程背景的，每周耗時(shí)都需要10小時(shí)/周，是宣傳上的2-3倍。













3. Udemy

Learn HTML: Web Design for Beginners

JavaScript programming: JavaScript for beginners




這兩門都是人氣和評(píng)分排名較高的，涵蓋了HTML CSS和JS，也可以自行在Udemy上搜索綜合課程。Udemy上的課都是付費(fèi)的。





Udemy上 也有很多豐富的優(yōu)秀資源。不過局限性在于：

1. 所有課程收費(fèi)，一套20 - 40+小時(shí)的課程，價(jià)格為100-200美元左右
2. 那些學(xué)習(xí)人數(shù)多，評(píng)分高的，大多是一整套課程，因此對(duì)于初學(xué)者來說，在學(xué)人數(shù)多的高分的入門課程很少見。
3. 由于教學(xué)視頻大多數(shù)是個(gè)人制作，同一課程有很多教學(xué)視頻，對(duì)于新手來說難以辨別好壞，基本只能根據(jù)評(píng)論數(shù)、評(píng)分來選擇。所以相同價(jià)格，在Treehouse, codecademy, codeschool 這種更權(quán)威專業(yè)的平臺(tái)，會(huì)有對(duì)新手更友好、高效、高質(zhì)量的學(xué)習(xí)體驗(yàn)

4. 其他

edx上課程較少，并且有些課開課時(shí)間是固定的，無法立刻上。Lynda都是付費(fèi)，一些學(xué)校是購(gòu)買資源的，學(xué)生可以免費(fèi)用。




========

第三類：中文資源

1. 慕課網(wǎng) 的 Web前端工程師 路徑，前三塊：HTML和CSS基礎(chǔ)，JavaScript語言，jQuery







2. 手冊(cè)類自助查詢學(xué)習(xí)： w3school 在線教程




中文類搜集的比較少，因?yàn)橛⑽念惖淖龅梅浅３錾?，而且大多英文課程并沒有想象中那么難，并且有英文字幕，當(dāng)然首先推薦英文資源了。同時(shí)也歡迎補(bǔ)充中文類學(xué)習(xí)資源。







===

特別鳴謝，杭州大學(xué)計(jì)算機(jī)系的X同學(xué)，像開發(fā)工具的推薦，幾大課程的推薦都有他的功勞。




參考文獻(xiàn)

1. 本站-WebStorm 有哪些過人之處？ WebStorm 有哪些過人之處？ - 前端開發(fā)
2. 維基百科
3. 百度百科
4. Treehouse, Codeacademy & Code School
5. 相應(yīng)課程下的學(xué)生評(píng)論
6. https://www.quora.com/What-do-professional-developers-think-of-online-programming-courses-such-as-Codecademy-or-Code-School

========

我在本站的回答干貨精選

學(xué)好英語有什么用？能給你錢，圈子，信息，快樂....

你是怎么制定計(jì)劃，調(diào)整計(jì)劃的？

如何糾正英語發(fā)音，不是口音，是發(fā)音?

現(xiàn)在賺多少錢，40歲以后才能財(cái)務(wù)自由？

除了看書單，還能這樣找到好書

更多干貨分享，可以掃碼關(guān)注，還能領(lǐng)我的私房學(xué)習(xí)資源~