Want to learn web front-end well? What else do you need to master?

How to get started with web front-end, first we have to start with what is a junior web front-end engineer:

According to my idea, I divide front-end engineers into four categories: entry-level, junior, intermediate, and senior. Level,

Entry level refers to understanding what the front end is (actually many people still don’t know what the front end is), and understanding basic html, css and javascript syntax (just search for these language things on the Internet There are many, many. Basic syntax is the most important thing in the entire technical system. Leading Web technology tutorials), you can create pages based on the designer's design drawings without considering compatibility. You have learned about some frameworks. Use (such as jQuery, zepto, bootstrap, etc. that are bad but still awesome).

After you have gone through the entry-level stage, you have already understood what the front-end does, and you have learned the basic syntax and can make some simple pages independently, then you need to continue learning to reach the level of a junior front-end engineer. Junior front-end engineers need to know a lot. They need to have a clear understanding of the entire front-end and be proficient in using various technologies.

Junior front-end engineer: The first thing you need to know is how to deal with the compatibility of various browsers (for example, what is the difference between createElement in IE browser, etc.). Now basically every company is recruiting When working, they will be required to be proficient in html5, css3, and javascript. This proficiency means that they can be picked up at their fingertips.

The following will talk about what specific knowledge junior front-end engineers should learn, and then they need to understand various CSS preprocessors and post-processors, as well as use common front-end MV* frameworks (angularjs, backbone , reactjs, etc.) and know the principles of these frameworks. In addition, you must be proficient in using nodejs, be able to use various front-end construction tools based on node (grunt, gulp, etc.), be proficient in using github or gitlab, and be familiar with modularization and componentization. , engineering, and semantics. Finally, you need to know how to develop mobile pages and how to optimize the performance of a page.

Technical system for junior web front-end engineers

1.HTML part

The first thing is to master the use of some common tags and their various attributes. I have summarized these commonly used tags as follows:

html: The root element of the page. head: The head tag of the page, which is the container for all head elements. body: The main tag of the page, where the content displayed on the page is placed. title: The title of the page. meta: Located at the head of the document, it provides meta-information about the page, including keywords, descriptions, etc. link: Define the relationship between the document and external resources. The most common use is to introduce style sheets. script: script tag, you can place js script code in this tag, or you can use the src attribute of this tag to introduce an external tag. style: style tag, css code can be written in this tag. a: Hyperlink, the href attribute represents the place to be linked to, and the target attribute represents the opening method. img: image tag, src attribute indicates the location of the image. form: form element, its internal input, select, textarea and other tags are relatively important. div: Define the partition or section in the document. You can use div to perform page layout and other operations. In addition, tags such as ul, li, p, button, iframe, p, and table are also commonly used. Semantic tags such as nav, section, article, header, aside, and footer also need to be understood.

In addition to understanding the above tags, you also need to have a certain understanding of some new HTML5 APIs:

audio and video tags.

Canvas: Defines graphics, such as charts and other images.

The accept attribute of the input tag, email, phone, url and other types.

getElementByClassName gets an element node based on the class name.

Multiple file selectionMultiple file selection attributes.

html import, template

process tags, webGL and other contents.

There are also some knowledge points to know:

1. The role of doctype. 2. The principles and differences between unicode, utf8 and other encodings. 3. How to optimize page performance. 4. Different advantages of image formats such as png, jpg, webp, and gif. 5.The difference between HTML inline elements and block-level elements. 6. Commonly used head tags in mobile web development. 7. Web semantics. 8. Principle of caching in browsers.

2. CSS part

Regarding css, my opinion is to download a css reference manual in chm format online, and then type each one according to what is written in the manual.

css is roughly divided into the following knowledge points:

① Positioning layout

1. The 7 values ​​​​of the position attribute (static | relative | absolute | fixed | center | page | sticky) What are the functions and differences?

2. Implement glyph layout or three-column layout (left and right widths are fixed, and the middle adapts to the screen).

3. Floating and clearing floating methods, flex layout, grid layout.

② Box model

1. Margin, padding, and border are the three attributes.

2. Telescopic box related content.

3.Multi-column Layout Module multi-column layout model.

③ Text font

1. Force line breaks or no line breaks, clear blanks.

2. Text alignment, size (how to set chrome fonts smaller than 12px), indentation, and conversion.

3. Unit (em, rem, px, etc.), color (rgb, rgba, hls).

④ Transformation, transition and animation

1. The role and compatibility of various values ​​of transform.

2.Transition animation type, the principle of Bezier curve.

3. Various settings of animation animation, @keyframes rules.

4. Browser redrawing and rearranging.

⑤ Selector

1. The classification, weight and priority of the selector.

2. Which attributes can be inherited and which attributes cannot be inherited.

3. What are pseudo-classes and pseudo-elements respectively, and what are their functions.

The above are all basic things. In addition to these basic contents, you need to understand CSS preprocessors such as Less, Sass, and stylus. This will greatly improve your CSS development efficiency. You also need to understand it. CSS post-processors such as Autoprefixer and PostCSS.

3.JavaScript part

I won’t talk about the basic knowledge of js here. I put js according to the syntax level and The levels used are divided into two parts.

According to the syntax level:

The first is the object-oriented aspect of javascript: implementing encapsulation, inheritance and polymorphism in javascript.

① Encapsulation: In js, encapsulation can be achieved through closures, scopes and scope chains, the role of ES6's const and let. ② Inheritance: prototype chain-based inheritance, constructor-based inheritance, combined inheritance, parasitic inheritance, etc., plus the ES6 class keywords, prototype and __proto__. ③ Polymorphism: In JavaScript, polymorphism is implemented using arguments. A lot of content will be derived about arguments: 1. The role of caller, callee and other methods of arguments. 2. The functions of apply and call methods are different. 3. Use Array.prototype.slice.call to convert an array object into an array. 4. Various methods of array, such as shift, splice, push, filter, map, reduce, forEach, etc.

Then there are Js design patterns, such as the three factory patterns, builder patterns, etc.

Finally, what does this represent in different situations.

According to the level of use:

The first and most important thing is ajax, the principle of ajax, and the cross-domain method of ajax: jsonp, location.hash using iframe, postMessageAPI, websocket, server Agents and more.

Then there are the protocol headers, status codes and other contents of the tcp protocol, udt protocol and http protocol. Browser cache, client storage content: localstorage, sessionstorage, indexDB, cookies, etc.

Finally, there are some new js APIs, such as file reading (fileReader), fetch, Promise, Web Sockets, etc. You can go to caniuse to see what new things are there.

What I said above are just some general concepts. I have listed some of the things that need to be mastered in front-end HTML, CSS and JavaScript. There is still a lot of knowledge that we need to know in the front-end field. This requires Everyone should make their own conclusions in the process of learning and working.

If you encounter any problems during the learning process or want to obtain learning resources, you are welcome to join the learning exchange group

The above is the detailed content of Want to learn web front-end well? What else do you need to master?. For more information, please follow other related articles on the PHP Chinese website!