How to learn about front-end development in 2019?

In the past two years, front-end development engineer is more and more popular, 2019 has come, many people who are preparing to work as front-end development engineer, do not know how to prepare?

In 2019, we will learn front-end development. How can we learn front-end development effectively?

First of all, no matter what technology you learn, you start from the ground up, and front-end development is the same. Do software development, is engaged in programming development work, must first learn from the grammar foundation, through the grammar composition of the product effect.

The basic grammar of front-end development is composed of HTML+CSS+JavaScript, which is the most basic three languages of front-end development.

HTML is the hypertext markup language, the most basic language of web content. You can directly say that he is the skeleton of the web page, page pictures, text, video, audio, procedures need him to introduce into the web page.

Just HTML to do a web page, just have content, of course, is far from enough. Because only HTML, can only use Table layout to barely make a shape of the web page. But since the Web2.0 era, it’s all about box layout, that is, using DIV+CSS to achieve layout.

CSS is cascading style sheets. Through the style attribute to the label layout specification, when the table layout is no longer used, as long as the CSS style for the corresponding layout of the page label is the correct way to develop.

HTML(DIV)+CSS layout is the basic step to get started. In this stage, you will need to learn the following:

1. Semantic tag, SEO

2. Page loading process and principle

3. Web structure

4. Box model (W3C box model and IE box model)

5. CSS selectors

6. The CSS layout is floating and positioned

In the initial stage, we learned the layout method is basically a static layout method with PX as the unit. Familiar with the layout method, first give yourself a small goal, do a simple e-commerce web page out of the basic structure, without special effects, do not need to interact.

JavaScript is a very important content in our study of front-end development, but also a difficulty we often fall into the pit. JavaScript can now be said to be the most used scripting language in the Internet era. In the web page, all data rendering and special effects interaction need to use JavaScript to affect the display of the browser.

JavaScript is not only an important content to develop web effects and render data. In the later stage of learning front-end development, when a large number of algorithms and frameworks are used, the test of JavaScript foundation is also a lot.

In the basics phase, we learn JavaScript with the following considerations:

1. Basic keyword commands

2. Basic data types and arrays

3. The function

4. Object-oriented programming

5. Prototype chains, closures

6.JSON

7.Ajax

8.DOM(Document Object Model native DOM manipulation)

Event capture, bubbling, proxying

10. Common function methods

ES5, 6, 7

In the JavaScript part of learning, mainly to understand the principle of interaction, the principle of clear analysis, really understand the syntax, that write more complex logic is also easy.

When it comes to learning JavaScript, many young white students will definitely have a headache with his native writing method. Every logical business needs to be written manually, that is, every time you use it, you build the wheel. It’s a hassle. If only it were easier.

Because oF the features that JavaScript can encapsulate, there are a lot of class libraries and plug-ins wrapped in JavaScript. For example, the most classic class library is jQuery.

The jQuery class library encapsulates many JavaScript event methods within the class library. JQuery eliminates traversal, object selection, and many other issues through encapsulation. The realization of web special effects become simple, through the call method can be.

When learning jQuery, you need to know the following:

1. Differences between jQuery syntax and JavaScript native syntax

Dom object and jQuery object

3. Differences between jQuery entry functions and JavaScript entry functions

4. JQuery event execution logic.

Learning jQuery, you need to be able to quickly complete the effects of web pages, such as wheel graphics, accordion menus, carousel, magnifying glass, and so on. Can complete an e-commerce site layout + special effects development is the most basic requirements.

These are some of the basic content of zero-based learning, the most basic need to master things in the entry front development, the basic understanding, in order to do more preparation for the study behind.

In addition to the basic PC terminal, mobile terminal can be said to be very hot.

Different from the single WEB page on PC, the technology on mobile terminal can be applied to Web-app, mini program, hybrid-App and so on.

These are the large mobile web pages opened by our regular browsers (and built-in browsers like wechat). For example, our common e-commerce websites, functional websites and management websites all have the effect of APP in terms of layout and function.

Do a good job in web-APP development, the most basic many people will certainly say responsive layout, but front-end development is and 5 layout method, in addition to the famous responsive, there is the most important flexible layout method in the mobile end, that is, many people headache REM layout.

In addition to layout methods, new H5 features and touch-screen events and device compatibility issues also need to be handy.

Small program

This need not say more, now can be said to be very hot, each major platform have in doing their own small program, all kinds of bargaining, grab tickets, e-commerce, games have been used. This takes wechat applets as an example. It is mainly the encapsulation syntax made by wechat team based on the front-end foundation, and the ES syntax is the main one. Small program at present many companies are recruiting front-end development, there is no independent small program development engineer, so small program can be said to be front-end engineers high salary employment bonus skills, in other words, mature development is necessary.

It is also called hybrid APP. Few people may have heard of it, but more and more people have developed it in 18 years. This kind of APP can be directly produced and downloaded to the terminal, and it can be said that it has most functions of traditional APP in terms of experience. This type of development has a low threshold, that is, front-end development can be done. Most are large package platform can do, this you can understand later.

In front of all are basic things, now to employment front-end development, not only rely on a basic thing, make a mobile terminal page can be mature. The three front-end frameworks, VUE, Angular, and React, are hot right now.

A lot of white friends don’t know what a framework is. They only hear about jQuery and think it is a framework. Or think of frameworks as speeding up development, thinking that these libraries and plug-ins will do the work of the framework.

In fact, the emergence of the framework is an important symbol to change the position of the front end. The most important performance is the separation of the front and back ends. Before the separation of the front and back ends, many back-end development is both father and mother, which is not effective and efficient. I was born in the back end and know the pain.

Front-end projects today are more complex and diverse than ever before. The project is more complicated and the problems are more.

To solve the problem of repeatedly referencing external JS, take jQuery development as an example. In many cases, it is impossible to complete a single project, and many third-party plug-ins and libraries need to be referenced, resulting in the introduction of many external JS files in a project.

Not only does this clutter up the code, but it also slows down the opening speed. But with a framework, like VUE, it usually works with a build tool, and then it’s done with an entry file, which is introduced once at runtime, once and for all.

With component-based development, components are one of the most powerful features in a front-end framework. They can extend your HTML and encapsulate reusable code blocks, such as your scrolling diagram, TAB switching, page headers, page bottoms, and so on.

This independent component has complete functions of structure (HTML), presentation (CSS) and behavior (JS), which greatly saves the amount of code and improves the reusability of code. Especially when working in a team, it can improve efficiency.

Reduce development cycles. If you think jQuery can reduce development cycles, frameworks can be faster than libraries. For example, when using jQuery development, many times it is necessary to frequently manipulate the DOM, each effect has to find the DOM, so it seems very tedious. When using the framework, many functions are encapsulated, such as data binding and data formatting for many instructions. In this way, we only need to focus on the logic of the data when developing.

These are some of the essential knowledge points we learn front-end development. Let me show you the study route.

Front-end development learning is not a single, more content, the same application of the scene is also very much. If you want to be engaged in front-end development work, it is urgent to concentrate and work hard, adhere to the direction does not waver!

More front-end development learning, pay attention to the public account [front-end research] updated every day more learning tutorials and methods.