移动互联网的快速发展让web前端开发人员成为目前市场上紧俏、稀缺的人才。对于零基础想要学习web前端开发的人来说，应该从哪些方面入手呢?下面，千锋上海小编就给大家介绍一下。

　　对于零基础的人，学习web前端开发可以按照以下学习路线：

　　1、前端页面重构。主要内容为PC端网站布局、Photoshop 工具及切图、H5移动端网页布局、HTML5+CSS3新特性与交互。学习目标是完成PC端网站布局，可实现响应式布局，一套代码适配 PC 端、移动端、平板设备等。

　　2、前后端网页交互。主要内容为JavaScript 语法全面进阶、ES6 到 ES10 新语法实践、jQuery 应用及插件使用、设计模式及插件编写、封装 JS 工具库及Web APIS、AJAX+PHP+MySQL前后端交互、前端工程化与模块化应用以及PC 端全栈开发项目等。学习目标是可以掌握前端工程化工具，如 git、gulp、webpack 等，搭建项目及开发项目。

　　3、Node.js + 前端框架。主要内容为Node.js 全面进阶、Koa2+MongoDB搭建服务、Vue.js 框架、React.js 框架、小程序云开发与小程序框架、原生 APP与混合APP、数据可视化与桌面应用等。学习目标是掌握桌面应用及可视化大数据，实现复杂数据展示类项目，能够独立完成前后台相关功能，胜任HTML5全栈开发工程师职位。

　　学习web前端开发入门小项目：

　　1、Smartisan手机商城整站开发

　　Smartisan线上商城是一家移动互联网终端设备电商型项目，本项目涉及HTML5+CSS3实现高精度还原页面布局，Javascript + jQuery 实现页面逻辑交互、动效，Ajax、cookie数据交互技术实现前后端分离开发，Gulp + Git + Sass + Bower 前端工程化开发，PHP + MySQL + Apache服务端部署等知识点。

　　2、仿拉勾网M站

　　拉勾网是一家专为拥有3至10年工作经验的资深互联网从业者，提供工作机会的招聘网站。本项目涉及Gulp + Webpack + Git + Sass 实现前端工程化、自动化开发，移动M站布局技巧、屏幕适配与事件处理，Swiper、Better-Scroll等热门插件工具，Director.js + Handlebar.js 打造高体验RMVC架构的SPA单页应用，Canvas/Navigator等H5高级API应用等知识点。

　　3、拉勾网后台管理系统

　　拉勾网管理系统是为拉钩内部人员使用的职位信息等数据管理的的平台项目，项目涉及Node.js环境安装与NPM包管理的使用方式，Javascript在Node.js中的运行模式，Node.js常用模块实用技巧(http/url/querystring...)，Express框架 + AdminLTE框架开发CMS系统，搭配MongoDB实现数据的增删改查操作等知识点。

　　对于想要学习web前端开发的人来说，了解web前端学习路线和应用场景非常重要!