前端相较于后端语言而言较为好学, 学习成果易见, 学起来也更能体会到成就感.
这里我整理了一下前端学习线路, 希望对你有帮助.
打开连尚头条, 看更多新鲜猛料
PC 端网站布局:
了解常用浏览器和浏览器内核;
了解语义化的概念;
掌握 HTML5 语法及使用技巧;
掌握 HTML5 常用标签.
掌握 CSS 语法及使用技巧;
掌握 DIV+CSS 布局方式;
掌握常见网页布局模式.
掌握 Photoshop 切图以及播件切图;
能够熟练使用开发人员工具进行页面调试
能够根据 PSD 文件独立完成静态页面的开发工作.
webApp 页面布局:
掌握 HTML5 新布局标签, 多媒体标签;
掌握 CSS32D.3D 变换, 动画效果;
能够使用 CSS3 新属性美化修饰网页;
了解移动端屏幕, 移动端浏览器, 操作系统的不同.
掌握常用移动端调试方法;
掌握常用移动端适配方法;
掌握 CSS 预处理器 Less 的使用;
掌握常用移动端框架使用方法;
掌握常见移动端页面开发;
掌握响应式布局开发;
掌握 Bootstrap 开发响应式页面;
掌握适配不同终端的网页开发技术选型.
阶段学习成果检测, 完成 PC 端商城页面布局, 完成移动端页面布局
2.JS 交互设计
JavaScript 基础 - 进阶 - 高级:
能够掌握 JavaScript 基本语法;
掌握常见 JavaScript 算法;
掌握 DOM 的各种操作;
熟练使用面向对象思想进行 DOM 编程;
掌握 JavaScript 的高级语法;
掌握 JavaScript 常见兼容性方案.
独立完成视频网站的页面搭建 (包括 HTML 结构, CSS 样式, JavaScript 特效);
掌握应对业务编程的能力;
掌握团队合作开发流程.
jQuery
熟练使用 jQuery 操作 DOM ;
熟练使用和编写 jQuery 案例.
阶段学习成果检测, 完成视频类目网站布局, 交互, 封装, 性能优化等等
3.Node 开发
ECMAScript6
了解 ES6 和 JS 的关系;
掌握 ES6 的基础用法和兼容性;
熟练掌握 ES6 的核心语法;
熟练使用 ES6 实现前端模块化开发.
WebPack 模块打包器
熟练使用 Webpack 模块打包器;
熟练掌握前端自动化工具;
Node 基础, Express 框架, 前端模块化, MongoDB
能够建立客户端服务器交互模型,
熟悉网络通信相关概念;
能够使用 Node.JS 进行 Web 服务端开发;
能够掌握 JavaScript 异步编程模型;
能够掌握 JavaScript 模块化编程方式;
能够使用 Node.JS 操作 MongoDB 数据库;
能够理解 HTTP 协议;
能够独立开发基于后台接口的动态网站, Ajax 数据交互的项目;
能够独立完成企业网站从前台到后台的基本开发工作.
阶段学习成果检测, 完成即时聊天系统
4. 前端框架
数据可视化, vue,React
能够掌握 JavaScript 基本语法;
掌握常见 JavaScript 算法;
掌握 DOM 的各种操作;
熟练使用面向对象思想进行 DOM 编程;
掌握 JavaScript 的高级语法;
掌握 JavaScript 常见兼容性方案.
Angular
掌握 Angular 常用的指令
掌握如何定义和使用模块与组件
掌握路由的配置
阶段学习成果检测, 完成商城后台管理系统, 电商网站注册登录, 订单管理, 条件筛选等等功能
5. 小程序与 App 开发
微信小程序开发
能够掌握小程序的开发基础;
能够独立开发小程序项目;
能够掌握 Canvas 的使用;
能够掌握小程序的部署与发布;
能够掌握小程序开发框架 mpwue 的使用;
掌握第三方 AI 平台的使用.
微信小游戏开发
能够掌握小游戏开发基础;
能够独立开发小游戏项目;
能够掌握小游戏的部署与发布;
掌握第三方 AI 平台的使用.
React Native
能够独立使用 React Native 开发原生 App ;
阶段学习成果检测, 完成微信小程序开发, 微信小游戏开发, 原生 App 开发
6. 就业准备
简历编辑
面试礼仪
面试常见题
面试演练等等
最后, 前端是一个不断学习的过程, 学到这里, 并不是结束, 而是在这个行业刚刚起步, 想要学习更多的前端内容, 需要在工作中不断学习, 积累, 成长.
俗话说, 不会前端的后台不是好测试, 编程的路上一路打怪升级无止境, 学就完事了.
如果对于学习编程有很多疑惑, 没有思路, 不知道如何有效率的学习, 可以添加我的前端交流学习群 939106847, 需要最新系统的学习教程也可以管我要. 做了很多年开发, 对于学习方式, 如何提高自己的技术有一定的经验, 术业有专攻, 多跟有经验的人交流学习, 对这个行业信息了解的多, 职业发展的空间就越大
来源: http://www.jianshu.com/p/753f8f2ae761