zhanghong 发表于 2017-2-23 09:36:58

前端学习路径

什么是前端工程师?
总而言之前端工程师就是运用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]
查看完整版本: 前端学习路径