How Should beginners learn the frontend? A big analysis of the development path of web Front-End !, Web Front-end

How Should beginners learn the frontend? A big analysis of the development path of web Front-End !, Web Front-end

Preface:

Excellent Web Front-end development engineers must have both breadth and depth in the Knowledge System! Must be capable of fast learning.

Front-end development engineers should not only master basic Web Front-end development technology, website performance optimization, SEO and basic knowledge on the server side, but also learn to use various tools for auxiliary development and theoretical knowledge, it includes code maintainability, component usability, hierarchical semantic templates, and hierarchical browser support.

Front-end engineers must meet the needs of at least four types of customers:

1. Product Manager.

These are groups of people responsible for planning applications. They will come up with a lot of new, strange, or even impossible applications. Generally, product managers are pursuing a wide range of features.

2. UI Designer.

These people are responsible for visual design and interactive simulation of the application. They care about what users are sensitive to, what interactions they have, and how they can be used as a whole. In general, the UI Designer Hou tends to be fluent, beautiful, but not easy to implement, and they are often dissatisfied with front-end engineers. 1px error.

3. Project Manager.

These people are responsible for running and maintaining the application. The main focus of project management is the normal running time, the time when the application is always available, the performance and the deadline. The goal of a project manager is to keep things as simple as possible and not introduce new problems when upgrading and updating.

4. end user.

It refers to the main consumer of the application. Although front-end engineers do not often deal with end users, their feedback is crucial. What end users require most is personal functions and the functions of competitive products.
Okay, so many examples ...... Do you really want to learn the frontend? Don't regret it? If you are ready, haha, let's enjoy the fun of learning the front-end together!
What content should I learn from the web Front-end from scratch? How should I learn it?
If you are a newbie studying the front-end, you must think about why you want to learn it. It is out of a certain mentality. Then, you can locate yourself and consult with Daniel to learn more about people who are not at your own level, in this way, you can grow fast and never be impatient. You must analyze yourself and find a suitable learning method.

Misunderstandings about Web Front-end:

Web page production is a course that computer students will access during their college years. Most of the first integrated development environment (IDE) used to learn web page production is Dreamweaver, this WYSIWYG "hanging sky" IDE brings us great convenience in making webpages.

Quick Start and quick effect have made us fall in love with creating web pages without knowing it. At this time, many people will fall into a misunderstanding, that is, since with such a handsome IDE, you can quickly and conveniently create webpages by clicking the menu with the mouse.

So why do we need to learn such hard-hitting code as HTML, CSS, JavaScrpt, and jQuery? Isn't this simple and traditional? However, with the deep learning, we will find that we are in a dilemma-relying on IDE too much makes us not clear about the nature of its implementation, knowing it, but not knowing why.

Therefore, when there is a problem with the page effect, we are at a loss, not to mention how to optimize the page and complete some more advanced applications. The reason is obvious: Smart IDE fulfills our inertia and ignores the most essential content-code behind the gorgeous web page.

The correct direction is better than unnecessary efforts:

There are two ants who want to jump over a wall and look for food at the end of the wall. When an ant arrives at the foot of the wall, it does not hesitate to climb up, but whenever it climbs to the foot of the wall, it will fall down due to fatigue and fatigue. Although it was not discouraged, it fell down again and again, and quickly adjusted themselves, and began to climb up again.

Another ant looked at it and decided to bypass the wall. Soon, the ant began to enjoy the food before bypassing the wall, and the other ant continued to fall and start again.

In many cases, success requires both courage and perseverance. Maybe there is a good direction, and success is faster than you think. If you are running on the wrong road, it is useless to work hard. The same is true for learning the Web Front-end. You should first select a correct learning path.

Here, we will divide the Web Front-end learning into the following stages, specific learning roadmap:

(Web Front-end learning and communication group: 328058344 chat prohibited, not welcome !)

>>>> Stage 1-HTML learning

HyperText Mark-up Language (HTML) is the skeleton of a webpage. Whether it is a static webpage or a dynamic webpage, HTML code is returned to the browser, the browser interprets and renders the HTML code to the user. Therefore, we must master the basic structure and common tags and attributes of HTML.

HTML learning is a process of memory and understanding. In the learning process, you can use the "split" view of Dreamweaver to assist in learning. Looking at the results in the "design" view, learn the essence in the "code" view, and bring the advantages of various views to the extreme, this comparative learning method makes up for the boring experience of simply memorizing HTML tags and attributes. It must be excellent for beginners!

After learning HTML, we just learned how to make various "raw materials, to build a building, we also need to combine these "raw materials" with our design scheme and make some styles beautify.

>>>> Stage 2-css Learning

CSS is short for Cascading Style Sheets. It is called a stacked Style sheet. It is a Style design language that truly achieves the separation of webpage performance and content. Compared with the traditional HTML, the style can be reused, which greatly improves the development speed and reduces the maintenance cost.

At the same time, the box model, relative layout, and absolute layout in CSS can precisely control the position and layout of objects on the webpage in pixels. Through this phase of study, we can successfully complete the construction of a building.

After the "building" is built, we can give it to users. However, if we want to give users a better experience, we can further "renovate" the "building ", make it look more luxurious.

>>>> Stage 3-javascript Learning

JavaScript is a widely used footfall language on the client. It provides some built-in functions, objects, and DOM operations in JavaScript, with this content, we can implement special effects, verification, and interaction on some clients, so that our pages don't look so dull! Yes?

At this time, you may still be immersed in the surprises brought by JavaScript, but your project manager suddenly yelled at you

"This effect is not compatible in the x×browser. Try again ......"
"Incompatible ?" Instantly petrochemical companies have wood?
"I am going, my father! It took me a night to write hundreds of lines of code to get it done. I vomited blood !"
The compatibility and complexity of JavaScript sometimes make us a headache. Fortunately, the "Great God" helped us encapsulate it.

>>>> Stage 4-jquery Learning

JQuery is a free and open-source lightweight JavaScript library and is compatible with various browsers (jQuery2.0 and later versions give up support for IE6/7/8 browsers ), at the same time, there are many jQuery-based plug-ins to choose from. This makes it easier and faster to implement some rich dynamic effects, greatly saving our development time and improving the development speed, this fully reflects the core purpose of write less and do more. This Feel is amazing! Yes?

>>>> Stage 5-bootstrap Learning

The "luxury building" is now on the ground, but every day after day, building year after year is so cumbersome! Can We modularize every single part in the building? when building a building is required, it is not cool to combine it like a pile of wood? Can it be implemented? The answer is yes. ** This idea is also suitable for front-end Web development. As a result, various front-end frameworks have emerged. Bootstrap is recommended here. ** Bootstrap is an open-source front-end development toolkit launched by Twitter. It is a CSS/HTML framework and supports responsive layout. It has been a popular open-source project on GitHub since its launch. During project development, we can quickly complete page layout and style settings with the help of CSS styles, components, and JavaScript plug-ins provided by Bootstrap, and then fine-tune the styles accordingly, in this way, framework-based development greatly shortens the development cycle. Standing on the shoulders of giants is awesome!

Learn some suggestions and methods in the Web Front-end:

One of the issues that need to be paid attention to during CSS layout is the lack of overall analysis on the page layout and the inability to grasp the nested relationship between boxes in the page from a macro perspective, as a result, the relationship between elements on the page is very chaotic, and the box may be misplaced when it is floating. We recommend that you use the idea of "going from top to bottom and gradually refining" in layout. First, use several boxes to divide the page from the whole, and then gradually nest the box.

"A gentleman is born like a stranger, and good or false is also a thing." In the course of learning, you must browse some excellent websites and be good at analyzing and learning from their design ideas and layout methods, only when multiple parties have broad knowledge can they be integrated and used by others.

The growth and foundation of each person are different. They are executed based on their actual situation. Repeat it. The core of the front-end is js. css is not difficult, but it must be accumulated. I think so about the front-end:

Css is like a bottle of wine.

Html and css are all about the tag and Selector attributes, but it is not easy to write a page with scalability, robustness, or maintainability. Now, writing Basic page conditioned reflection is not about how to quickly complete it, but about how to quickly complete the required task when there is a need to modify the interface and the minimum amount of code to be modified. This is a triple test of front-end endurance, physical strength, and intelligence.

Js is like a sword.

At the beginning, JavaScript was just for better experience. With the development of any technology and society, it became increasingly important to assume more and more roles. At the beginning, jQuery began to feel like js was just the tip of the iceberg. With more and more understanding of js, he is abnormal and cute, that is, fun and difficult to control, there are many compatibility problems, but solving compatibility is our basic survival path. From ajax to jsmvc all the way, it seems that the high tide is too high.

Life is a dream.

Technology is only part of life, once ambitious, and now write code down. Changes can be changed, and acceptance cannot be changed. Life is limited. The attitude of learning in life is: Don't worry, don't worry, don't be slow. Persevere and believe in yourself. I don't want to change the world, but I want to change my life. If you do not want to be healthy, you must step by step. Thanks to the hardships, he made us stronger. Thanks to setbacks, he keeps us growing, thanks to bugs, and he makes our thinking more profound. Thanks to the front-end, he made us more confident that it would take 18 martial arts to support the sky.

Finally, what are the values of front-end engineers? Let's take a look at how Internet Daniel evaluates front-end engineers:

Zhang kejun Douban front-end engineer:

I personally think that front-end engineers are gradually becoming product engineers. The development of WAP apps, responsive UI, and other HTML5 technologies will become the main work of front-end engineers to solve cross-platform and cross-device product implementation problems. Javascript, HTML, and CSS are familiar to front-end engineers. The languages used for many years will be supported by various platforms as open standards.

The separation of product forms and data is the trend. Although the requirements for diversified product forms in the mobile age can be achieved by different technologies, they are costly. This is also the reason why HTML5 came up with the standard in the 04 years, which was not popular until the previous two years.

At this stage, the value is also great. Web product interaction becomes more and more complex. User Experience and website front-end performance optimization require professional front-end engineers to solve these problems. In addition, it is necessary to make up for the lack of designers in interactive design in the project. Front-end engineers play an important role in the development process.

One or two front-end engineers can parallel the entire development, making the design-to-implementation transformation smoother. Wise Companies should reserve front-end engineer resources.

I don't think there is any relationship between front-end engineers and product managers. Good front-end engineers will surely become good Interaction designers. Front-end engineers should have no less understanding of the information architecture than professional Interaction designers.

Zhang Jingwei front-end engineer:
I. Basic skills required by front-end engineers:
HTML CSS
Ø JavaScript
PHP/ASP/or other programming languages widely used in the Web Field
Art and vision
2. Front-end engineers are oriented:
User
Web Browser
Ø Data Interface
3. What are the values of front-end engineers?
Provide technical support (interaction part) to simplify user use)
Provide support for compatibility with multiple browsers
Provide support for improving user browsing speed (Browser performance)
Provide support for cross-platform applications or other applications based on webkit or other rendering engines
Provide support for displaying data (data interface)
Yuanyan cloud engineer:
I think the value of the front-end attacker depends on the following aspects:
1. users who are most willing to speculate on users recently are the most familiar users of engineers.
2. Innovative front-end
3. Front-end skills: JavaScript, HTML, CSS .... Easy to get started and difficult to get
4. diverse front-end interaction modes and different application scenarios. Ajax (Post, Get), Comet (rotation, long rotation, permanent frame, XHR stream), and WebSocket
5. With the development of browsers, many technical solutions began to favor the front-end
6. The front-end is not just Desktop, but Mobile, Pad, TV ......

Li chunping Baidu R & D engineer:
There are three ways to go. One is to move forward, the other is to move backward, and the other is to keep working at the front-end.
Moving forward is what we have mentioned above for user experience, interaction design, and even product designers. This is the best way to reflect the value of the front-end, that is, the user experience. Most people will go in this way;
The backward direction is Web development, which is used for database and background development. It no longer distinguishes the frontend and backend. We are deeply engaged in product R & D and implementation. This path is the road to integration with software engineers, this value is embodied in the implementation of business functions;
Finally, some of them have been deeply engaged in front-end development, such as the architecture design of various front-end libraries and frameworks, in-depth research on W3C standards, research on the JavaScript language itself, and analysis on the principles of browsers, for the principle analysis of network transmission protocols, it is not easy to go deep. Because many principles and fundamental things are involved, there are not many people going on.
Of course, there are also some products or business operations that have completely left the front-end and even software development. It may be advantageous to have a good technical background.
Hu jinpu front-end developer:
I think front-end engineers need to look at their respective values in two ways:
First direction: make it easier for users to obtain information. This is what front-end engineers of major departments should do. Get the psd and generate online code. Every detail in this process is worth your attention. Various interactions of forms and information interaction between different elements (regions) of pages are not necessarily the guidance of common IDs, you need to rely on your technical capabilities and your perception of user needs.
The value of this direction is: Is Information Retrieval more convenient? So does your user volume increase? Has online reservation been improved?
Second direction: make the front-end more professional. This is what some research institutes do every day. Read the specifications, compare the differences between different versions, and consider the significance of introducing new features (technology or business ). Focus on the latest development of the industry and find some innovative ideas. If you can, stand on the shoulders of giants and never blindly build the wheel. Finally, no matter whether it is your own innovation or the best solution to a problem, it will bring more support to the work of other front-end students in the industry and the company.
The value in this direction is more technical and cannot be directly quantified in a short time. However, after a period of time, it will be reflected in improving personal productivity and new page Interaction Models, it may even lead to new products.

Yuan Liang front-end engineer:
Product engineer-Web product APP makes the front-end need to understand the product design and interaction implementation details, so that the front-end code structure is reasonable and scalable!
Cross-platform device implementation-not just cross-platform compatibility of various browsers. Nowadays, there are various physical devices. Any implementation that Directly Interacts with users can be called a front-end!
Perfectly and elegantly implement interaction and design details-Restore interaction and design details with the simplest code and minimum cost, improving availability and accessibility!
The combination of user experience and new technologies-the development of HTNL5 provides better and more reasonable ways for Web and mobile applications to be implemented. The optimization of website front-end performance reduces user costs and company costs, scalable standard interface-semantic pages enable websites to be further enhanced from the seo perspective and machine-readable rows. Standardized and Scalable Data interfaces enable seamless connection with the background! It also greatly improves the development efficiency.
PR of the website image industry-display the company's website and company image in the most intuitive and visible way!
Front-end requirements
You need to understand the logic and formation process of the product-to be involved in the development of the product page related personnel to participate in the product discussion stage, understand the product requirements. And understand the future hidden needs of products! Column!
Need to know the interaction details-people who want to participate in the development product page participate in the interaction discussion to understand the interaction and design details! Make the Page Structure reasonable and scalable! Column! You can make reasonable suggestions!
Understanding data interfaces-understanding the data required by product-related modules and communicating with relevant technical personnel to form a document.
Requires technical accumulation and learning of new technologies-hope to have exchange activities and brainstorm in the team! Learn about the latest industry technologies and participate in industry exchanges!

Conclusion

The frontend serves as a bridge between background implementation and visual performance, and serves as a link throughout the entire product development process, A good front-end engineer can understand the requirements of product managers for user experience and the requirements of background engineers for data logic or program logic separation, and turn these requirements into front-end development work. The front-end is the facade of a website, and its value is far greater than that of other clients.