编程知识 cdmana.com

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

GitHub There's a famous Roadmap:https://github.com/kamranahmedse/developer-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 :

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

MDN The official tutorial :https://developer.mozilla.org/zh-CN/

W3C Official documents :https://www.w3.org/

freecodecamp Learning Websites :https://www.freecodecamp.com/

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 ?
  • ASP.net: 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

JQuery

Angular JS

React

Vue

Node JS

JS Template

Mobile

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 .

Editor

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

Last

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]所创,转载请带上原文链接,感谢

Scroll to Top