![745df534cedcd4388a9c6c42e50cf812.png](https://i-blog.csdnimg.cn/blog_migrate/3639a0ebb9be297b89911f5aaaa2a38a.jpeg)
前端相较于后端语言而言较为好学,学习成果易见,学起来也更能体会到成就感。
这里我整理了一下前端学习线路,希望对你有帮助。(文末有彩蛋哦~)
![226e9e21defa2b1a33d9d22b40b10000.png](https://i-blog.csdnimg.cn/blog_migrate/0438ed0ad650bda2fe562a44276e3a6b.jpeg)
1.HTML5+CSS3
![a95f45d4c5c499f8790cfe34c62e4a49.png](https://i-blog.csdnimg.cn/blog_migrate/59ef168f6dd19d513cb0c8e1d88a26df.jpeg)
PC端网站布局:
- 了解常用浏览器和浏览器内核;
- 了解语义化的概念;
- 掌握HTML5语法及使用技巧;
- 掌握HTML5常用标签。
- 掌握CSS语法及使用技巧;
- 掌握DIV+CSS布局方式;
- 掌握常见网页布局模式。
- 掌握Photoshop切图以及播件切图;
- 能够熟练使用开发人员工具进行页面调试
- 能够根据PSD文件独立完成静态页面的开发工作。
WebApp页面布局:
- 掌握HTML5新布局标签、多媒体标签;
- 掌握CSS32D.3D变换、动画效果;
- 能够使用CSS3新属性美化修饰网页;
- 了解移动端屏幕、移动端浏览器、操作系统的不同。
- 掌握常用移动端调试方法;
- 掌握常用移动端适配方法;
- 掌握CSS预处理器less的使用;
- 掌握常用移动端框架使用方法;
- 掌握常见移动端页面开发;
- 掌握响应式布局开发;
- 掌握Bootstrap开发响应式页面;
- 掌握适配不同终端的网页开发技术选型。
阶段学习成果检测,完成PC端商城页面布局,完成移动端页面布局
2.JS交互设计
![0744b70b9e99df7c6877abfa0edd87a3.png](https://i-blog.csdnimg.cn/blog_migrate/7b25f19bf54b7183831ee101e8d84954.jpeg)
JavaScript基础-进阶-高级:
- 能够掌握JavaScript基本语法;
- 掌握常见JavaScript算法;
- 掌握DOM的各种操作;
- 熟练使用面向对象思想进行DOM编程;
- 掌握JavaScript的高级语法;
- 掌握JavaScript常见兼容性方案。
- 独立完成视频网站的页面搭建(包括HTML结构、CSS样式、 JavaScript 特效);
- 掌握应对业务编程的能力;
- 掌握团队合作开发流程。
JQuery
- 熟练使用jQuery操作DOM ;
- 熟练使用和编写jQuery案例。
阶段学习成果检测,完成视频类目网站布局、交互、封装、性能优化等等
3.Node开发
![339ef5b4ca94a02fea771e247c295cc3.png](https://i-blog.csdnimg.cn/blog_migrate/11db0612524d0266a133c39d58abd314.jpeg)
ECMAScript6
- 了解ES6和JS的关系;
- 掌握ES6的基础用法和兼容性;
- 熟练掌握ES6的核心语法;
- 熟练使用ES6实现前端模块化开发。
WebPack模块打包器
- 熟练使用Webpack模块打包器;
- 熟练掌握前端自动化工具;
Node基础、Express框架、前端模块化、MongoDB
- 能够建立客户端服务器交互模型,
- 熟悉网络通信相关概念;
- 能够使用Nodejs进行Web服务端开发;
- 能够掌握JavaScript异步编程模型;
- 能够掌握JavaScript模块化编程方式;
- 能够使用Nodejs操作MongoDB数据库;
- 能够理解HTTP协议;
- 能够独立开发基于后台接口的动态网站、Ajax 数据交互的项目;
- 能够独立完成企业网站从前台到后台的基本开发工作。
阶段学习成果检测,完成即时聊天系统
4.前端框架
![cae8190415ac3b33701029f22e52d2b9.png](https://i-blog.csdnimg.cn/blog_migrate/f9f3709e51f0067f166bdd23927bbe69.jpeg)
数据可视化、Vue、React
- 能够掌握JavaScript基本语法;
- 掌握常见JavaScript算法;
- 掌握DOM的各种操作;
- 熟练使用面向对象思想进行DOM编程;
- 掌握JavaScript的高级语法;
- 掌握JavaScript常见兼容性方案。
Angular
- 掌握Angular常用的指令
- 掌握如何定义和使用模块与组件
- 掌握路由的配置
阶段学习成果检测,完成商城后台管理系统、电商网站注册登录、订单管理、条件筛选等等功能
5.小程序与APP开发
![63d758f916dedc474ca8569bc641832f.png](https://i-blog.csdnimg.cn/blog_migrate/9f356030774383e0c00beadee9ab7b52.jpeg)
微信小程序开发
- 能够掌握小程序的开发基础;
- 能够独立开发小程序项目;
- 能够掌握Canvas的使用;
- 能够掌握小程序的部署与发布;
- 能够掌握小程序开发框架mpwue的使用;
- 掌握第三方AI平台的使用。
微信小游戏开发
- 能够掌握小游戏开发基础;
- 能够独立开发小游戏项目;
- 能够掌握小游戏的部署与发布;
- 掌握第三方AI平台的使用。
React Native
- 能够独立使用React Native开发原生APP ;
阶段学习成果检测,完成微信小程序开发、微信小游戏开发、原生APP开发
6.就业准备
- 简历编辑
- 面试礼仪
- 面试常见题
- 面试演练等等
最后,前端是一个不断学习的过程,学到这里,并不是结束,而是在这个行业刚刚起步,想要学习更多的前端内容,需要在工作中不断学习、积累、成长。
俗话说,不会前端的后台不是好测试,编程的路上一路打怪升级无止境,学就完事了。
小伙伴们想要整理的资料、视频的快来领取吧~
资料领取表www.wenjuan.com![0a59fd34644f3e5c5c1fb98b1800d47b.png](https://i-blog.csdnimg.cn/blog_migrate/d52e2e8c65d50e188a5b1479d7d4bdf0.png)
欢迎喜欢web前端的小伙伴们加入我们~群里有不定期的免费直播课程,还有专业的老师为你在线答疑解惑~还在等什么呢,心动不如行动呀~~~点击加群
![c7ea483e8e9a602191ee73db9db0963e.png](https://i-blog.csdnimg.cn/blog_migrate/a6c967b6c7b69320347267a69063b6a9.png)