【转载】前端学习路径

前者学习路径

 

哎呀是前者工程师?

一言以蔽之前端工程师就是以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

 

 转载自:http://www.cnblogs.com/wzhiq896/p/5904970.html

相关文章