GitHub上有一个很有名的Roadmap：https://github.com/kamranahmedse/developer-roadmapDuanDa牛，按照这条路线学习，足以帮助你快速成长。从入门到前端，再到前端高级，再成长为技术达人。从学习HTML、CSS和JavaScript的基础知识开始。您可以在以下网站学习这些基础知识：W3school：http://www.w3school.com.cn/MDN官方教程：https://developer.mozilla.org/zh-CN/W3C官方文档：https://www.w3.org/freecodecamp学习网站：https://www.freecodecamp.com/之后需要学习一些包管理，包括npm、yarn等。接下来学习CSS预处理，一些CSS框架的使用，最常见的有Bootstrap等。和CSS架构。这里推荐一些好用的前端库：Sass：CSS扩展，可以声明变量、导入模块、嵌套属性等。Less：为CSS添加声明变量、样式模块、命名空间、继承等特性。Stylus：写CSS不用写烦人的括号~Bootstrap：全球最流行的响应式前端框架。Foundation：提供了很多模板，为网站、移动端、邮件提供了很多有用的模块和样式。SemanticUI：个人非常喜欢的一个前端框架。样式非常漂亮。更重要的是，正如其SemanticUI的名称一样，类命名非常友好。编写网页就像与人交谈。uikit：美观可定制，uikit3版本即将发布，有兴趣的可以试试。然后学习一些构造工具和其他工具的使用，并尝试理清它们的原理。包括但不限于以下工具：Grunt：JavaScript自动化工具。Gulp：个人感觉是最好的自动化构建工具。webpack：模块化加载构建一切，CSS/JS甚至图像都可以使用npm：NPM虽然好，但不要太依赖它。Bower：前端框架包管理工具，一键安装各种框架和库。然后选择和学习前端框架，包括但不限于以下框架：Vue：应用广泛的前端框架，认真学习。React：也是一个被广泛使用的前端框架。最好认真学习这个和Vue。jQuery：方便快捷，功能强大全面，居家旅行必备，几乎是JS的替代品，你可以不知道js，但不能不知道jQuery。BackBoneJS：模型、视图、集合、事件，让你的前端代码更加框架化。D3.js：数据可视化一定要学掌握，只有你想不到，没有D3画不出来的。React：学习React，再学习React-native，你可以从前端化身成为Web应用工程师、IOS/Andorid开发者、桌面应用工程师……jQueryUI：几行代码就能写出一个web动画和ajax应用程序。jQueryMobile：一款专用于移动端的js开发框架，和上面的类似。Underscore.js：一个非侵入式的框架，提供了许多有用的功能和方法来弥补jQuery的不足。Moment.js：原生JS显示输出日期时间真蛋疼，Moment为你解决一切~Lodash：模块化高效，lodash和underscore很像。RubyonRails：RubyonRails是一个用ruby语言编写web应用的MVC框架，github就是用它写的！AngularJS：谷歌主导的Web开发框架，数据绑定，MVVM，不幸的是，被React、Vue等更灵活的框架抢走了风头。Ember.js：用于开发单页Web应用程序的JS前端MVC框架。Express:Node.js上的web框架，只需一秒钟即可构建网站或API服务！Meteor：JS全端框架，没错，你只需要将JavaScript作为一门语言来学习，就可以完成前后端Web应用和数据库的开发。Django：Python的web框架，人生苦短，请用Python。Flask：Python的web框架，据说只要学好flask，就能随心所欲找到好工作？ASP.net：旧的最爱。Laravel：最优雅、最性感的PHPWeb框架。它是如此易于使用和优雅，以至于它不能更优雅。毕竟，PHP是世界上最好的语言。Phalcon：C语言扩展，据说是最快的PHP框架。学习完框架和知识之后，我们要学习如何测试，主要包括这部分：后面会学习PWA，这是未来的发展趋势：后面会学习一些更深入的内容：下面是学习路线和学习资源，如有需要请自行领取。前端入门教程雪峰的Javascript教程前端工程师必备PS技能——切图结合个人经验总结前端入门方法看懂“外星人”HTML理解实录------《三王之道》深渊》HTML基础入门HTML基础提升CSS基础入门CSS盒模型CSS浮动CSS定位HTML5篇深入理解HTML5标签如何写出高效的HTMLHTMLmeta标签总结及属性用法介绍玩笑说HTML5写出高质量的HTML代码How解决上下img标签之间的差距五分钟学会Canvas基础知识（一）五分钟学会Canvas基础知识（二）模仿LED灯的滚动文字效果关于Canvas的小弟SVG基础教程HTML5动态效果制作方法编排Canvas效果实例详解前端Meta一些黑科技使用总结HTML5新特性CSS3部分CSS语法参考如何编写可维护的CSSCSS3动画手册腾讯css3动画制作工具知业csswidgetcollectioncss3jsmobilehodgepodgebouncejstouchlibraryanimate.cssendglobalCSSbrowserhacksCSS3otherpropertieselasticboxmodeldetailedCSS3animation2Ddeformation&3DdeformationmaskmaskJQueryYOUMIGHTNOTNEEDJQUERYjQueryAPI中文文档hemin在线版css88jqapicss88jquiapi学习jqueryjquery源码搜索Web前端资源汇总(jQuery,Js,css3等)AngularJSAngular.js一些学习资源angularjs中文社区Angularjs源码学习Angularjs源码学习angularjsbootstrap封装angularjs+nodejs卢大宝AngularjsAngularJS最佳实践Angular的一些扩展说明Angular数据绑定的原理Angular的一些扩展AngularUI组件Ember和AngularJS性能测试带你更接近AngularJS-基本功能介绍Angularjs开发指南Angularjs学习别用jQuery思维学AngularJSularjs英文资料angularbootstrapangularjqmobileangularui集成jQueryMobile+AngularJS经验谈jQuery背景，如何使用AngularJS编程思想AngularJS在线教程angular学习笔记Reactreact.js中文论坛react.js官网react.js官方文档react.jsmaterialUIreact。jsTouchstoneJSUIreact.jsamazeuiUIReact入门实例教程-阮一峰ReactNative中文版Webpack与React书籍-前端炖Webpack与React书籍-gitbookwebpackWebpack，101入门体验Webpack入门教程基于Webpack构建前端工程解决方案探索VueVue2.0VueVueRouterVuexVue-CliVue论坛Vue聊天室Vue入门指南Vue部分资源索引awesome-vuevue-syntax-highlightNodeJSNode.js包含教学或不包含一个nodejs博客【NodeJS学习笔记04】新闻发布系统过年7天，学习nodejsandbehappy7天学NodeJSNodejs学习笔记（二）-事件模块nodejs入门angularjsnodejs从零开始nodejs系列文章理解nodejsnodejs事件轮询节点入门nodejscmsNode入门入门，全面的NodeJS教程NodeJS代码调试和性能调优JSTemplatetemplate-chooserartTemplatetomdjsTaobaoTemplatejuicertemplateFxtplv1.0starry前端模板引擎laytplmozilla-nunjucksJuicerdustjsetpl移动端fastclickno-click-delay【敏捷开发】Android团队开发规范Android开发规范与应用ionic移动端API99移动端知识集移动端开发知识库移动前端一些陷阱和解决办法（外观）【原创】移动端web资源组织zepto1.0中文手册zepto1.0中文手册zepto1.1.2zepto中文评论jqmobilemanualshift手机浏览器开发合集移动开发大杂烩综合APIjavascripting各种流行库搜索runoob.com-包含各种API合集开源中国在线API文档合集devdocs(英文综合API网站)其他APIHTTPAPI设计指南javascript流行库总结验证apiunderscore中文手册下划线源码analysisunderscore源码分析-Aris朱德的博客underscrejsenapilodash-underscore替代ext4apiqwrap手动缓动函数svg中文参考svgmdn参考svg导出canvassvg导出pngai-to-svglocalStorage库服务器端NodejsNode入门7天学习NodeJSMongoDBNodeJS交互MongoDBSkillMapStuQ技能MapFrontend知识结构在线资源大前端导航前端资料前端目录前端面试题在线书籍前端开发手册前端数据库前端笔记本推荐参考书目HTML,CSS,XHTML&CSS设计建站ProGit中文鸟哥的Linux私房菜中级HeadFirstHTML5编程JavaScript权威指南JavaScript语言精髓JavaScript&jQueryInteractiveWeb前端开发深入Ajax高级JavaScript高级编程HTML5高级编程CSS权威指南深入Node.js开发工具设计软件前端工程师最佳首要任务是将设计师的设计进行裁剪并转化为代码，所以我们需要学习设计软件的一些基本操作和裁剪方法Photoshop是目前使用最广泛的设计软件，大多数人都在使用它，有必要学习一下前端工程师必备的PS技能——裁剪图片Sketch轻巧又实用功能强大，可以快速有效地切割。用于UI设计的MacAppSketch教程编辑器。可用的编辑器和IDE有很多，这里我只推荐最好的两个。Sublimetext是最性感的编辑器，拥有多种简单易用的配置和插件的使用方法。Webstorm是一个强大的前端开发IDE，学生可以免费使用。代码管理不仅仅是学习写代码，还包括管理你的代码。在工作中，你可能会遇到需要自己部署代码的情况；不断修改迭代重构，当然需要你掌握版本控制软件。Linux你需要学习命令行打开、移动、复制文件等最基本的操作。20个最常用的Linux命令。小鸟的linux私房菜-基础Git是一款你写代码肯定会用到的版本控制软件。可以快速上手猴子都能看懂的Git入门测试工具预览和调试是必不可少的。写前端代码的大部分时间都是在编辑器和浏览器之间切换。ChromeDevTools谷歌浏览器开发工具，如果你想预览和调试你的前端页面，你必须去这里。最后说一句题外话。曾在一线互联网公司工作十几年，指导过很多同行。帮助了很多人学习和成长。我意识到有很多经验和知识值得和大家分享，我们也可以通过我们的能力和经验来解答大家在IT学习中的很多困惑，所以在繁忙的工作状态下，我仍然坚持整理和分享各种东西。我可以免费分享最近的前端面试题，包括HTML、CSS、JavaScript、服务器和网络、Vue、浏览器等，我还在持续更新中。希望每个人都能找到自己想要的工作。有需要的朋友点此免费获取题目+解析PDF。点击此处免费获取标题+解析PDF。
