前端课程精选

这个页面推荐给不排斥英文的人。有人觉得自己英文水平不好,所以“不配”使用英文资料,我不想说什么,这是你自己的选择,但我可以告诉你中文技术圈的资料完整平均晚英文资料至少八个月,一个东西在国外英文开发圈子已经成熟,到国内往往要比较长一段时间,而且中文技术圈的资料普遍“炒冷饭”很严重,详实准确程度因为翻译等原因,往往以讹传讹,猎奇,片面化,讨论些根本不重要的问题,而忘记了学习编程开发真正关键的步骤和路线。

任何想在这个行业走得长的人,都不应该排斥英文,不是说中文技术圈的资料没有优点,但一手资料就是一手资料,用一手资料,会不知不觉让你获得别人无法比拟的优势,哪怕你未必自己能意识到。这种优势是彻底的,根本的,你的眼界,思维习惯,技术品位都会因此而不同。

没有任何前端基础

你的前端基础接近于零,基本没有用Javascript写过什么东西,这时候,你应该先充分熟悉HTML + CSS,积累充分的代码训练,在这个基础上开始JS的学习。

这个课程你会用HTML+CSS写一个项目。


Build Responsive Real World Websites with HTML5 and CSS3

已经有HTML+CSS基础

有基础的意思不是你“看过”多少东西,而是你写过多少东西。熟悉与不熟悉是一种直觉,只能通过充分训练,你才能获得这种感觉。

这个课程你会用JS写一个项目。


The Complete JavaScript Course: Build a Real-World Project

这时候你应该同时充分熟悉了Chrome Dev Tools的用法,调试HTML、CSS,在Console中试验小段JS代码。

掌握DOM编程

这是JS编程核心技能之一。在你掌握DOM编程之前,不要费心思在Javascript模式,JS程序设计技巧上,因为那些东西对你目前过于抽象,你需要DOM的知识基础,就像你用C不是一上来就去纠结指针算法,而是学习怎样调用标准库或者操作系统API完成一点实际的功能。


Javascript Intermediate level 1 – Mastering the DOM


Interactive JavaScript DOM Introduction to the DOM Course

深入学习Javascript语言本身

下面的课程不需要全部完成,有选择地完成两个即可。

课程不是视频看完就可以,如果你只是觉得看对方讲得流畅,觉得“看”着没问题就可以,那不如不看。如果你自我训练的代码达不到超不过课程提供的实例和练习,效果也打折扣。

学习课程有效的必要条件,是你自己动手写了1.5倍于课程内容的代码,这些代码必须在github上留下痕迹,你回溯的时候会发现有意义,你不需要经常回过去看,哪怕偶尔回过去看一两个文件,都有意义。

如果你什么都不写,写了什么痕迹都不留下,没有东西可以追溯,就很可能达不到课程所需要你达到的目标。


Advanced Javascript


Learn Modern JavaScript: Advanced Topics


So you think you know JavaScript?


JavaScript: Understanding the Weird Parts

重构

这时候你应该放慢速度,回过去看之前写的项目(主要是DOM),对语言的理解加深了,就该去寻找已有项目中能改进的地方,做重构。你最好花和你第一次完成项目的时间去作重构。

另一个选择,是寻找一个自己感兴趣的项目,结合已经学到的东西,完成它,这个项目最好比之前的项目更复杂,功能更多,你会发现这个项目的水平比之前的高,你也会发现做这个项目的问题反而变多了,不要紧,这是正常的,因为现在你知道的东西多了,实现的选择多了,考虑多了而已,这是一个好现象。

不管是重构还是重写,你可以考虑把语言拓展到ES6:


Upgrade your JavaScript to ES6

也可以考虑引入基础库如jQuery:


The Complete jQuery Course: From Beginner To Advanced!

这时候你会发现无论是ES6还是jQuery都比你从一开始听说的时候更容易理解,因为你已经有了Javascript语言基础。

框架

React, Angular,Vue你只需要投资一个,不能一上来就同时学多个框架,那只会事半功倍。框架是一个很个人的选择,个人品位并无对错优劣,只是一个选择而已。

重要的是,选择了就100%投入,不可心猿意马,这种技术投资的特点,是你投入一点没有产出,也不会让你有竞争力,市场上什么都懂一点的人多了,但这些人往往形不成技能竞争力,只有当你“理解”一个框架inside-out,能独自驾驭的时候,才有竞争力。

React:


React 16 – The Complete Guide (incl. React Router 4 & Redux)


Modern React with Redux

Angular:


The Complete Angular Course: Beginner to Advanced


Angular Crash Course for Busy Developers

Vue:


Vue JS 2 – The Complete Guide (incl. Vue Router & Vuex)


Vue JS 2: From Beginner to Professional (includes Vuex)

学框架的核心,仍然是“写”而不是“看”,如果视频看下来什么都没做,是没有任何意义的。

你会真正理解为什么商业开发需要框架,框架的优势在哪里(相比你之前用纯JS写的项目),想一想如果之前的项目如果用框架来实现,会怎么样?你应该写一两个项目,重构旧的,重写新的,都可以。

同时你会理解框架的缺陷,看到一个技术的优点和缺点,是你作为一个技术人员,培养起技术直觉的重要途径。

工具链

你可以尽早熟悉工具链的核心,并尽早在练习项目中使用(如果工具在项目中能发挥有意义的作用)。

Git,NPM生态等等:


Git a Web Developer Job: Mastering the Modern Workflow

不必过早纠结browserify和webpack哪个好,只管拿起来用,不喜欢可以放下,喜欢就投资时间。

细部的工具和库来来去去,不需要你过度关注,工具最终也只是工具,真正的核心,是你在前面写练习项目过程中学到的DOM编程,语言基础,核心概念,设计技巧,调试技巧。

如果你能已“动手编程”为核心,完成上述过程,配合一对一的答疑,你不需要担心在国内技术职场没有竞争力,因为大部分人根本不知道还有这些课程存在。

 

更多课程

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注