前端学习路径
什么是前端工程师?总而言之前端工程师就是运用HTML/CSS/JavaScript等Web技术,在工作中配合设计师实现用户界面,和后端工程师进行数据对接,完成Web应用开发的职位。开发工具
设计软件
前端工程师最首要的任务就是把设计师的设计图切好并翻译成代码,所以我们要学习一些设计软件的基础操作和切图方法。
[*]Photoshop 运用最广泛的设计软件,大部分人都在用它,很有必要学习一下
[*]前端工程师必备的PS技能——切图篇
[*]Sketch 轻量且功能强大,切图迅速高效,为UI设计而生的Mac App
[*]Sketch切图教程
编辑器
工欲善其事,必先利其器。可以用的编辑器和IDE有很多,在这里我只推荐最棒的两个。
[*]Sublime text 最性感的编辑器,搭配插件各种好用
[*]配置和使用方法
[*]Webstorm 功能强大,学生可以免费用的前端开发IDE
代码管理
不光要学会写代码,也要学会管理你的代码。在工作中你可能会遇到需要自己部署代码的情况;不停地修改迭代重构,当然也需要你掌握版本控制软件。
[*]Linux 你需要学会在命令行打开移动复制文件等最基本的操作
[*]Linux最常用的20条命令
[*]鸟哥的linux私房菜——基础篇
[*]Git 写代码一定会用到的版本控制软件,入门很快就能学会
[*]猴子都能懂的Git入门
测试工具
预览和调试必不可少,编写前端代码的大部分时间都是在编辑器和浏览器之间切来切去。
[*]Chrome Dev Tools 谷歌浏览器开发工具,想要预览调试你的前端页面必须在这里啦
基础知识
[*]HTML
[*]MDN的HTML入门
[*]HTML30分钟快速入门
[*]CSS
[*]MDN的CSS入门教程
[*]学习CSS布局
[*]JavaScript
[*]JavaScript菜鸟教程
[*]慕课网JavaScript入门篇
[*]Web
[*]当你在浏览器中输入google.com并按下回车后发生了什么
[*]互联网协议入门
中级知识
[*]HTML5
[*]MDN的HTML5入门教程
[*]网易云课堂HTML5入门
[*]CSS3
[*]CSS3菜鸟教程
[*]Gitbook的CSS3教程
[*]Style Guide
[*]腾讯alloteam前端代码规范
[*]百度ecomfe前端代码规范
[*]Google HTML/CSS Style Guide
[*]Google JavaScript Style Guide
[*]Responsive Design
[*]响应式设计指南
[*]自适应网页设计——阮一峰
[*]什么是响应式web设计?怎样进行?
[*]Web Animation
[*]CSS动画
[*]Canvas动画教程
[*]Learn to Create Animations in JavaScript
[*]Bootstrap
[*]Bootstrap菜鸟教程
[*]慕课网玩转Bootstrap
[*]jQuery
[*]jQuery菜鸟教程
[*]慕课网jQuery基础
[*]Ajax
[*]jQuery Ajax快速入门
[*]jQuery Ajax全解析
高级知识
[*]w3c标准
[*]Web Platform Docs
[*]ECMA6
[*]阮一峰ECMAScript6入门
[*]测试
[*]FEX前端自动化测试探索
[*]测试框架Mocha实例教程
[*]Karma和Jasmine自动化单元测试
[*]自动化构建
[*]流式自动化构建工具Gulp
[*]前端工程构建工具fis
[*]Web项目脚手架生成工具Yeoman
[*]用Yeoman和AngularJS做Web应用
[*]模块/包管理
[*]npm
[*]npm使用介绍
[*]快速搭建 Node.js 开发环境以及加速 npm
[*]Sea.js
[*]5分钟上手Sea.js
[*]RequireJS
[*]ES6模块
[*]预处理器
[*]Haml
[*]Tutorial
[*]HTML代码简写法:Emmet和Haml
[*]Sass
[*]Sass入门
[*]TypeScript
[*]TypeScript Handbook(中文版)
[*]框架
[*]React
[*]入门实例教程
[*]Vue
[*]vue.js教程
[*]Angular
服务器端
[*]Nodejs
[*]Node入门
[*]7天学会NodeJS
[*]MongoDB
[*]NodeJS与MongoDB交互
技能图谱
[*]StuQ技能图谱
[*]Frontend Knowledge Structure
在线资源
[*]大前端导航
[*]Frontend Stuff
[*]Frontend directory
[*]Frontend Interview Questions
在线教程
[*]菜鸟教程
[*]极客学院Wiki
[*]Mozilla开发者网络
[*]front-end-web-development on Treehouse
[*]Learn to Code Advanced HTML/CSS
在线书籍
[*]Front-end Developer HandBook
[*]Front-end Database
[*]Frontend Notebook
推荐书目
[*]基础
[*]深入浅出HTML与CSS、XHTML
[*]HTML & CSS设计与构建网站
[*]Pro Git中文版
[*]鸟哥的linux私房菜
[*]中级
[*]Head First HTML5 Programming
[*]JavaScript权威指南
[*]JavaScript语言精粹
[*]JavaScript & jQuery交互式Web前端开发
[*]深入浅出Ajax
[*]高级
[*]JavaScript高级程序设计
[*]HTML5高级程序设计
[*]CSS权威指南
[*]深入浅出Node.js
页:
[1]