The most comprehensive resource tutorial on github - all knowledge systems involved in the front-end

Front-end is undoubtedly the hottest technology in 2016, bar none.

Various front-end mvc frameworks are emerging in endlessly. Angular js, vue, react, and the concept of front-end component development have been deeply rooted in the hearts of the people. Front-end salaries are already higher than mobile development.

As a personal webmaster, it is also necessary to learn front-end design. First, you can solve some small design problems by yourself, and at the same time, you can improve your own aesthetics and improve the UI design level of the website.

Essential basic skills

Front-end skills summary This project records in detail
all aspects of knowledge involved in front-end engineers. After you have basic skills, you can find the direction of learning and improve your skills and knowledge.

frontend-dev-bookmarks is a front-end development resource summarized by foreigners. The coverage is very broad. Including various knowledge points, tools, and techniques, it is very comprehensive.

The following are the basic skills that I personally feel should be mastered at the entry level:

HTML4, HTML5 syntax, tags, semantics
CSS2.1, CSS3 specification, combined with HTML to achieve various layouts and effects
The language core of javascript defined by Ecma-262, native client javascript, DOM operations, new features of HTML5
A mature client-side javascript library, jquery is recommended
A server-side language: If you have server-side development experience, you can use the language you already know. If you don’t have server-side development experience, you can choose Servlet if you are familiar with Java. If you are not familiar with it, you can choose PHP. It is enough to implement simple login and registration functions. Front-end development is supported, and you may need to continue learning in the future. The most basic requirement is to implement simple functional simulation,
HTTP

After mastering the above basic skills, you can quickly learn the technologies you need at work.

Basic development tools

Appropriate tools can effectively improve learning efficiency, focus on the knowledge itself, and quickly locate and

solve problems when problems arise. The following are the front-end development tools that I personally feel are necessary: ​​

• Text editor: Sublime Text is recommended, supports various plug-ins, themes, settings, and is easy to use
• Browser: Google Chrome is recommended, it updates quickly and provides very good support for various front-end standards
• Debugging tools: It is recommended to use the Chrome develop tools that come with Chrome. You can easily view the DOM structure and style, output debugging information through the console, debug javascript, view the network, etc.
• Auxiliary tools: PhotoShop to edit pictures, pick colors, measure sizes with Fireworks, compare sizes with AlloyDesigner, and the Chrome develop tools mentioned above,
• FQ Tools: lantern, Gecko Walk

Learning methods and learning objectives

Method:

Read repeatedly during the entry stage
1. Chinese version of classic books, implement every example in the book and view the effect in the browser
After you have a certain foundation, you can search for various tutorials and demos online to learn about the actual usage of various functions and how to implement common functions
Read HTML, CSS, Javascript standards to comprehensively improve knowledge points
Read the blogs and articles of front-end experts to improve your understanding of knowledge
Make good use of search engines

Goal:

Memorize the important concepts in the previous knowledge points and gain your own understanding based on your learning experience
Be familiar with the implementation methods of common functions, such as common CSS layout, Tab control, etc.

The road to entry

The following are good books and materials for the introductory stage

1. HTML first read Chapters 1-9 of "HTML & CSS: Design and Build Websites", then Chapters 1-4 of "HTML5: The Missing Manual".
2. CSS: First read "CSS: The Missing Manual", then "CSS Definitive Guide"
3. For javascript, read "Javascript Advanced Programming" first, then "Javascript Definitive Guide"
4. HTTPSee the Definitive Guide to HTTP
5. There are many places where HTML, CSS, and JavaScript need to be combined with each other during the entire learning process. This is also the case in actual work. A simple functional module requires the combination of the three to be implemented.
6. Hands-on is an important part of learning. Books focus on explaining knowledge points, and examples may not be sufficient. Therefore, you need to use search engines to find some simple tutorials and follow the tutorials to implement functions. Here are some better tutorial URLs
   • You can search for front-end campus recruitment written test interview questions from major companies as practice questions or front-end interview questions summarized by others, as well as interview questions summarized by individuals (with reference answers)
   • http://code.tutsplus.com has various tutorials
   • MDN also has many tutorials, and more importantly, it has detailed documentation. When you need to find a certain function, search on Google: xxx site: https://developer.mozilla.org
   • http://www.html5rocks.com/zh/ also has many high-quality tutorials
   • http://www.sitepoint.com/
   • http://alistapart.com/
7. Native javascript is a skill that needs to be mastered. On the basis of mastering native javascript, it is recommended to be proficient in jQuery, which is very useful in actual work. Books in this area include "Learning jQuery" or go to the jQuery official website
8. Create an https://github.com/ account to save various codes and projects that you usually study.
9. After you have a certain foundation, you can set up a personal blog to record the problems and solutions encountered during the learning process, which is convenient for yourself to check and also provides help to others. You can also go to http://www.cnblogs.com/ or http://www.csdn.net/ to register an account, which is convenient and practical
10. If you frequently use Google to search for English information, you should often find high-quality answers from http://stackoverflow.com/. If you have questions, you can directly search here. If you have the energy, registering an account to answer questions for others can also greatly improve your personal life. ability.
11. After familiarizing yourself with classic books, you can open the link to the previous essential basic skills section. Read the corresponding standards carefully and fully master the knowledge

Continue to improve

After having the previous foundation, the front-end is basically getting started. At this time, everyone may have some learning direction in mind, if not.
You can refer to the two projects mentioned in the previous essential skills section and choose some from them for development and learning. Here are some nice aspects:

• Grunt: Front-end automation tool to improve work efficiency
• less css: Excellent CSS preprocessor
• bootstrap: Excellent CSS framework, very good for teams without designers, perfect when combined with less
• requirejs: AMD standard module loader, an essential tool for the front-end modularization trend
• Node.js: JavaScript can also be used as backend, taking the status of front-end engineers to a higher level
• AngularJS: A good tool for Single Page Application
• Mobile web development: With the popularity of smartphones, mobile traffic is gradually catching up with PC traffic
• Javascript memory management: long-term operation of SPA requires attention to memory leaks
• High Performance JavaScript(Build Faster Web Application Interfaces)
• Best Practices for Speeding Up Your Web Site: Important Skills

Some personal experiences

LingyuCoder’s learning experience

The masters above have pretty much summarized it, so I’ll just make some nonsense here

####Tools

• Chrome dev tools: A powerful tool for front-end development and debugging, focusing on several functions:
  • console(nonsense)
  • elements: Element style adjustment, very commonly used
  • sources: Add breakpoints to the code, single-step debugging, and view objects in memory during single-step debugging.
    • watch expression: View the value in the current memory through expression
    • call stack: View the call stack, turn on async, and you can see the asynchronous call stack (this is very useful, especially when debugging ajax)
    • scope variables: variables on the scope chain, very useful
  • Network: Capture packets to view each request, very important, necessary for front-end and back-end joint debugging
  • timeline: Analyze rendering, js execution and other stages, a powerful tool for performance optimization
  • emulation: Simulate mobile environment, essential for mobile page development
  • Some plugins:
    • liveload: automatically refresh after modifying the page, no need to press F5
    • dimensions: a powerful tool for measuring directly on the page
    • livestyle: The CSS style will take effect automatically after modification, no need to refresh, and the modified elements can also be synchronized to the code
    • image tool: measure, pick color
    • UC QR code: essential for debugging and scanning on mobile terminal
    • pagespeed, YSlow: page performance analysis and optimization plugin
    • Mark Feixiang: Excellent online markdown editor, quickly write weekly reports and take notes
• sublime text2: Convenient coding, many plug-ins, fast speed and good performance
  • emmet: Essential to improve html encoding speed
  • sublimelinter + lint and hint in various languages: code error correction
  • Some snippets: automatic completion to improve development efficiency
• Intellij IDEA and WebStorm: Integrated development environment, integrating various functions, development is more convenient than sublime, but it will cost more performance
• Mark Men: A powerful tool for measuring, color picking, and marking, the first software to open after getting the visual draft
• GFW Fucker: I use Hongxing. If possible, buy a virtual server to use as a ladder
• iHosts: Very excellent hosts management software, easy to modify hosts, essential for development and debugging
• Charles: The best packet capture and analysis tool on the Mac platform
• Rythem: The proxy packet capture software produced by AlloyTeam is very lightweight, easy to install, and easy to use for mobile terminal (real machine) development and debugging
• Wunderlist: A very good Todo List, it is very convenient to manage when there are many tasks and needs

####SKILLS
In fact, there are many front-end skills besides JavaScript (including NodeJS), HTML, and CSS. In fact, the front-end skill tree is very large. Here I can only list some of the ones I have seen during development
#####Language basics
JavaScript:

• Scope chain, closure, runtime context, this
• Prototype chain, inheritance
• NodeJS basics and common APIs

CSS:

• Selector
• Browser compatibility and common hacks
• CSS layout methods and principles (box model, BFC, IFC, etc.)
• CSS 3, such as animation, gradient, etc.

HTML:

• Semantic tags

#####Advanced
JavaScript:

• Asynchronous control (Promise, ES6 generator, Async)
• Modular development method (AMD, CMD, KMD, etc.)
• Some related knowledge of JavaScript interpreter
  • Asynchronous IO implementation
  • Garbage collection
  • Event Queue
• Commonly used frameworks and their principles
  • jQuery: A framework based on selectors, but I personally think it cannot be called a framework, but should be considered a tool library, because it does not have a module loading mechanism, and the source code is very suitable for reading and studying
  • AngularJS/Avalon and other MVVM frameworks: focus on understanding the concept of the MVVM pattern itself and the implementation of two-way binding, and how to decouple it
  • underscore: Excellent tool library, easy to understand the implementation of commonly used tool code snippets
  • polymer/React: Component development, facing the future, understanding the principles of component development

CSS and HTML: Mainly the features of CSS3 and HTML5, as well as the browser processing process and drawing principles

• DOM tree, CSSOM tree, rendering tree construction process and page rendering process
• Blocking caused when parsing HTML, CSS, and JavaScript
• HTML5 related
  • SVG and vector graphics principles
  • Canvas development and animation principles (frame animation)
  • Video and Audio
• flex box layout method
• Usage of icon fonts

Commonly used NodeJs packages:

• koa
• express
• underscore
• async
• gulp
• grunt
• connect
• request

Some ideas:

• Responsive Web
• Elegant degradation, progressive enhancement
• dont make me think

• Web page usability, accessibility, and meaning
• SEO search engine optimization, understand the principles of search engines
• Benefits and problems of SPA

Performance optimization:

• Reduce the number of requests (sprite, combo)
• Make good use of cache (application cache, http cache, CDN, localstorage, sessionstorage, memo mode)
• Reduce selector consumption (right to left), reduce DOM operations (separation of DOM and JavaScript interpreter)
• CSS reflow and redraw

#####project

• Version management: Git is the first choice. If you have used Git, you will never want to use SVN again.
  • Git: a mechanism for local version management
  • SVN: Remote center version management mechanism
• Automated construction: mainly preprocessing of less, templates, coffee, etc., as well as code compression and merging
  • Gulp: built based on flows, fast and good module quality
  • Grunt: Independent task construction, slow speed, painful configuration, high flexibility
• Preprocessing and template engine
  • less: simple syntax, but limited functionality
  • jade, ejs, velocity and other template engines, each has its own strengths
  • coffee: The favorite of Python engineers, I have never used it
• Environment construction: Mainly mapping the online code to the local and starting a demo server locally. As for mocking the simulated data, everyone has different opinions.
  • Local proxy: ihosts
• Automated testing: When the business is relatively stable, automated testing can be used to reduce testing incidents. However, when the demand is high, the cost of maintaining test cases will be high, and automated testing may have the opposite effect.
  • jasmine
  • mocha
• Ecosystem
  • npm
  • bower
  • spm
• Build a blog of your own
  • git pages
  • hexo
  • jekyll

#####FUTURE

• Web Components: a future-oriented component development approach
  • HTML Template
  • Shadow DOM
  • Custom Elements
  • HTML Import
• Mobile terminal Native development: This is also something you need to understand. In the future, front-end engineers will often deal with webview, and they must also understand native development

#####Others
There are some things that cannot be solved by typing in the code. I felt a lot when I participated in the internship. These are what I encountered and where I felt that I did not do well

• Thinking about business: Personally, I am very lacking in this aspect, so I put it at the top and think more about business before typing code
• Communication and communication skills: This is very important. The front-end needs to deal with the project manager, product, interaction, and backend at the same time. Poor communication will lead to a lot of wasted effort and delay the project
• Knowledge management, time management: The balance between input and output, output is the best input. How to share well, participate in the community, communicate well, and keep records
• Desire for new technologies and the courage to try

####Getting started
You can get started by reading books, but many things in books are outdated. While reading books, you should also continue to pay attention to new developments in technology. Here are a few books that I think are good:

• "Advanced JavaScript Programming": It can be used as an introductory book, but it is also an advanced book. You can quickly absorb the basics and come back to read it again when you improve
• "The Definitive Guide to JavaScript": Not suitable for getting started, but necessary. If you don’t understand something, just check it out, it’s very helpful
• "Writing Maintainable JavaScript" and:
• "Node.js Development Guide": A good introductory book to Nodejs
• "In-depth explanation of Node.js": Nodejs advanced book, a must-have
• "JavaScript Asynchronous Programming": Understand the concept of JS asynchronous programming
• "JavaScript Pattern" and "JavaScript Design Pattern": JavaScript code patterns and design patterns, changing development thinking to JavaScript, very good book
• "JavaScript Framework Design": While using the wheel, you should know how the wheel turns. The explanation is very detailed. It explains the implementation of each part of the framework from the source code level. By reading it with an existing framework, you can learn a lot

• "Dont make me think": The concept of web design and understanding user behavior, very good
• "CSS Zen Garden": an enduring work that also conveys the concepts of web design and issues that need attention in design
• "High-Performance JavaScript" and "High-Performance HTML5": Books that emphasize performance, which are not just about performance optimization, but also a lot of principle-level things worth learning
• "HTML5 Canvas Core Technology": A book I am reading is very helpful for the use of canvas, the implementation of animation, and the development of animation framework
• "HTTP Authoritative Guide": Essential knowledge related to the HTTP protocol, which is often involved in front-end development and debugging
• "Responsive Web Design": The technology itself is not difficult, what is important is the design concept of responsive web pages and the mobile-first idea
• "The Essence of JavaScript Language": An experienced book. It is also a good book to popularize JavaScript development thinking. It is very suitable for getting started

####Some good websites

• github: Nothing much to say, read more other people’s source codes, upload more of your own source codes, and learn from the experts from all over the world
• codepen: A must-choose place to experience the beauty of the front-end, there are many cool effects and excellent plug-ins
• echojs: A website to quickly learn about new js information
• stackoverflow and segmentfault: basically all kinds of questions can be answered on them
• google web fundamentals: Every article is suitable for careful reading
• static files: open CDN, easy to use
• iconfont: Alibaba’s vector icon library, very good, supports CDN and supports projects
• html5 rocks: A good website, you can find articles on many new browser features and cutting-edge technologies
• css tricks: How to make full use of CSS and learn about the new features of CSS, here we can satisfy you
• JavaScript Secret Garden A must-read for beginners of JavaScript, very good
• w3cplus: A front-end learning website, the quality of the articles in it is quite good
• node school: a good node learning website
• learn git branch: A git learning website with great interaction
• Front-end Stew: A community for sharing front-end articles, with many excellent articles
• Regular Expressions: An introductory tutorial on regular expressions, well worth watching
• Ruan Yifeng’s blog and Zhang Xinxu’s blog: shortcuts to quickly understand certain knowledge, but if you need to dig deeper, you need other resources
• Blogs from various experts: There are too many, so I won’t post them. Zhihu has a complete list
• Official websites with various regulations, don’t know how to read the regulations

####Process
I used to do Java SSH, and became a front-end developer halfway through, so my skills were relatively weak and I encountered more problems. Basically, you can get started by reading books and tutorials on W3C School, as well as some front-end blogs, such as Uncle Tom's blog. In the past, I only used jQuery and didn’t study much in native js. Later, I gradually read a lot of animal books, such as the essence of language by experienced people. I learned a lot of language-level knowledge from these books. But this is obviously not enough, so I often go to the community to see what everyone is talking about, and then check out the relevant information. If I am interested, I will look for more information or write a demo. This is the main way to learn CSS. Later, I began to pay more attention to the blogs of various experts and some relatively in-depth books, as well as some new knowledge and frameworks, and continued to practice submitting codes to github, which also taught me a lot of knowledge. During the internship process, I personally participated in actual project development and learned many concepts and thinking that I could not learn in school, which was also of great help. No more talking, I’m going to move bricks and ask for offers...

MrRaindrop’s learning experience

In response to the invitation of Qiu God, I would like to share my front-end learning experience. I will not summarize the front-end knowledge system architecture here. The summary of the masters is already quite in place. I will contribute a few links that I think are useful for everyone to study and study. Okay, then I will mainly share the problems I encountered during the front-end learning process and the lessons learned. If it can help FE beginners who want to get started (I will assume that this is the audience type of this article), let them It would be best to take fewer detours and know the direction of your next step every step you take. For the summary and sharing of the masters, please see FE-learning organized by Qiu God.

Let me start by saying that everyone can have their own way of learning the front-end thing. This article is for reference only. It is a bit messy, so you can just read it.

Origin

I stumbled into the front-end by accident. I had always been in the direction of making games. I had built game websites, played with game engines, such as unity and unreal, commercial engines, and tinkered with several game prototypes. However, As soon as I entered the laboratory as a researcher, I was directly assigned by my tutor to write js. The tutor gave me half a month to write a data display page based on Baidu Map API. Although this time was quite generous, I had not done much before. I have written js, but I don’t know how to use the map api, so I read the "Javascript Authoritative Guide" (Rhinoceros Book) while referring to the "code" left by predecessors in the laboratory, and finally wrote out all the functions. That page is considered my introduction to js, ​​and it is also the beginning of my front-end learning route.

Thinking about it now, although I was assigned to do front-end, I still have to rely on interest to continue doing it and do it well. Of course, front-end is an interesting technical field, and the community is very "busy" every day.

Project, next project

I personally think that in the initial stage of front-end learning, you can completely break away from books and be project-driven. Although I personally started reading from the Rhinoceros book, if you don’t have enough time, or you find reading large books boring, don’t be like me. Of course, if you decide to read a book, it is best to follow all the examples in the book. I had never come into contact with js before going to graduate school. In April, before school started, my tutor directly told me about the Baidu Map API project, and then came various ERP and map data display. Although it was different in different ways, it was not the same. , but it’s basically all front-end work. I’ve also done SSH and android development. Can you believe that I’m the only one writing the front-end in the entire laboratory? The back-end in the era of rich client SPA is a restful interface, and the amount of code is basically in the front-end. How can I write it so well... During this period, I followed the mentor to experience entrepreneurship, and I worked on it from 7 o'clock to 10 p.m. every day. point, it can be regarded as going through a period of rapid growth.

To master a technology, first master its general framework, think of an achievable idea, make a demo that can run, and then improve its details. When the demo is completed, you will have a perceptual understanding of the technology. If you read books again, you will gain much more. I started writing from native js to jquery, then to extjs, then to angularjs. From the instructor's designated technology to my own technology selection, I practiced one project after another, just like fighting monsters and upgrading. Of course, if you don’t have a project, it’s fun and fulfilling to create your own project and realize your own ideas.

Collecting addiction and knowledge management

Front-end learning has a characteristic. Many things are fragmented and scattered, and you need to organize, summarize and summarize them yourself. Following many great masters on Weibo and Zhihu is not just for listening to gossip. Sometimes the words of the great masters leave endless aftertaste. It is very likely that a word mentioned inadvertently will become your next learning goals. Collect this information, make good use of Google, ask questions, and think. Just like the collection elements in the game, front-end learning is also a "game" full of collection elements, but you need a knowledge management tool to act as an inventory and warehouse. All the big guys I know use knowledge management tools. Heavy user. I used oneNote before, but it was not bound to cloud storage at that time. Now I basically use evernote, and I have accumulated more than 1,200 notes. I have always planned to use delicious for bookmarks because it is managed based on tags, but it has never been used. Of course, the focus is not on these tools, but tools that are handy can improve your learning efficiency. The most important thing is of course to maintain a strong desire to learn at all times. Your goal is to understand everything about the front end (of course, not everything must be mastered, because after all, your energy is limited, and realistically speaking, this is unlikely). Follow God

This doesn’t seem to be very controllable... I won’t say much about this with the boss, it depends on luck to a certain extent. But having said that, it is king to communicate more with the experts around you. This expert does not have to be very high, but he must be passionate about technology. When I was in the first year of graduate school, I was very enthusiastic. I entered the laboratory door at 7 o'clock every day, and then I found that there was a guy who arrived earlier than me. Later I found out that this guy left in the morning and came back in the afternoon, and the instructor was used to it. It turned out that this guy stayed up all night writing code, and then went back to sleep in the morning. Later, I often discussed issues with this god, and every time I felt that my experience points were rising slowly. Then there is another god in the laboratory, who was described by the all-night god in front of him as "only a distant second, always chasing, never catching up." The characteristics of the two gods are that they know a little bit about everything, so they can discuss everything with you. Come on, I made a reading plan for a while, from c/c++ to vc/mfc to unix network programming. In the end, I saw java core technology and the C# programming guide on MSDN, and I could talk to the gods. High.

In short, these two gods pulled me into a pit, or jumped from one pit to another. Although neither of the two gods are engaged in front-end, there are always similarities between the technologies.

Reading

Read, read more, read good books. I saw a formula in Liu Weipeng's blog,

Your first month's salary is equal to the sum of the prices of the technical books you have bought (read) before

(the technical books mentioned here refer to those classic and recognized good books). It seems meaningless to discuss the correctness of this formula, but its rationality is beyond doubt, that is, read more classic technical books. The most extreme example, Xu You from Google said in my university that he swept the entire TP312 bookshelf in the library... For front-end classic books, there is a list of front-end books I collected (if there are any missing front-end classics, that's fine) Books, please leave a message and let me know). If possible, you can try to read these books. I am also looking for full time to finish them. As mentioned before, front-end knowledge points are loose, collecting scattered knowledge points, learning quickly from blogs, etc. These are only one aspect of front-end learning. If you want to deeply understand a knowledge system, understand its ins and outs, and establish a systematic understanding of it , reading classic books is still essential.

I finished reading the Rhinoceros book from the beginning, and then went on to read some other classic technical books that had little to do with the front-end. Later, through laboratory projects and some small projects I did, I gradually became more familiar with the front-end field. I read "Javascript Patterns", "Javascript Design Patterns", and "Writing Maintainable Javascript". Later I learned about node and started to use it to make some gadgets. I also read "NodeJS up and run" and "Mongodb Authoritative Guide". ", but I feel that the former is a bit of a trap. At that time, Pu Ling's book "In-depth and simple explanations" had not yet been released. After it came out, I went to the library to borrow it and read it. After reading it, I felt that it was pretty good, but I felt that I had read too little, and I still need to continue. Brush (refer to book list above).

Positioning of the front end

The positioning of the front-end is related to what kind of knowledge and skills you need to absorb, and determines what you need to be particularly sensitive to in the technical world. If you think that the front-end only stops at cutting pages and realizing interaction and visual requirements, then your understanding of the front-end is still in its infancy. During the final interview with Alibaba, I asked the examiner this question: Front-end technology is changing with each passing day, the scope is getting wider and wider, and the standards are becoming richer and richer. It seems that any tentacle can reach far. How to give the front end a suitable position? The examiner analyzed it for me for a long time, and then summed it up in one sentence: it is the connector between users and the website, the creator of user experience (that’s not the original word, but that’s the general meaning). In other words, the ultimate goal of the front-end is actually to create user experience, improve user experience, centered on user experience. Whether you start from interaction design, performance optimization, or improving workflow to improve workflow efficiency, in the end it is all about creating and improving user experience, and it must ultimately be reflected in user experience. I think this summary is very reasonable (of course the term "user experience" is too broad, and it is not just the category of front-end engineers. For example, when developing the backend, optimizing a data processing process improves the overall performance, which is also good for users. an improvement in experience).

Nowadays, front-end engineers will inevitably come into contact with many more in-depth issues than cutting pages, implementing visual requirements, implementing interactions, etc. at a certain stage, such as front-end automation, image programming, performance optimization, etc., and pushing it a little further back is PHP /JSP/ASP/nodeJs. In the past, back-end templates generally belonged to the back-end category. Now with the evolution of front-end architecture, you may be asked to write back-end template code, which requires the use of back-end languages ​​(PHP/Java/C#, etc.) ), this is the so-called big front-end (however, this is not inconsistent with the positioning of the front-end. The big front-end still deals with the parts that come into contact with users, and still optimizes the user experience). Perhaps the most common or talked about one is node. In fact, any of these technologies can be selected. It is said that among the three BAT companies, Baidu uses PHP more and Alibaba uses node more.

Uncle Yu mentioned in his blog that the so-called full-end is horizontal and the full-stack is vertical. Full-end That is to say, all terminals are front-ends, because they are all related to user experience and are in direct contact with users. Adapting to multi-terminal development requires you to expand your knowledge of android development and ios development on the basis of web front-end. Fortunately, due to the popularity of hybrid development methods, the skills for using native language development will not be so in-depth. .

Full stack can be said to be the most suitable development type for start-up companies. Broadly speaking, it is considered to be from front-end to back-end, from development to operation and maintenance. I won’t talk about this kind of thing. Most people probably won’t want to go there. If you want to develop in this direction and want to become a full-stack dev in this sense, you may not need to read my article; and full-stack in a narrow sense specifically refers to using js language to write from the front-end to building on nodeJs. Backend, front-end and back-end have unified language, unified programming model, and even share the same set of code. To learn more about full-stack development, you can read Yu Bo’s article about full-stack engineers.

The above is my superficial understanding of the front-end and the derived technical routes. It is quite important to learn a field and grasp its overall direction and trend. In addition, if you want to have an overall understanding of the front-end learning direction and career growth path, it is recommended to read this front-end development talk summarized by Ba Chi.

Finally

Contribute several links that are helpful for front-end learning and interviews:

• Front-end-Developer-Interview-Questions Collection
• Front-end skills summary (JacksonTian)
• Another front-end skills summary picture
• Things about the front end (book list)

Suggestions from yiyizym on byr forum

Compared with grunt, learning gulp will be easier

If you want to make a SPA, we recommend backbone.js and backbone.marionette.js

FQ Don’t bother, just spend ten yuan to buy a month’s worth of red apricots.

It’s no problem to learn these things after laying a solid foundation.

html There’s nothing much to say, just learn html5 when you have time.

Css Try to read the documentation as much as possible, because many Chinese materials have different opinions. Reading too much will make you confused.

There is a website where you can check the support status of html/css tags and attributes in various browsers. It is very useful.

javascript Just look at JavaScript Advanced Programming. But after reading such a thick book, you will forget it. Here is a good article to explain the core concepts of JavaScript: object/prototype chain/constructor/execution context/scope chain/closure/this.

If you have time, you can take a look at ecmascript 6, which is scheduled to be released in June next year. Ruan Yifeng's website has introductory information.

jquery has many APIs, which can be easily found on this website. Have time to figure out the usage of jquery deferred.

Install more plug-ins for sublimetext, such as checking code errors, creating new directory files, and organizing code.

Comprehensive category

Comprehensive category	Address
Front-end knowledge system	http://www.cnblogs.com/sb19871023/p/3894452.html
Front-end knowledge structure	https://github.com/JacksonTian/fks
Overview of Web front-end development department	https://github.com/unruledboy/WebFrontEndStack
Overview of Web Front-End Development Department-Chinese Version	http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html
Web Front-end Stack v2.2	Web Front-end Stack v2.2
Free programming Chinese book index	https://github.com/justjavac/free-programming-books-zh_CN
Front-end books	https://github.com/dypsilon/frontend-dev-bookmarks
Comprehensive collection of front-end free books	https://github.com/vhf/free-programming-books
Front-end knowledge system	http://www.cnblogs.com/sb19871023/p/3894452.html
Free programming Chinese book index	https://github.com/justjavac/free-programming-books-zh_CN
Intelligent Society - Proficient in JavaScript development	http://study.163.com/course/introduction/224014.htm
Reintroducing JavaScript (JS Tutorial)	https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript
MIT Open Course: Introduction to Computer Science and Programming	http://v.163.com/special/opencourse/bianchengdaolun.html
The most complete collection of this trap in JavaScript - one of the best	http://segmentfault.com/a/1190000002640298
JS Functional Programming Guide	https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html
JavaScript Promise Mini Book (Chinese version)	http://liubin.github.io/promises-book
Tencent Mobile Web Front-End Knowledge Base	https://github.com/AlloyTeam/Mars
Front-End-Develop-Guide Front-End Development Guide	https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide
Front-end development notebook	https://li-xinyang.gitbooks.io/frontend-notebook/content
Big front-end toolset - Nie Weidong	https://github.com/nieweidong/fetool
Front-end Developer Manual	https://dwqs.gitbooks.io/frontenddevhandbook/content

Entry class

Entry Class	Address
Front-end introductory tutorial	http://www.cnblogs.com/jikey/p/3613082.html
Xuefeng’s Javascript tutorial	http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
jQuery Basics Tutorial	http://www.imooc.com/view/11
Essential PS skills for front-end engineers - picture cutting	http://www.imooc.com/view/506
A front-end entry method based on personal experience summary	https://github.com/qiu-deqing/FE-learning

Tools

Tools	Address
Front-end people’s club	http://f2er.club/ It can really liberate your favorites
How to use Sublime Text elegantly	http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/#
Usage notes of the new coding tool Atom	http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/
css sprite creation	http://www.imooc.com/learn/93
Getting started with version control – moving into Github	http://www.imooc.com/learn/390
Grunt-beginner front-end automation tool	http://www.imooc.com/learn/30
IntelliJ IDEA Simplified Chinese special tutorial	https://github.com/judasn/IntelliJ-IDEA-Tutorial
Webstorm,InterllIdea,Phpstorm	http://t.cn/8kZZ1Uy
SublimeText	https://github.com/jikeytang/sublime-text
Atom	https://atom.io
visual studio code	https://code.visualstudio.com

Comprehensive effect search platform

Comprehensive effect search platform	Address
JavaScript Resource Collection Chinese Version	https://github.com/jobbole/awesome-javascript-cn
100+ super comprehensive web development tools and resources	https://xituqu.com/170.html
zoommyapp.com	http://zoommyapp.com/ High quality picture gallery
unsplash.com	https://unsplash.com/ High quality picture gallery
www.pinterest.com	https://www.pinterest.com/ Gallery
New Old Stock	http://nos.twnsnd.co Retro Style Gallery
Effect Network	http://www.jq22.com
Petals.com	http://huaban.com/
Beautiful pictures	http://www.topit.me/
codepen	http://codepen.io/
Photo Network	http://699pic.com/
Commonly used JavaScript code snippets	http://microjs.com

Team Blog|Weekly Report

Weekly Newsletter	Address
Qiwu Weekly	http://old.75team.com/weekly/
Coder Weekly	http://weekly.manong.io
WEB front-end development	http://www.css88.com
A JS tip per day!	http://www.jstips.co
Tencent AlloyTeam	http://www.alloyteam.com/webdevelop/
Ping An Technology Mobile Development Team 2 Technical Weekly Report	https://github.com/PaicHyperionDev/MobileDevWeekly

Development Center

Development Center	Address
mozilla js reference	https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
Chrome Development Center (chrome’s core has been switched to blink)	https://developer.chrome.com/extensions/api_index.html
safari development center	https://developer.apple.com/library/safari/navigation
microsoft js reference	https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94.aspx
js secret garden	http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html
js secret garden	http://bonsaiden.github.io/JavaScript-Garden/zh
w3help	http://www.w3help.org Comprehensive Bug Collection Website

Nodejs

Nodejs	Address
nodejs is quite large	http://liuqing.pw
Node.js includes teaching but not skills	https://github.com/alsotang/node-lessons
The length is relatively short	http://www.rainweb.cn/article/category/Nodejs
node express introductory tutorial	http://www.w3cfuns.com/article-5598538-1-1.html
nodejs scheduled tasks	http://my.oschina.net/u/568264/blog/193773
A nodejs blog	http://60sky.com
【NodeJS Study Notes 04】News Release System	http://www.cnblogs.com/yexiaochai/p/3536547.html
Happy 7 days of Chinese New Year, learning nodejs is also fun	http://www.cnblogs.com/qqloving/p/3541099.html
Learn NodeJS in seven days	https://github.com/nqdeng/7-days-nodejs
Nodejs study notes (2) --- event module	http://www.cnblogs.com/zhongweiv/p/nodejs_events.html
Getting started with nodejs	http://www.cnblogs.com/liusuqi/p/3735491.html
angularjs nodejs	https://github.com/zensh/jsgen
A series of articles about starting nodejs from scratch	http://blog.fens.me/series-nodejs
Understand nodejs	http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb
nodejs event polling	http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop
Getting started with node	http://www.nodebeginner.org/index-zh-cn.html
nodejs cms	http://ourjs.com/detail/53e1f281c5910a9806000001
Getting started with Node, a comprehensive NodeJS tutorial	http://ourjs.com/detail/529ca5950cb6498814000005
Code debugging and performance tuning for NodeJS	http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line

Comprehensive API

Comprehensive API	Address
javascripting	http://www.javascripting.com
Various popular library searches	http://microjs.com
runoob.com - Contains various API collections	http://www.runoob.com
Open source China online API document collection	http://tool.oschina.net/apidocs
devdocs	http://devdocs.io English comprehensive API website

Ecmascript

Ecmascript	Address
Understanding ECMAScript 6 - Nicholas C. Zakas	https://leanpub.com/understandinges6/read
exploring-es6	https://leanpub.com/exploring-es6/read
exploring-es6 translation	https://github.com/es6-org/exploring-es6
exploring-es6 translation preview	http://es6-org.github.io/exploring-es6
阮一峰 es6	http://es6.ruanyifeng.com
Ruan Yifeng Javascript	http://javascript.ruanyifeng.com
ECMA-262, 5th edition	http://yanhaijing.com/es5
es5	http://es5.github.io

Js template

Js template	Address
template-chooser	http://garann.github.io/template-chooser
artTemplate	https://github.com/aui/artTemplate
tomdjs	https://github.com/aui/tmodjs/blob/master/README.md
Taobao template juicer template	http://juicer.name/docs/docs_zh_cn.html
Fxtpl v1.0 Starry front-end template engine	http://koen301.github.io/fxtpl
laytpl	http://laytpl.layui.com
mozilla - nunjucks	https://github.com/mozilla/nunjucks
Juicer	https://github.com/PaulGuo/Juicer
dustjs	http://akdubya.github.io/dustjs
etpl	http://ecomfe.github.io/etpl

HTML5(HTML)

HTML(HTML5)	Address
In-depth understanding of HTML5 tags	https://segmentfault.com/a/1190000002695791
How to write efficient HTML	https://segmentfault.com/a/1190000002680822
HTML meta tag summary and attribute usage introduction	https://segmentfault.com/a/1190000004279791
Joking about HTML5	http://www.cnblogs.com/dojo-lzz/p/5059316.html

CSS3(CSS)

http://www.alloyteam.com/2015/10/8536browserhackshttp://browserhacks.com

Angularjs

CSS	Address
CSS syntax reference	http://tympanus.net/codrops/css_reference
How to write maintainable CSS	https://github.com/chadluo/CSS-Guidelines/blob/master/README.md
CSS3 Animation Manual	http://isux.tencent.com/css3/index.html
Tencent css3 animation production tool	http://isux.tencent.com/css3/tools.html
Zhiye css gadget collection	http://linxz.github.io/tianyizone
css3 js mobile hodgepodge	http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb
bouncejs touch library	http://bouncejs.com
css3 button animation	http://fian.my.id/Waves
animate.css	http://daneden.github.io/animate.css
The end of global CSS

Angularjs	Address
Some learning resources for Angular.js	https://github.com/dolymood/AngularLearning
angularjs Chinese community	http://angularjs.cn
Angularjs source code learning	http://www.cnblogs.com/xuwenmin888/p/3739096.html
Angularjs source code learning	http://www.ifeenan.com/?c=AngularJS
angular encapsulation of bootstrap	http://angular-ui.github.io/bootstrap
angularjs + nodejs	https://cnodejs.org/topic/51404e0f069911196d2e3923
Lv Dabao Angularjs	http://www.cnblogs.com/lvdabao/tag/AngularJs
AngularJS Best Practices	http://www.infoq.com/cn/news/2013/02/angular-web-app
Some extension directives for Angular	http://www.lovelucy.info/angularjs-best-practices.html
Angular data binding principle	https://github.com/Pasvaz/bindonce
Some extended Angular UI components	https://github.com/angular-ui
Performance testing of Ember and AngularJS	http://voidcanvas.com/emberjs-vs-angularjs-performance-testing
Take you closer to AngularJS - introduction to basic functions	http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html
Angularjs Development Guide	http://angular.duapp.com/docs/guide
Angularjs learning	http://www.cnblogs.com/amosli/p/3710648.html
Don’t learn AngularJS with jQuery in mind	http://www.rainweb.cn/article/angularjs-jquery.html
angularjs study notes	http://wangjiatao.diandian.com/?tag=angularjs
angularjs development guide	http://www.angularjs.cn/T008
angularjs English information	https://github.com/jmcunningham/AngularJS-Learning
angular bootstrap	http://angular-ui.github.io/bootstrap
angular jq mobile	https://github.com/opitzconsulting/jquery-mobile-angular-adapter
angular ui	http://mgcrea.github.io/angular-strap
Experience in integrating jQuery Mobile+AngularJS	http://www.tuicool.com/articles/7ZZVr2
With jQuery background, how to use AngularJS programming ideas	http://blog.jobbole.com/46589/
AngularJS online tutorial	http://each.sinaapp.com/angular
angular study notes	http://www.zouyesheng.com/angular.html

React

React	Address
react.js Chinese Forum	http://www.react-china.org
react.js official website	https://facebook.github.io/react/index.html
react.js official documentation	https://facebook.github.io/react/docs/getting-started.html
react.js material UI	http://material-ui.com/#
react.js TouchstoneJS UI	http://touchstonejs.io
react.js amazeui UI	http://amazeui.org/react
React introductory example tutorial - Ruan Yifeng	http://www.ruanyifeng.com/blog/2015/03/react.html
React Native Chinese version	http://wiki.jikexueyuan.com/project/react-native
Webpack and React Little Book - Front-end Stew	http://www.html-js.com/article/Fakefish%203053
Webpack and React Little Book - gitbook	https://fakefish.github.io/react-webpack-cookbook
webpack	https://github.com/webpack/webpack
Webpack, 101 entry experience	http://html-js.com/article/3009
Webpack Getting Started Tutorial	http://html-js.com/article/3113
Exploring front-end engineering solutions based on webpack	http://segmentfault.com/a/1190000003499526
React original practical video tutorial	http://www.piliyu.com

vue

vue	address
Vue	http://cn.vuejs.org
Vue Forum	http://forum.vuejs.org
Vue Getting Started Guide	http://www.cnblogs.com/aaronjs/p/3660102.html
Some resource indexes of Vue	http://segmentfault.com/a/1190000000411057
awesome-vue	https://github.com/vuejs/awesome-vue

Mobile API

Mobile API	Address
99 mobile knowledge collection	https://github.com/jtyjty99999/mobileTech
Mobile front-end development knowledge base	https://github.com/AlloyTeam/Mars
Some pitfalls and solutions (appearance and performance) of mobile front-end	http://caibaojian.com/mobile-web-bug.html
【Original】Mobile web resource organization	http://www.cnblogs.com/PeunZhang/p/3407453.html
zepto 1.0 Chinese manual	http://mweb.baidu.com/zeptoapi
zepto 1.0 Chinese manual	http://www.html-5.cn/Manual/Zepto
zepto 1.1.2	http://www.css88.com/doc/zeptojs_api
zepto Chinese annotation	http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html
jqmobile manual	http://app-framework-software.intel.com/api.php
Mobile browser development collection	https://github.com/maxzhang/maxzhang.github.com/issues
Mobile Development Hodgepodge	https://github.com/hoosin/mobile-web-favorites

jQuery

jQuery	Address
jQuery API Chinese Documentation	http://www.jquery123.com
hemin online version	http://hemin.cn/jq
css88 jq api	http://www.css88.com/jqapi-1.9/on
css88 jqui api	http://www.css88.com/jquery-ui-api
Learn jquery	http://learn.jquery.com
jquery source code search	http://james.padolsey.com/jquery
Web front-end resource summary (jQuery, Js, Css3, etc.)	http://www.cnblogs.com/jihua/p/webfront.html

D3

D3	Address
d3 Tutorials	https://github.com/mbostock/d3/wiki/Tutorials
Gallery	https://github.com/mbostock/d3/wiki/Gallery
lofter	http://datavisual.lofter.com/post/40cf3a_188e535
iteye	http://alanland.iteye.com/blog/1878595
ruanyifeng	http://javascript.ruanyifeng.com/library/d3.html

Requriejs

Requriejs	Address
Javascript modular programming (1): How to write modules	http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
Javascript Modular Programming (2): AMD Specification	http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
Javascript Modular Programming (3): Usage of require.js	http://www.ruanyifeng.com/blog/2012/11/require_js.html
Getting started with RequireJS (1)	http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html
Getting started with RequireJS (2)	http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html
RequireJS Advanced (3)	http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html
requrie source code learning	http://www.cnblogs.com/yexiaochai/p/3632580.html
requrie Getting Started Guide	http://www.oschina.net/translate/getting-started-with-the-requirejs-library
requrieJS study notes	http://www.cnblogs.com/yexiaochai/p/3214926.html
requriejs one	http://cyj.me/why-seajs/requirejs/
require backbone combination	http://www.cnblogs.com/yexiaochai/p/3221081.html

Seajs

Seajs	Address
seajs	http://seajs.org
seajs Chinese manual	http://cyj.me/why-seajs/zh

Less,sass

Less,sass	Address
sass	http://www.w3cplus.com/sassguide
sass tutorial-sass China	http://www.sass.hk
Sass Chinese documentation	http://sass.bootcss.com
less	http://less.bootcss.com

Markdown

Markdown	Address
Markdown syntax description (Simplified Chinese version	http://wowubuntu.com/markdown
Markdown Getting Started Reference	https://github.com/LearnShare/Learning-Markdown/blob/master/README.md
gitbook	https://www.gitbook.com Foreign online markdown can be edited into a book
mdeditor	https://www.zybuluo.com/mdeditor A domestic online markdown editor
stackedit	https://stackedit.io A foreign online markdown editor with powerful functions and cloud disk synchronization
mditor	http://bh-lay.github.io/mditor A lightweight markdown editor
lepture-editor	https://github.com/lepture/editor
markdown-editor	https://github.com/jbt/markdown-editor
Homework Blog	https://www.zybuluo.com has powerful functions, smooth speed, and synchronization across all platforms

Compatibility

Compatibility	Address
esma compatibility list	http://kangax.github.io/compat-table/es6
W3C CSS Validation Service	http://jigsaw.w3.org/css-validator/validator.html.zh-cn
caniuse	http://caniuse.com/#index
csscreator	http://csscreator.com/properties
microsoft