前端大牛学习路径和资源集合,小白入门必看(超级长,建议收藏)

前端飘哥 2020-11-11 15:51:52
前端 学习 资源 路径 大牛


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

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

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

首先学习 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框架。

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

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

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

下面是学习路线和学习资源,有需要的请自取。

入门类

HTML 5 部分

CSS 3 部分

JQuery

Angular JS

React

Vue

Node JS

JS Template

移动端

移动端 API

综合 API

其他 API

服务器端

技能图谱

在线资源

在线书籍

推荐书目

开发工具

设计软件

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

编辑器

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

代码管理

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

测试工具

预览和调试必不可少,编写前端代码的大部分时间都是在编辑器和浏览器之间切来切去。
  • Chrome Dev Tools 谷歌浏览器开发工具,想要预览调试你的前端页面必须在这里啦

最后

说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。

我可以将最近整理的前端面试题免费分享出来,其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等,还在持续整理更新中,希望大家都能找到心仪的工作。

有需要的朋友点击这里免费领取题目+解析PDF。

篇幅有限,仅展示部分截图

篇幅有限,仅展示部分截图

篇幅有限,仅展示部分截图

点击这里免费领取题目+解析PDF。

版权声明
本文为[前端飘哥]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000037800498

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple