This article is written for beginners who want to get started with web front-end engineering. Experts please pass by, and experts are welcome to make a brick.
Let’s talk about the value of web front-end engineers. At present, the interaction of web products is becoming more and more complicated. User experience and website front-end performance optimization all depend on web front-end engineers. Web front-end engineers are a combination of design and development, and web front-end engineers are Among the developers, the most direct product-oriented, user-oriented designers, the results of a development team are displayed by web front-end engineers, because users do not care how powerful the back-end processing is; among designers, web front-end engineers are Direct-to-developer designers convey their design ideas to developers in a computer language, and web front-end engineers are critical in the entire team.
In my opinion a qualified web front-end engineer must master HTML, CSS and JavaScript. Knowing only one or two of them is not enough, you must be familiar with all three languages. It's not that you have to be very proficient in all three languages, but you should at least be able to use them for most tasks without having to ask for help as often.
The following are the basic knowledge and skills that web front-end engineers need to master in my eyes:
1 Basic structure of a web page (HTML + CSS)
HTML is a markup language, not a programming language. The most basic tags are <html> and <body>, and CSS is used to define how to display HTML elements. It is easy to get started with HTML+CSS, but many people are not deep enough. Here are a few examples: What is the purpose of the <meta> tag? What is the difference between margin-left and left and when should it be used? Another DIV+CSS layout problem: put three horizontally aligned DIVs in a DIV of uncertain width, the width of the left and right DIVs is fixed at 150px, and the middle DIV fills the remaining width. If you don't know these problems yet, and you can't solve that layout problem in a few minutes, you're not deep enough in HTML+CSS.
2 How browsers display web pages
Browsers with different kernels render web pages differently. Currently, browsers have client-side debugging tools. The following figure shows the loading details of a google homepage under IE9:
When doing web performance optimization, you need to know more about browser rendering and details. Let’s talk about a more useful knowledge point: the current upper limit of parallel loading of browsers is 6, and older versions of browsers will be different.
3 The life cycle of a web page
Under different web frameworks, the life cycle of a page will be different, but it is generally the same: the client sends a GET request, the server returns the corresponding page, the client completes the operation and data, and then POSTs to the server. Be sure to understand the details of data transfer (front and back, between pages).
4 DHTML DOM BOM Javascript AJAX
This is the top priority of web front-end development, and most of the time we are dealing with them. A few points to note: javascript is single-threaded programming, the so-called javascript asynchronous programming is just a plan to execute the corresponding event at a certain time in the future; learn more about the DOM event mechanism; client-side storage (localStorage and sessionStorage are added in HTML5 ); javascript is not as rigorous as a server-side language, and debugging is not very convenient, so you must develop strict javascript editing habits at the beginning; javascript is very powerful and flexible, don’t imagine being proficient (let alone proficient) in a short time, and write For some frameworks and class libraries, in the initial stage, you should start with a proficient and mature framework (such as jquery); you must be proficient in using client-side debugging tools.
6 Server-side language development experience, PS cutting technology
Web front-end development is in the middle of design and development, so you need to understand things at both ends. The editing language is the same. The server language has been written before, which is very beneficial to learning javascript. From pictures to static HTML pages, PS cutting technology is indispensable.
5 Browser Compatibility
Due to historical reasons, browser compatibility has always plagued web front-end engineers. Although there is a W3 organization and some specifications have been formulated, although browser manufacturers are working hard to improve and approach their specifications, various kernels in the real network environment , various versions of the browser have a place. Solving the browser compatibility depends on the accumulation of experience, the good thing is that there are a lot of information on the Internet. http://www.w3help.org/zh-cn/ This is a good reference site.
6 Ability to learn quickly and willingness to learn actively
The development of the front end of the web is very fast. In this industry, you must have the ability to learn quickly and the willingness to learn actively, so as to adapt to the requirements of web products. There is no absolute right or wrong in the field of web front-end. There are many ways to solve a problem, but we need to find a more suitable method. Finding a more suitable method requires accumulation of experience. In short, the web front-end is easy to get started with, but difficult to master , requires more active learning willingness.
7 Good communication skills
A good front-end engineer needs to have good communication skills, because your work is closely related to the work of many people, such as project managers, designers, end users, development engineers, and front-end engineers are located at the intersection of these types of people. You are required to take good care of them, balance the needs of these four types of people, and come up with a more suitable plan. It can be seen that communication skills require higher requirements for front-end engineers. You can take a look at the following blog post: http://www.cnblogs.com/trance/archive/2011/08/31/2160617.html .
Finally, provide some good learning materials:
1. W3C learning website ( http://www.w3school.com.cn/ ), the information on it is very complete and practical, and it is the best introductory material.
2. The Definitive Guide to JavaScript
3. "The Art of javascript+DOM Programming"
4. "JavaScript Advanced Programming"
.