前端学习路径
程序员文章站
2022-04-03 09:09:39
...
什么是前端工程师?
总而言之前端工程师就是运用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模块
- npm
- 预处理器
- Haml
- Tutorial
- HTML代码简写法:Emmet和Haml
- Sass
- Sass入门
- TypeScript
- TypeScript Handbook(中文版)
- Haml
- 框架
- React
- 入门实例教程
- Vue
- vue.js教程
- Angular
- React
服务器端
- 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