1, learning HTML based

HTML to your web page gives structure, it is like the skeleton that keep you stand, the first thing you need to learn grammar and everything it must provide, your study should be focused on these things below:

HTML based learning, knowing how to write a semantic HTML to understand how the web page is divided into sections (paragraphs), and how to correct organization DOM (document object model (DOM) now many of the new label is also useful, need to know to

1

Practical advice:
Once you learn HTML based, at least to make five HTML web page, I suggest that you just find a website, such as making archives page or Twitter login page, and then focus on the content of organization, properly out of things can be very ugly, but don't worry, temporarily put your focus on the appropriate structure,
2, learn CSS

Now we have learned how to ready for web framework, then there is on this basis to add some skin make it look a little better, CSS - cascading style sheets (CSS) is used to beautify your HTML page,

The first thing to do is to learn grammar, familiar with common CSS properties, understand the model box (box model), to master how to make use of the Grid and Flexbox preparation once after completing the above layout, to learn the following query website made through the media response,

1

Practical advice:
Once you have mastered the foundation, then should design step to make HTML pages, for example, if you give a lot file write the HTML page, now it is time to use CSS to make it look like a lot of actual data page, that 5 page in front of all want to try,
3, learning JavaScript based

JavaScript can make your HTML page interactive stronger, let's say you have seen on the website of all the slides, the pop-up window and broadcast announcement, as well as in the case of without reloading the page reloading the page, certain parts of these are made of JavaScript, in this step, you will be the basis of learning JavaScript to prepare for the journey behind the --

Learning this language grammar and basic organization, learning how to use JavaScript to manipulate the DOM, for example, how to remove some elements from the page, how to add a few elements, add and remove class, through JavaScript application CSS styles, etc., finish after learning and understanding, such as scope, closures, variable ascending and event bubbling such topic, learn how to use XHR or Ajax generate HTTP invocation, Ajax can let you in reloading the page doesn't need perform a specific action, after learning the next will know all the new features of ES6 + ES6 just a version of JavaScript, which are introduced to the language a lot of interesting updates, such as classes, define variables in a variety of ways, to add to the new array method, strings, etc., do you find most of the articles on the Internet with Babel to parse the ES6, this is actually a translation, can convert this new JavaScript to old JavaScript, because there are some old browser does not support the new JS, but now don't have to worry about Babel first, just need to understand the relevant concepts, and then use any kind of support for ES6 on practice in the latest version of the browser,

1

Now you should already feel things like one thing, if you follow the above steps down, should be encouraged to these is you just learned some of the most important things,

I should learn jQuery?

Once upon a time everyone is crazy about jQuery, there are good reasons; This is a powerful library, on the basis of JavaScript provides an encapsulation, that way you can use the browser compatibility of anything, but those days are gone, now use it for the new project is not a lot of, but there are still people in use, so the jQuery is the source of our greatest use, its source on operation and interaction with the dom actually write js code to us there is a big inspiration,

Practical advice:
You may feel at any moment already understand but if you don't practice will soon be forgotten, in accordance with the road map to learn, make sure to learn as much as possible practice,

Continue to do reactive sites, use JavaScript to increase interactivity, you can add any existing web pages, interested in everything, but remember to use the learn now

Once you have made some sites, the next is to start to do the real thing, you can find some projects open to making it a pull request some open source projects, here is some to try to pull request:

Enhance the UI, make any demo page a responsive or design improvements and see what the reconstruction of the open issue is you will be able to solve any you think you can improve the code

1

4, other

After learning the basics, you also need to learn some skills, mainly as follows:

Chrome console debugging, this will greatly facilitate the choice suitable ide, modify the code to observe Taiwan before and after interaction in general use have sublime does, vs, webstorm, vscode etc., along with a variety of programming with plug-in learn git basic operation, if you want you can also use a simple GUI version of git, but it is very useful to learn the basic command line git

1

Second, advanced
1, the package manager

Before this, if you want to use external libraries, such as plug-in or external desktop widget, you have to manually download JavaScript and CSS files and put them into the project, and then the library or plug-in release a new version, you have to download the update file into your project again, this is very troublesome,

Is specifically, a package manager can through the command line, help you put external libraries and plug-in in your project and then upgrade the version, so you don't have to manually copy and update the library, some package manager now mainly yarn and NPM, the two but NPM before yarn in yarn in the package version management is better than NPM, its specific use is almost the same, once you learn to use one of these, another nature also is not a problem,

Practical advice:
After have the basic knowledge of package manager, you will be able to install some external libraries made by some of the web page to the front of you, some hints plug-in installation, for example, when users click a button to display the tooltip, or create a login form with some forms authentication library form validation, or try a different option to see how to install a different version,

Note: remember to look at the semantic versioning
2, CSS preprocessor

Preprocessor to CSS default does not support the function of the latter and rich languages optional CSS pretreatment including Sass, Less, Stylus, etc., I would prefer to choose Sass, but PostCSS recently also have a good momentum of development, it belongs to a icing on the cake, "Babel" is similar to CSS, you can be used independently or on the basis of Sass overlay,

Anyway, my suggestion is to first learn Sass, know less, stylus, such as the back to have time to look at PostCSS,
3, CSS framework

CSS framework is not a difficult thing to do actually, using while learning, recommended in the Bootstrap, Materialize and Bulma, if consider the market demand is the Bootstrap,
4, CSS organization

With your application swelling, CSS has become unsustainable chaos, there are many methods to organize your CSS, let it better meet scalability, for example, OOCSS SMACSS, SUITCSS, Atomic and BEM are good CSS code organization and management of guiding practice, CSS organization for complex huge CSS is to develop a unified fixed CSS code organization and management standards, including CSS style of naming rules, you should know the different between them, but I prefer BEM,
5, build tool

Tools that can help you build/packaging for JavaScript applications and development, this kind of tool function mainly includes the following three aspects:

linter(代码检查) , 是指对代码进行静态检查,如定义变量是否使用,变量命名,方法回调次数,注释是否规范等,主要对代码书写是否规范进行检查,linter有很多选项,其中包括ESLint,JSLint,JSHint以及JSCS等,但是目前主要是ESLint用得多,task runner(自动构建) , 即是对项目代码进行自动构建编译为浏览器能够执行的东西,如对typescript和Sass进行编译,使用自动化构建工具则不需要程序员手动进行操作,这个本来是是很多选项的,包括npm脚本,gulp,grun等等,不过既然webpack能够处理gulp能做的大部分东西,所以只有自动构建中的npm脚本可以用来对webpack能做的任务进行自动化,不需要学习Gulp,如果到后面如果你有点时间的话,可以去看看它能否对你的应用有所帮助,bundler(打包工具) , 不同的选项包括Parcel,Webpack,Rollup,Browserify等,如果你必须选一个,目前你可以闭着眼睛选Webpack就是,Rollup也很常用但是主要建议用到库上面,至于app,还是以webpack为主,所以可以先学习一下webpack,后面如果想的话再了解一下Rollup,

1

Practical advice:
Congratulations to you! You can now call myself 75% of modern JavaScript developers to continue to use what you learn now to do something, may be able to make a library in the future use Sass and JavaScript, and then use Webpack transform Sass into CSS, with Babel converts ES6 code, once you've done it again released to making and NPM,
Three, and then advanced
1, framework,

In fact, in the general development, this part is often close to the base part, the reason on Sass, build tools and the back of the package manager, because you can use all those things in the framework,

Framework also has a number of options, but now more commonly used is the React, Vue and presents, recently to React. The increasingly strong demand of js, however, the previous column of this a few you randomly choose one won't be wrong, people will choose the React or presents, but a special note, as a beginner may find presents would be relatively easy to spot, because it supports almost all available immediately, such as powerful router to support lazy loading, support HTTP client interceptors, dependency injection, component CSS package but don't need to care about the problem of external libraries, but the React undoubtedly have more advantages in the community, and Facebook have been working to improve it,

Once the choice framework, of course, there are some other things need you to learn,

If learn to React, have to learn Redux or Mobx to understand state management, specific learns what should depend on the size of the application, Mobx is suitable for small and medium-sized applications, story is more suitable for large-scale applications, even probably don't need to learn, such as the app permits by the React of native state management, if choose the presents, with TypeScript (without it you can also develop presents application, but we still recommend that you use) and Rx js, these besides presents applications in other place also can use, this is very powerful library, also suitable for the development of functional programming, if choose Vue. Js, may still have to learn Vuex, this stuff is a bit similar to the story but is for Vue,

1

It is important to note that Redux, Mobx and Rx. The js is not bound to death together with the framework, you can also use a variety of JavaScript application, in addition, if you choose the presents, ensure you use the presents 2 + 1 + instead of presents, here is the same as the vue, vue2.0 with vue1.0 also have subtle distinction,

Practical advice:
Now what they need in order to know the development of modern JavaScript application, and can choose to learn the framework of a project out to practice,

After finish, again to see how to measure and improve performance, for example can see Interactivity Time, Page Speed Index and Lighthouse Score, etc.,
2, the gradual Web application

nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull