A qualified Web front-end engineer must be familiar with the process and metrics

First, the analysis of the design draft

Design draft analysis refers to the design of how to make a page of the analysis, that is, which piece of content can be used as a public part, which piece of content structure can be achieved and so on. The ability to analyze the design drafts can be divided into the following stages:

1. To distinguish between the public and private parts of a design manuscript
2. On the basis of 1, there is a preliminary solution to the implementation of each part (including how to Chettu, write structure, write style)
3. On the basis of 1, the implementation scheme of each part is given exactly (including how to Chettu, write structure, write style)
4. On the basis of 3, we can consider the scalability of the scheme, reusability and page performance (including how to Chettu, write structure, write style).
5. On the basis of 4, consider the structure distribution of the whole station (including file distribution, directory structure)

These are all things that have to be done before the start of a do-it-yourself production.

Two, cut the picture

Chettu is a picture that cuts a design draft into a page for easy production. Have a misunderstanding, think Chettu is to cut out the picture, in fact, not exactly, but also include the cut out of the picture together, how to cut, from which to maximize performance, said "Chettu is an art" is not too much. Chettu can also be divided into several stages:

1. Cut into the desired picture (how to cut out the part you need)
2. On the basis of 1, the cut out of the picture to do some optimization (including compressed file size, select the type of picture)
3. On the basis of 2, plan the cut out of the picture (including file distribution)
4. On a 3 basis, consider overall performance (including merging pictures, compressed file size)

HTML and CSS Authoring

HTML and CSS writing refers to what is done above, through HTML and CSS, the design of the manuscript into the most important piece of the Web page, but also we want to focus on the content, put them together, because they are too related to each other, HTML writing will affect the style of CSS, It can be divided into the following phases:

1. Restore the design artwork visual effects and pass standard validation (HTML)
2. Implement multiple browser compatibility (HTML) on a 1 basis
3. On the basis of 2, label Semantics (HTML)
4. On the basis of 3, choose a better implementation (including modular structure, facilitate the use of program scripts, HTML and CSS)
5. Based on 4, scalability, reusability, and maintainability (HTML and CSS) are considered
6. On the basis of 5, consider the distribution of the whole station's style (including how to implement the distribution)
7. On the basis of 6, the optimization of style formulation (including the application of the technique)

is the ability to solve the problem, which may be encountered at different stages, so it is not written.

If you have reached or exceeded 3, 4, 5, congratulations, you are already a professional "page refactoring worker". For our own development, pay attention to new technologies, technological innovation, improve user experience, aesthetics, the implementation of program scripts and so on, is also very necessary. Let's all make progress together.