前言

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

首先我们明确一个观点：

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

一些常用资料：
MDN、w3school、菜鸟教程。

学习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 年了，但是还是可以去了解一下 Jquery、Underscore.js，主要看看其官网文档，至少可以入门的时候拿来就用，不会啥都写不出来。新手阶段，Hbuilder还是很好用的。

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

再接下来的阶段，你应当已经会用简单的 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能有效规避很多低级错误，也减少了动态类型代码中的相关问题。

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