【轉載】前端學習路徑

前端學習路徑

 

什麼是前端工程師？

總而言以前端工程師就是運用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