前言

学习前端其实并不难,前端的难点主要集中在 Javascript、CSS、HTML三种语言的混合三打,让初学者痛苦不堪,这篇文章简单的以我个人的学习经历来讲一下初学者,尤其是一个有一定编程经验的初学者该怎么入门前端。

首先我们明确一个观点:

最好的资源就是 Google 和 百度。

一些常用资料:
MDNw3school菜鸟教程

学习CSS

最好的学习CSS的方法就是,此非彼,这里是模仿和学习,那么,怎么才能模仿和学习。

Chrome 下有一个扩展叫做 "stylish",用于按照某个规则自定义某个网站的样式,身为一个有个性的程序员,改网站的外观是水到渠成的事情,其原理是通过扩展程序向网站页面中注入指定的style标签,也就是说,你可以自己写CSS选择器,更改网站的外观。

那么在这个过程之前,你需要掌握哪些知识:

  1. 正确学会在Chromium系浏览器中安装 stylish 或者 stylus 等插件
  2. 正确学会写网站的域名匹配规则(实际上很简单)

那么你可以通过这个过程学会什么?

99% 的自定义样式都是为了改网站的外观,为了在已有代码的基础上修改外观,那么以下这些,你一定会遇到。

  1. 选择器、属性选择器,选择器权重问题
  2. !important
  3. display: [inline-block | inline | block | none]
  4. box-shadow / text-shadow
  5. 伪元素
  6. transition
  7. transform
  8. animation
  9. postion:[absolute | relative | fixed | static]
  10. ........more

为了学会这些,你需要找到前言中的 MDN、W3school、菜鸟教程,反复查阅,反复理解,反复尝试。

为了补充你在以上阶段的不足,你需要不停的百度/Google 有关 盒模型、层叠与继承、布局的相关理论知识。

如果你是初学者,建议直接把 CSS3 的相关标准当作规范来学,尽管可能还有不足1%的浏览器不支持某些特性。

学习 Javascript 

Javascript 的入门教程,从技术上来讲,其实可以说是很泛滥了,但是我还是可以简单讲讲。假设你已经有了一定的编程和科班基础。

虽然已经是 2019 年了,但是还是可以去了解一下 JqueryUnderscore.js,主要看看其官网文档,至少可以入门的时候拿来就用,不会啥都写不出来。新手阶段,Hbuilder还是很好用的。

在入门阶段,尽管我们现在有 let 和 const 了,但是还是建议了解一下闭包,了解一下 prototype,学习一下 callapplybind,有些东西,尽管很多时候用不到,但是还是要学。

再接下来的阶段,你应当已经会用简单的 js 写出一个简单的页面了,接下来,你可能需要进入前端学习的第一个门槛,使用 webpack 学会构建自己的前端项目,webpack 非常强大,可以为你自动刷新页面,当然,你可能需要 HMR,这个时候,你就可以考虑使用VSCode作为编辑器(如果有钱的话,你也可以考虑开始组一个双屏了,一个屏编写,一个屏预览),当然,webStorm也很好,但是需要付费,如果你是学生,JetBrain有免费的学生计划,可以考虑一下。

别看我说了这么多,其实webpack我们很少去配置,因为这个时候我们开始学习使用框架了,毕竟这已经是 2019 年,对于一个入门者,我们推荐直接使用 Vue.js,他的官网提供了教程,从安装 vue-cli 到浏览器 <script> 引入,都有完整的示范。

也许你这个时候发现要开始学习 ES6 了,话不多说,阮一峰的 ES6入门 可以说必看了,其实如果你读到这里的话,我建议你直接在新手阶段就开始使用ES6,至少开始使用它的新语法。

后面你还可能会学到 Promise / async / Proxy / Iterator ……

然后你可能还会学到 Nodejs ,可能去学 Express或者 Koa,如果你动手能力很强,NPM有很多宝藏等待你去发掘。

如果你打算转React,React官网文档也很完备,也许你需要适应一下他和Vue的不同,但是究其根源,他也是Javascript。

Javascript固然好,但是有时候有人会推荐 Typescript,Typescript是为了完备JS的类型系统,虽然我对于这种画蛇添足不太感冒,但是必须指出的是,Typescript的错误控制和类型管理很有一套,使用Typescript能有效规避很多低级错误,也减少了动态类型代码中的相关问题。

再往后……我这个入门者就没法提供建议了。