Front end Daniel's learning path and resource collection, Xiaobai must see (super long, recommended Collection)

Front end floating brother 2020-11-11 15:51:52
end daniel learning path resource

GitHub There's a famous Roadmap:

Want to be a front-end bull , Follow this route to learn , Enough to help you grow fast .

Starting from a little white, the front end , Advanced to the front end , And then to grow into a technical bull .

First learn HTML、CSS and JavaScript Basic knowledge of . You can learn these basics on the following websites :


MDN The official tutorial :

W3C Official documents :

freecodecamp Learning Websites :

Then you need to learn some package management , Include npm,yarn wait .

Next learn CSS Preprocessing ,CSS The use of some of the frameworks , The most common is Bootstrap etc. . as well as CSS Architecture.

Here are some useful front-end libraries :

  • Sass: CSS An extension of , You can declare variables , Introduce modules , Nested attributes and so on .
  • Less: by CSS Add a declaration variable , Style module , Namespace , Inheritance, etc .
  • Stylus: Write CSS No more annoying brackets ~
  • Bootstrap: The most popular responsive front end framework in the world .
  • Foundation: There are many templates available , For websites 、 Mobile 、 Email provides a lot of easy to use modules and styles .
  • Semantic UI: A front-end framework that I like very much , The style is very nice , More importantly, just like its semantics UI The name is the same , Class naming is particularly friendly , Writing a web page is like talking to people .
  • uikit: beautiful 、 Customizable , Upcoming release uikit3 edition , If you are interested, you can try .

After that, learn how to use some building tools and other tools , And try to be clear about its principle . Including but not limited to the following tools :

  • Grunt: JavaScript Automation tools .
  • Gulp: Personal feeling is the best automated build tool .
  • webpack: Modular loading builds everything ,CSS/JS Even pictures can
  • npm: NPM Is good , Don't rely too much on your coat .
  • Bower: Front end framework package management tool , One click installation of various frameworks and libraries .

After that, select and learn the front-end framework , Including but not limited to the following framework :

  • Vue: Widely used front end framework , Study hard .
  • React: It's also a widely used front-end framework , It's better to combine this with Vue All study hard .
  • jQuery: Convenient and quick , Powerful and comprehensive , Travel at home is a must , almost JS substitute , You can't js, But no, No jQuery.
  • BackBoneJS: Model 、 View 、 aggregate 、 event , Make your front-end code more framed .
  • D3.js: Data visualization must be learned , Only the ones you can't think of , No, D3 It can't be drawn .
  • React:  Learn to React, Learn again React-native, You can incarnate from a front end Web app The engineer 、IOS/Andorid developer 、 Desktop Application Engineer ……
  • jQuery UI: A few lines of code can write an animated tape ajax Of Web application .
  • jQuery Mobile: Mobile end is dedicated to js Development framework , It's similar to the jacket above .
  • Underscore.js: Non intrusive framework , Many useful function methods are provided , make up jQuery Deficiency .
  • Moment.js: Native JS Displaying the output date and time is really painful ,Moment It solved everything for you ~
  • Lodash: Modular and efficient ,lodash and underscore Very similar .
  • Ruby on Rails: Ruby on Rails It's one for ruby Language writing Web Applied MVC frame ,github It's written in it !
  • AngularJS: Google Dominant Web Development framework , Data binding 、MVVM, Unfortunately, it was later more flexible React、Vue Wait for the frame to steal the limelight .
  • Ember.js: To develop a single page Web Applied JS front end MVC frame .
  • Express: Node.js Upper Web frame , Build a website or API Service only takes a second !
  • Meteor: JS Full end frame , Yes , You just need to learn JavaScript A language , You can do it Web Before and after the application 、 Database development .
  • Django: Python Of Web frame , Life is too short , Please use Python.
  • Flask: Python Of Web frame , It is said that as long as you learn flask You can find a good job at will ?
  • The old generation's favorite .
  • Laravel: The most elegant and sexy PHP Web frame , It's easy to use and can't be used any more , Elegant enough to be elegant , After all PHP It's the best language in the world .
  • Phalcon: use C Language Extended , It's said to be the fastest PHP frame .

Framework and knowledge learning , Learn how to test , It mainly includes this part :

After that, we have to learn PWA, This is the future trend :

Then learn more about it :

Here are the learning routes and learning resources , If you need it, please take it by yourself .

Entry class

HTML 5 part

CSS 3 part


Angular JS



Node JS

JS Template


Mobile API

comprehensive API

other API

Server side

Skill map

Online resources

Online books

Recommended bibliography

development tool

Design software

The most important task of front-end engineers is to cut the designer's design drawings and translate them into code , So we need to learn some basic operation of design software and cutting method .


A good workman does his work well , You must sharpen your tools first . You can use the editor and IDE There's a lot of , I only recommend the best two here .

Code management

It's not just about learning to write code , Learn to manage your code, too . At work, you may encounter situations where you need to deploy your own code ; Constantly modifying iterative refactoring , Of course, you need to master version control software .

Testing tools

Preview and debugging are essential , Most of the time you write front-end code is sliced between the editor and the browser .
  • Chrome Dev Tools  Google browser development tool , To preview and debug your front-end page, you must be here


A digression , I have been working in the first-line Internet enterprises for more than ten years , I have guided many of my peers . Help a lot of people to learn and grow .

I realize that there is a lot of experience and knowledge to share with you , We can also answer the question through our ability and experience in IT A lot of confusion in learning , So in the case of busy work or adhere to a variety of collation and sharing .

I can share the latest front-end interview questions for free , It includes HTML、CSS、JavaScript、 Server and network 、Vue、 Browsers and so on , It's still being updated , I hope you can find the job you want .

Friends in need Click here to get the title for free + analysis PDF.

 Limited space , Just show some screenshots

 Limited space , Just show some screenshots

 Limited space , Just show some screenshots

Click here to get the title for free + analysis PDF.

本文为[Front end floating brother]所创,转载请带上原文链接,感谢

  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