【转载】前端学习路径

2024-08-14 18:34:09 218人阅读

什么是前端工程师？

总而言之前端工程师就是运用HTML/CSS/JavaScript等Web技术，在工作中配合设计师实现用户界面，和后端工程师进行数据对接，完成Web应用开发的职位。

设计软件

前端工程师最首要的任务就是把设计师的设计图切好并翻译成代码，所以我们要学习一些设计软件的基础操作和切图方法。

编辑器

工欲善其事，必先利其器。可以用的编辑器和IDE有很多，在这里我只推荐最棒的两个。

代码管理

不光要学会写代码，也要学会管理你的代码。在工作中你可能会遇到需要自己部署代码的情况；不停地修改迭代重构，当然也需要你掌握版本控制软件。

测试工具

预览和调试必不可少，编写前端代码的大部分时间都是在编辑器和浏览器之间切来切去。

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