以找工作为目的的话,学习前端我把它分为三个阶段
- 兴趣启蒙+初步入门
- 基础打牢、巩固基础知识,对写过的代码有深一点的理解
- 能力进阶、了解一下新一点,高级一点的技术
下面是学习这个最小单元的4个部分
- 教程:w3cschool,不推荐视频教程(因为视频教程讲的太多了,很多东西对于入门做东西用不上)
- 推荐读物:不推荐
- 只看我这张图上提到的部分(图上的大纲都是按照w3cschool的教程写的),要看到什么程度呢?大致有印象,知道这个标签是干啥的就行了
- 带着这几个问题去看教程,保证看完之后这几个问题都有自己的理解
- html是什么
- html的基本结构长什么样子
- 标签是什么
- 属性是什么
2.学习css
- 教程:推荐w3cschool,不推荐视频教程
- 推荐读物:css权威指南(全部都学完了回过头来再看吧)
- 只学我这张思维导图提到的部分,学到什么程度呢?有个大致印象,能对下面那些问题做出自己的理解就好了
- 带着这几个问题去看w3cshcool的教程
- css是什么
- css的语法是怎么样的结构
- 怎么对一个标签增加简单的样式,自己尝试一下?
- css盒模型是什么
- display的值有哪几种,这几种值区别是什么
- css怎么实现垂直水平居中?你能使用几种方式实现?
- 页面的常见布局有那几种,分别可以怎么实现?
3.学习js
这大概是开始劝退的一个阶段了,因为开始复杂起来了呀~~很多人都在这溜了
好吧,这个还是看你又没有编程基础,如果你学过Java这种东西,哪怕挂科了,只要脑子里有个概念,这里就比较好学
如果完全0基础,慢慢啃吧=0=,完全0基础还是看视频来的快
- 教程:w3cshcool的教程(适合有微弱编程基础的人,就是至少知道变量是啥,能看懂简单for循环的人)& 完全0基础的人,可以看视频了(我没看到啥合适的视频,慕课上的js入门视频可以看一看,主要还是按照下面的大纲来,和大纲无关的视频就可以跳过了)
- 推荐读物:高级程序设计(全部学完了回过头来再看吧)
- 只学这张思维导图提到的部分
- 带着这几个问题去学习
- js有哪些基本类型,每种基本类型是干啥的
- 对象是什么,函数是什么,数组是什么
- 数组,函数,对象的常用方法有哪些
- DOM是什么,我能用它做什么
- jquery是什么?
4.学习框架
如果你要学框架的话,咱就从vue开始吧,为什么用vue?中文社区完善呀
学习vue之前,你得了解下前端的一个大杀器:node.js
先安装好node.js然后搞懂这几个事情
- node和npm是什么,他们可以用来做什么
- npm init命令有什么作用
- node_modules和package.json有什么作用?
好了,开始学vue吧
- 教程:
- VUE教程
- 带着这几个问题去学习
- 使用vue-cli生成的项目,目录结构是怎么样的?其中的每个文件夹和每个文件的作用是什么?(vue-cli是有官方教程的,按照官方教程来生成项目!!!)
- 什么是双向绑定?
- mvvm框架是什么意思?
- 实现一个todolist,网上demo很多,找一个一步步来就好了,关键是要理解mvvm框架的意义,为什么要使用mvvm框架
- 解决了这些问题之后,你需要实战,可以到github上边找合适想的项目进行拆解
- 实战要点:
- 先看懂项目中vuex和vue-router的用法(第一步不是看懂项目,而是看vuex和vue-router怎么用)
- 自己新搭建一个项目,配置好vuex和vue-router到能使用的地步
- 看懂项目
- 自己实现,实现的时候就不要看源码了,想不明白的地方可以回来看
如果要做创意交互案例的话,可以多关注
如果要做游戏的话,可以关注
- https://www.pixijs.com/
- https://github.com/gamelab/kiwi.js
- https://github.com/photonstorm/phaser
- 白鹭
- layabox