How to get started with web Front-end? Beginners have a look !, Web Front-end

How to get started with web Front-end? Beginners have a look !, Web Front-end

How can we get started with web Front-end? First, we should start with what is a preliminary web Front-end engineer:

According to my ideas, I divide front-end engineers into four levels: entry level, elementary level, intermediate level, and advanced level,

The entry level refers to understanding what the frontend is (in fact, many people still do not know what the frontend is ), understand basic html, css, and javascript syntaxes (there are a lot of things in these languages available on the Internet. Basic syntaxes are the most important thing in the entire technical system, (advanced Web technology tutorial), you can make the page without considering the compatibility according to the designer's design drawing, I have learned about the use of some frameworks (such as jQuery, zepto, bootstrap, etc ).

After getting started, I have learned what to do at the front end and learned the basic syntax to create simple pages independently, we need to continue learning to reach the level of junior front-end engineers. We need to have a clear understanding of the front-end engineers and be proficient in using various technologies.

Beginner front-end engineers: The first thing to know is how to handle compatibility processing of various browsers (for example, what is the difference between createElement in IE ), at present, almost every company needs to be proficient in html5, css3, and javascript during recruitment. This skill means to be trustworthy.

Next, we will talk about the knowledge that Junior front-end engineers should learn. Then, we need to know the pre-processors and post-processors of various css, and use the common front-end music video * framework (angularjs, backbone, reactjs, etc.) and understand the principles of these frameworks. In addition, you must be familiar with nodejs and use various node-based front-end building tools (grunt, gulp, etc ), be familiar with github or gitlab and have a deep understanding of modularity, 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 of junior web Front-end engineers

1. HTML Section

First, you need to know how to use some common labels and their attributes. I have summarized these commonly used labels as follows:

Html: the root element of the page. Head: the header label of the page, which is the container of all header elements. Body: The subject label of the page, where the content displayed on the page is placed. Title: The title of the page. Meta: the meta information on the page, including keywords and descriptions, is displayed in the document header. Link: defines the relationship between documents and external resources. The most common purpose is to introduce style sheets. Script: script tag. You can place the js script code in this tag, or use the src attribute of this tag to introduce an external tag. Style: style label. css code can be written in this label. A: hyperlink. The href attribute indicates the link to, and the target attribute indicates the open mode. Img: Image Tag. the src attribute indicates the image position. Form: A form element. Its input, select, textarea, and other labels are important. Div: defines partitions or sections 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 frequently used, for more information about semantic tags such as nav, section, article, header, aside, and footer.

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

Audio and video tags.

Canvas: defines images, such as tables and other images.

The accept attribute of the input tag, such as email, phone, and url.

GetElementByClassName obtains an element node based on the class name.

Multiple file selection multi-file selection attribute.

Html import and template

Process tag and webGL.

There are also some knowledge points to know:

1.doc type. 2. unicode, utf8, and Other encoding principles and differences. 3. How to optimize page performance. 4. png, jpg, webp, gif, and other image formats have different advantages. 5. Differences between HTML row elements and block-level elements. 6. head labels commonly used in mobile web development. 7. web semantics. 8. Cache principles in the browser.

2. CSS Section

My Opinion on css is to download a reference manual for css in chm format on the Internet, and then repeat them one by one according to the instructions in the manual.

Css is divided into the following knowledge points:

① Positioning Layout

1. What are the functions and differences of the seven position values (static | relative | absolute | fixed | center | page | sticky?

2. Achieve a font layout or a three-bar layout (fixed width on left and right to adapt to the screen in the middle ).

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

② Box Model

1. attributes include margin, padding, and border.

2. Related content of the telescopic box.

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

③ Text font

1. Force and do not wrap, clear blank.

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

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

④ Transform, transition, and animation

1. Functions and compatibility of various transform values.

2. the animation type of the transition, the principle of the besell curve.

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

4. repaint and rearrange the browser.

⑤ Selector

1. selector classification, weight and priority.

2. What attributes can be inherited and what attributes cannot be inherited.

3. What are pseudo classes and pseudo elements.

The above are basic things. In addition to these basic contents, You Need To Know Less, Sass, stylus, and other css preprocessors, which will greatly improve your css development efficiency, you also need to know about css post-processors such as Autoprefixer and PostCSS.

 

3. JavaScript Section

I will not talk about the basic knowledge of js here. I will divide js into two parts based on the syntax level and usage level.

At the syntax level:

The first is javascript's object-oriented content: encapsulation, inheritance, and Polymorphism in javascript.

① Encapsulation: In js, closures, scopes, and scope chains can be used to encapsulate ES6 const and let. ② Inheritance: prototype-based inheritance, constructor-based inheritance, combined inheritance, parasitic inheritance, and ES6 class keywords, prototype and _ proto __. ③ Polymorphism: In javascript, polymorphism is implemented using arguments. About arguments, many content will be extended: 1. caller and callee of arguments. 2. The apply and call functions of the method are different. 3. Use Array. prototype. slice. call to convert an Array object to an Array. 4. Various array methods, such as shift, splice, push, filter, map, reduce, and forEach.

Then there is the Js design model, such as the three factory models and builder models.

Finally, what does this represent in different situations.

At the usage level:

First, the most important thing Is ajax. The principles of ajax are cross-origin ajax Methods: jsonp, location. hash using iframe, postMessageAPI, websocket, and server proxy.

Next, the tcp protocol, udt protocol, http protocol header, status code, and so on. Browser caching and client storage: localstorage, sessionstorage, indexDB, and cookie.

Finally, there are some new js APIs, such as fileReader, fetch, Promise, and Web Sockets. You can go to caniuse to check what is new.

The above are just some general concepts. I will list some of the content that the front-end html, css, and javascript need to master. We still have a lot of knowledge to know in the front-end field, this requires you to summarize your work in the course of study.

 

If you have any questions during the learning process or want to obtain learning resources, join the learning exchange group.
343599877. Let's learn the front-end together!