如何入门前端,成为一名前端工程师,前端大牛学习路径和资源集合

如何入门前端,成为一名前端工程师,前端大牛学习路径和资源集合_第1张图片

GitHub 上有一个很有名的 Roadmap:https://github.com/kamranahmedse/developer-roadmap

想成为一名前端大牛,按照这个路线学习,足以帮助你快速成长。

如何入门前端,成为一名前端工程师,前端大牛学习路径和资源集合_第2张图片

从一名小白开始入门前端,到前端进阶,再到成长为技术大牛。

首先学习 HTML、CSS 和 JavaScript 的基础知识。你可以在以下几个网站学习这些基础知识:

W3school:http://www.w3school.com.cn/

MDN 官方教程:https://developer.mozilla.org/zh-CN/

W3C 官方文档:https://www.w3.org/

freecodecamp 学习网站:https://www.freecodecamp.com/

 

之后你就需要学习一些包管理,包括 npm,yarn 等等。

接下来学习 CSS 预处理,CSS 的一些框架的使用,最常见的就是 Bootstrap 等。以及 CSS Architecture。

这里推荐一些好用的前端库:

  • Sass: CSS的扩展,可以声明变量,引入模块,嵌套属性等等。
  • Less: 为CSS添加声明变量,样式模块,命名空间,继承等特性。
  • Stylus: 写CSS再也不用写烦人的括号啦~
  • Bootstrap: 全世界最流行的响应式前端框架。
  • Foundation: 提供了很多模版,针对网站、移动端、邮件提供了很多好用的模块和样式。
  • Semantic UI: 个人非常喜欢的一个前端框架,样式非常好看,更重要的是就像它语义UI的名称一样,类命名特别友好,写网页就像和人说话一样。
  • uikit: 漂亮、可定制,即将发布uikit3版本,感兴趣可以试试看。

 

之后学习一些构建工具及其他工具的使用,并尽量明确其原理。包括但不限于以下工具:

  • Grunt: JavaScript自动化工具。
  • Gulp: 个人感觉是最好用的自动化构建工具。
  • webpack:模块化加载构建一切,CSS/JS连图片都可以
  • npm: NPM虽好,不要太依赖袄。
  • Bower: 前端框架包管理工具,各类框架和库一键安装。

 

之后进行前端框架的选择和学习,包括但不限于以下框架:

  • Vue:广泛使用的前端框架,认真学。
  • React:也是一个广泛使用的前端框架,最好把这个和 Vue 都认真学习好。
  • jQuery: 方便快捷,功能强大全面,居家旅行必备,近乎JS的替代品,你可以不会js,但是不能不会jQuery。
  • BackBoneJS: 模型、视图、集合、事件,让你的前端代码更有框架感。
  • D3.js: 数据可视化必学必会,只有你想不出来的,没有D3画不出来的。
  • React: 学会React,再学学React-native,你就能从一个前端化身Web app工程师、IOS/Andorid开发者、桌面应用工程师……
  • jQuery UI: 几行代码就能写一个带动画带ajax的Web应用。
  • jQuery Mobile: 移动端专用js开发框架,和上面的类似袄。
  • Underscore.js: 非入侵式框架,提供了众多有用的函数方法,弥补jQuery的不足。
  • Moment.js: 原生的JS显示输出日期时间真的很痛苦,Moment为你解决了一切啦~
  • Lodash: 模块化且高效,lodash和underscore很相似。
  • Ruby on Rails: Ruby on Rails 是一款用ruby语言编写Web应用的MVC框架,github就是用它写的!
  • AngularJS: Google主导的Web开发框架,数据绑定、MVVM,很可惜被后来更灵活的React、Vue等框架抢去了风头。
  • Ember.js: 用来开发单页Web应用的JS前端MVC框架。
  • Express: Node.js上的Web框架,搭建网站或API服务只要一秒钟!
  • Meteor: JS全端框架,是的,你只需要学习JavaScript一门语言,就可以完成Web应用前后端、数据库的开发。
  • Django: Python的Web框架,人生苦短,请用Python.
  • Flask: Python的Web框架,据说只要学好flask就能随意找到好工作?
  • ASP.net: 老一辈人的最爱。
  • Laravel: 最优雅性感的PHP Web框架,好用到不能再好用,优雅到不能再优雅,毕竟PHP是全世界最好的语言嘛。
  • Phalcon: 用C语言扩展的,据说是最快的PHP框架。

 

框架和知识学习好了,要学习如何进行测试,主要包括这部分内容:

如何入门前端,成为一名前端工程师,前端大牛学习路径和资源集合_第3张图片

之后要学习 PWA,这是以后的发展趋势:

如何入门前端,成为一名前端工程师,前端大牛学习路径和资源集合_第4张图片

之后学习一些更深入的内容:

如何入门前端,成为一名前端工程师,前端大牛学习路径和资源集合_第5张图片

当然,学习无止境,最重要的是持续学习,加油吧!

 

之前看到一篇内容讲:前端学习路径

很符合本回答图中所示的学习路径:大家可以看考着来学习,下面是学习路线和学习资源,有需要的请自取。

开发工具

设计软件

前端工程师最首要的任务就是把设计师的设计图切好并翻译成代码,所以我们要学习一些设计软件的基础操作和切图方法。
  • 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

你可能感兴趣的:(如何入门前端,成为一名前端工程师,前端大牛学习路径和资源集合)