看了这篇前端入门文章，还怕零基础学不会吗？

以找工作为目的的话，学习前端我把它分为三个阶段

1. 兴趣启蒙+初步入门
2. 基础打牢、巩固基础知识，对写过的代码有深一点的理解
3. 能力进阶、了解一下新一点，高级一点的技术

下面是学习这个最小单元的4个部分

• 教程：w3cschool，不推荐视频教程（因为视频教程讲的太多了，很多东西对于入门做东西用不上）
• 推荐读物：不推荐
• 只看我这张图上提到的部分（图上的大纲都是按照w3cschool的教程写的），要看到什么程度呢？大致有印象，知道这个标签是干啥的就行了

• 带着这几个问题去看教程，保证看完之后这几个问题都有自己的理解

1. html是什么
2. html的基本结构长什么样子
3. 标签是什么
4. 属性是什么

2.学习css

• 教程：推荐w3cschool，不推荐视频教程
• 推荐读物：css权威指南（全部都学完了回过头来再看吧）
• 只学我这张思维导图提到的部分，学到什么程度呢？有个大致印象，能对下面那些问题做出自己的理解就好了

• 带着这几个问题去看w3cshcool的教程

1. css是什么
2. css的语法是怎么样的结构
3. 怎么对一个标签增加简单的样式，自己尝试一下？
4. css盒模型是什么
5. display的值有哪几种，这几种值区别是什么
6. css怎么实现垂直水平居中？你能使用几种方式实现？
7. 页面的常见布局有那几种，分别可以怎么实现？

3.学习js

这大概是开始劝退的一个阶段了，因为开始复杂起来了呀~~很多人都在这溜了

好吧，这个还是看你又没有编程基础，如果你学过Java这种东西，哪怕挂科了，只要脑子里有个概念，这里就比较好学

如果完全0基础，慢慢啃吧=0=，完全0基础还是看视频来的快

• 教程：w3cshcool的教程（适合有微弱编程基础的人，就是至少知道变量是啥，能看懂简单for循环的人）& 完全0基础的人，可以看视频了（我没看到啥合适的视频，慕课上的js入门视频可以看一看，主要还是按照下面的大纲来，和大纲无关的视频就可以跳过了）
• 推荐读物：高级程序设计（全部学完了回过头来再看吧）
• 只学这张思维导图提到的部分

• 带着这几个问题去学习

1. js有哪些基本类型，每种基本类型是干啥的
2. 对象是什么，函数是什么，数组是什么
3. 数组，函数，对象的常用方法有哪些
4. DOM是什么，我能用它做什么
5. jquery是什么？

4.学习框架

如果你要学框架的话，咱就从vue开始吧，为什么用vue？中文社区完善呀

学习vue之前，你得了解下前端的一个大杀器：node.js

先安装好node.js然后搞懂这几个事情

1. node和npm是什么，他们可以用来做什么
2. npm init命令有什么作用
3. node_modules和package.json有什么作用？

好了，开始学vue吧

• 教程：
• VUE教程
• 带着这几个问题去学习
• 使用vue-cli生成的项目，目录结构是怎么样的？其中的每个文件夹和每个文件的作用是什么？（vue-cli是有官方教程的，按照官方教程来生成项目！！！）
• 什么是双向绑定？
• mvvm框架是什么意思？
• 实现一个todolist，网上demo很多，找一个一步步来就好了，关键是要理解mvvm框架的意义，为什么要使用mvvm框架
• 解决了这些问题之后，你需要实战，可以到github上边找合适想的项目进行拆解

1. 实战要点：
2. 先看懂项目中vuex和vue-router的用法（第一步不是看懂项目，而是看vuex和vue-router怎么用）
3. 自己新搭建一个项目，配置好vuex和vue-router到能使用的地步
4. 看懂项目
5. 自己实现，实现的时候就不要看源码了，想不明白的地方可以回来看

如果要做创意交互案例的话，可以多关注

• p5js.org
• https://www.pixijs.com/ ​

如果要做游戏的话，可以关注

• https://www.pixijs.com/ ​
• https://github.com/gamelab/kiwi.js
• https://github.com/photonstorm/phaser
• 白鹭
• layabox

如果是手机客户端的话，可以关注

• https://reactnative.dev/
• https://weex.apache.org/zh/guide/introduction.html