预备阶段
如果你是完全零基础, 可以先进行预习视频的学习
本套预习视频专门针对小白录制, 可能是史上最通俗易懂的前端入门教程
B站视频地址: https://www.bilibili.com/video/BV17z4y1D7Yj?p=2https://www.bilibili.com/video/BV17z4y1D7Yj?p=2
接下来, 是完整系统的HTML+CSS的学习
- PC端页面制作与动画特效 学完第一阶段就可以配合UI设计师进行项目开发完成pc端网页的布局制作与样式设计实现。
- 移动端页面制作与响应式实现 这一阶段主要是移动端网页的布局制作与样式设计实现。可以适配各种手机尺寸，并能利用响应式惊醒移动端与PC端适配。
视频地址: https://www.bilibili.com/video/BV17z4y1D7Yj?p=60
然后是JavaScript与jQuery开发
- 这一阶段是重中之重，是往后学习所有前端知识的基础。 完成这个阶段学生， 可以掌握页面行为交互，实现网站中常见特效，如：轮播图、选项卡、拖拽。并能配合UI和后端进行项目开发；
视频地址： https://www.bilibili.com/video/BV17z4y1D7Yj?p=297
PC项目：纯原生前端技术打造仿小米电商网站
项目视频地址: https://www.bilibili.com/video/BV17z4y1D7Yj?p=498
Nodejs从入门到精通
学好了这个阶段的技术恭喜你就能进行前后端全栈式开发了，能独立完成一个中小型项目的前后台。
视频地址: https://www.bilibili.com/video/BV17z4y1D7Yj?p=518
NodeJS+Express+MongoDB实战项目
视频地址: https://www.bilibili.com/video/BV17z4y1D7Yj?p=553
H5高级框架技术开发
这一阶段是现在公司开发中常用的框架，这一阶段学完就可以利用框架开发项目，实现单页面应用开发。可以完成复杂的数据交互应用场景。具备独立开大项目的能力。
视频地址: https://www.bilibili.com/video/BV17z4y1D7Yj?p=604
Vue实战项目之喵喵电影
视频地址: https://www.bilibili.com/video/BV17z4y1D7Yj?p=724
国内Vue和React框架的使用比例都非常高, 虽然理论上只需要掌握一个, 但由于特性都是类似的, 建议两者都能掌握.
视频地址: https://www.bilibili.com/video/BV17z4y1D7Yj?p=770
React美食项目
视频地址: https://www.bilibili.com/video/BV17z4y1D7Yj?p=796
微信公众号开发
视频地址: https://www.bilibili.com/video/BV17z4y1D7Yj?p=833
微信小程序开发
视频地址: https://www.bilibili.com/video/BV17z4y1D7Yj?p=857
小程序全栈开发之喵喵交友
视频地址: https://www.bilibili.com/video/BV17z4y1D7Yj?p=901
混合开发技术uni-app
除了Fullter和ReactNative之外, 这可能是最好的混合开发方案了
视频地址: https://www.bilibili.com/video/BV17z4y1D7Yj?p=938
TypeScript入门教程
TypeScript是javascript类型的超集，它可以编译成纯javascript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。
视频地址: https://www.bilibili.com/video/BV1zJ411X7Jt?p=1
electron从入门到实战
视频地址: https://www.bilibili.com/video/BV1nE41117t3?p=1
文中所有视频的代码资料, 在这里领取:
链接: https://pan.baidu.com/s/1Y8MuA8u0Hx2nFTiaKLxUlQ 提取码: jxbh
上面链接失效，可以联系我微信:173126019
精简总结
- 零基础的朋友，nodejs和electron可以先不用学。先把html5->css3->javascript->vue.js先搞定。
- 多跟着视频实战，自己再想一些项目来做，从模仿开始。
引用资源：
https://zhuanlan.zhihu.com/p/139064270