Don’t know you yourself in this industry, front-end development of seasoning has been six years, always feel to learn a lot of things, but we feel a lot of things didn’t learn very fine, because the knowledge just to check to see, you will find that it is also a bottomless pit, we need to spend a lot of energy to mining, to learn. So most of us can only do how to apply, we can complete most of the work tasks given to us by the company.

Simple introduction to the front, but it involves knowledge and more miscellaneous, just into the lines of that year (2014), we will not only to the front-end development code, at the same time, we also want to be cut points of strength, so more or less you will have to order the ps skills, such as on the source file to modify, delete, add some fonts, change the background color, adjust the font size, Extracting images of various formats ah, these early need us to do hands-on.

Later, with the rapid development of the front-end, from the traditional front-end div+ CSS + JS (JQ) can work, we have to play a variety of frameworks, such as:

UI framework

No memorization is required, but Bootstrap, Amaze UI, LayUi, Material-UI, ElementUi, Antd Design, Vant, etc., will be called based on the document

Three popular front-end frameworks

Angular, Vue, and React require mastery of their various syntactic and development techniques.

Small program and public number

Alipay small program, wechat small program, wechat public account these three will be based on the official JDK package provided to us, development calls, mainly a skilled process and documentation.

style

Less, Sass, Stylus, Flex, Css

Less, Sass and Stylus are all front-end CSS preprocessing languages. They are very similar and not difficult to use, except that their syntax is slightly different. These three browsers do not recognize or have poor compatibility, so we need to use tools to convert them to CSS. Flex: Is a layout method for mobile now, with minimal code to achieve a good layout.

A template engine

Jade, Pug, art-Template

Nodejs

Express, Koa

Rely on installation and package management

Bower, NPM, yarn

The three are used to manage our installation package dependency, the front-end development is manual introduction of development kit, but this will lead to our multi-person development, because the package dependency version number is different, resulting in the program to throw a variety of exceptions, in order to solve this problem so introduced the concept of package dependency management.

Json The NPM configuration management file is package.json package-lock.json The yarn configuration management file is package.json yarn.lock

Javascript, Jquery, ES6

These three are the basic skills of our front-end learning, we need to continue, long, skilled mastery of their grammar sugar and call methods.

HTML tags

Handling asynchronous requests

Ajax, FETCH, Promise, AXIos, Async /await

Compatibility processing and adaptation processing

These are to do a front-end developer need to understand and learn, I’m afraid the text is not clear enough, so I found a brain map from the Internet, so that we can be more intuitive, learning front-end to master what knowledge,

But there are a lot of things we all need to know as developers, like:

Warehouse management

A few years ago, SVN was mostly used, but now most of them are using Git, some like command control, some like tool interface control, no matter which way, it is good to manage our code warehouse well and efficiently.

Git, GitLab, Gitee, SVN; Management tools: TortoiseGit, SourceTree, TortoiseSVN

Development tools (mainly front-end editors here)

Dreamweaver–>Sublime–>WebStorm–>VsCode

Dreamweaver: When I was in college, code was not typed out (it was rarely typed), it was dragged out one control at a time. Now it’s rarely used. Sublime: It’s lightweight, but it’s also available for a fee. You can try it for free, but it pops up a lot. I hate it because it’s light and has a great library of plugins, so I’ve been using it for a long time. WebStorm: is an integrated development tool. It’s heavy, it costs money, but it works really well. VsCode: Lightweight, free, and easy to use, so it’s currently one of my favorite front-end development tools

Document recording tool (you can record and share information anytime and anywhere)

Youdao Cloud Notes, Evernote, Tencent documents

Search engine

Google, Baidu, Bing, 360, Sogou search

Here I want to say more, most of the time, when we encounter problems, with the help of a search engine, rapid positioning to we want to answer, but sometimes, search for the answer is not what we want, isn’t it enough intelligent, but we search the words is not enough precise, there is a problem, or are you asking There is every search engine search algorithm is not the same, the way to grab resources is not the same, so when we encounter some more difficult problems, you can try to search in each search engine. Here are a few suggestions:

1. Keep your questions short and search for key words. 2. 4. If you can search by ladder, don’t search in China 5. English search, you may have some unexpected results

Problem solving, learning, sharing websites, posts, forums.

Stack Overflow, Gold digging, CSDN, Jane book, Zhihu, various official website discussion area, question area, etc

Today let’s first write here, there are certainly a lot of their own did not think of or need to improve their own place, then think of constantly improve it.

Again to canvassing links, for praise, for attention to the public numberSunnyFan's programmed life, continue to update useful front-end knowledge, front-end dry goods to share with you.

If you are an Apple computer user and need some MAC cracking software, you can send me a private message on wechat: Sunnyfan123456

Benefits: Navicat Premium 15.0.6 for Mac pan.baidu.com/s/1XEeJSEny…