Take a look at how Ali God sums up the web front end
1. Why study front-end development?
You may have a sense of accomplishment in completing a website, page, or function because of interest. You may also be because the front-end jobs are hot and the employment rate is high. No matter what the reason, just find the target and learn!
2. What is Web front-end development? Is there a "money" way?
Look at a picture first
The average monthly salary of senior front-end R&D engineers in Beijing is 29.3k , and Shenzhen also has 15k, and there is already a "money" route.
What does the front end do?
(1) Definition: Front-end development is to implement the interface designed by the UI designer, that is, to use some front-end languages (HTML, CSS, jQuery, etc.) to turn the UI design into a web page that can interact with users;
(2) Job responsibilities: Participate in the prototype requirements discussion meeting, and put forward some suggestions and opinions from the perspective of front-end and user interaction; communicate with the product manager to confirm the prototype and requirements; communicate with the UI designer to better implement the interface; and Back-end developers communicate to realize data interaction; cooperate with testers to solve bugs; cooperate with the entire team to develop subsequent iterations of the project;
(3) Front-end engineers are currently in hot jobs. As long as they master the real front-end knowledge, rather than talking in general terms, finding a job is relatively easy, and the salary is relatively considerable. Of course, just getting started, my advice is not to pay too much attention to salary, the most important thing is whether there is a good environment and platform to learn more. When you learn more on a good platform with a good environment and accumulate certain experience, the salary is really simple. Don't be defeated by the meager salary at the beginning and give up. If you really want to get into this business, stick to it. Looking back in the future, you will find that everything is so simple and clear.
3. Study Suggestions
Before you start learning, there are some small suggestions. According to my own learning experience, these suggestions are very helpful now and even in my future career. Also, before you start learning, it is recommended to spend a few days to find some articles on how to get started, through many articles and suggestions from predecessors. Sort out a complete set of plans suitable for your study, and then make some plan adjustments during the learning process after you have a better understanding of the front-end.
For example, learn according to a mind map first, and then make a route according to your actual situation
I believe that learning under such a plan is much faster and more effective than just starting to learn specific knowledge.
1. Suggested learning steps
(1) HTML tags (webpage structure markup language) + CSS style (webpage style language). They are the most basic languages for implementing static web applications. If you master them, you can write a simple module (such as navigation, etc.) or even a complete static web page.
(2) Jquery library (a must master library of Javascript programming language). It can make the static webpage you made before "live", such as (drop-down secondary menu, expansion of tool navigation on the right side of the page, etc. interactive special effects).
(3) It is recommended to take the time to read the book "The Art of DOM Programming", or such books. It is about the application of the Javascript programming language in web development. Following this book, you can write a simple interactive website.
The above points are the things Xiaobai started to learn. It is recommended to learn these three languages in order. You can use the sublime editor for hands-on writing. When you
complete a small website according to the learning steps , you will feel a sense of accomplishment, and subsequent learning will be more confident and more interested.
2. Improve our basic knowledge
(1) HTML5, a more advanced markup language, with more colorful functions. Add many new tags, such as canvas, video, etc., you can implement more animations, cool special effects or play videos by yourself.
(2) CSS3, a more advanced style language. You can achieve rich and colorful page animations. It is not necessary to use js every time. Using CSS3 can easily and conveniently achieve some desired web page interactions.
For example, using CSS to draw a love for a girlfriend, the friendship will last forever~
(3) The most important, javascript programming language. This is a language that the front-end must master and can be regarded as a programming language. Learning to use javascript flexibly will be of great help to future study and work. The most important thing to master it is to learn the basic knowledge first, and then through continuous actual combat to improve our programming skills and logical thinking. This piece of learning is continuous until we truly master it and can use it flexibly. If after the first study or two, we find that there is no room for improvement, we can let it go temporarily. Continue the following learning, JavaScript runs through our front-end work, and will be encountered and exercised in the subsequent learning and implementation. It’s not difficult to really learn, the key is to use it flexibly.
(4) Start to learn to use some front-end frameworks. Here I mean the front-end UI frameworks. They can help us develop a website quickly and efficiently, and the interface style is also good. For example, Bootstrap on the PC side is actually a responsive framework. It can also be used on the mobile H5 page, or AmazeUi, which is a framework that focuses on the mobile side. You can view the documents on Baidu or on the official website of the corresponding framework. When you learn to use a certain framework, you will find other n+1 various front-end UI frameworks at your fingertips.
(5) There is also a front-end framework, such as layui, which can be regarded as a tool framework. It contains paging effect, pop-up window effect, date selection control and so on. When you learn this time or later, you can learn how to use it, which can help you complete the development of the project more efficiently.
(6) Through Baidu, you can find many webpage interactive special effects plug-ins, such as secondary menu drop-down special effects, accordion menu, picture carousel, pop-up window effects, etc. Downloading their source code and examples, hands-on learning to use or imitating their effects, can help us quickly implement some more complex interactive special effects. Now there are a lot of free and open source plug-ins, so that we don’t need to reinvent the wheel, and it’s very convenient to use them directly. Of course, my suggestion is that when you learn to use a special effects plug-in, you can learn its source code and see how the effect is achieved. This is also a good way to consolidate learning javascript language, you deserve it.
After you can complete a basic page with interactive effects, participating in the work to further improve yourself is to master some popular front-end development JS frameworks and efficient and popular development models. I believe that at this point, you have successfully entered the front door, and the next step is to practice how to become the main front-end engineer at work.
Four. Some commonly used front-end JS framework suggestions
(1) vue.js , a JS framework that is biased towards mobile, lightweight. Data-driven interaction is very easy to learn. It can be used independently of the Jquery framework to help you develop a friendly mobile interface. The necessary skills for a front-end development, a popular JS framework. For how to use and master it, you can use Baidu, or go to its official website to learn official documents, or the rookie website also introduces it.
(2) react.js , compared to vue, it is a bit more complicated and heavier, but it is also very fast and convenient to implement large projects. Mastering it has also become an entry requirement for many companies. I believe that after learning a data-driven framework such as vue, it will be much easier to learn this. Compared with the usual jQuery development projects, the key to the development of vue and react is that the thinking will be changed. Mastering object-oriented and data-driven interaction will make you feel that development is easier and friendly. How to master it, Baidu, Cainiao website, official website documents are all good choices.
2. Suggestions for more popular development models
(1) Vue + webpack integrated development
(2) React + webpack integrated development
(3) Node.js learning and application, a tool that can use javascript language to develop the background
(4) Weex + webpack integrated development, currently rarely seen by companies
(5) Angular.js, which is similar to vue.js, but it is rarely used at present
The above development framework and development model (1) (2) (3) are adopted by many Internet company teams. It is worth studying in depth, and when you master it, you will find that developing front-end projects can be as simple as that.
Keep learning and keep improving
The above articles are some suggestions. Of course, throughout your study and future work, you may also learn to master some other necessary skills. Such as:
(1) It is important to learn Baidu.
(2) Learn how to cut the UI design file PSD (required skills, learn to see the design drawings delivered to you by UI design).
(3) Learn to use the F12 developer mode of Google or Firefox to quickly debug and find problems during the development process.
(4) Learn to coordinate with the background to debug the data interface, and solve some cross-domain problems (such as: nginx configuration and use).
(5) Learn to use different best development tools (sublime, editplus, hbuilder, vsCode, etc.) for different projects.
(6) Learn to use version control tools (such as svn), a good tool for you to work closely with your team.
If you learn these well, you can read the interview questions from Dachang, the more popular interview questions
It is possible to enter the big factory if you are well prepared
5. After joining the work, some suggestions
(1) Recognize the responsibilities of your position.
(2) Cooperation with product managers: understand the prototype and requirements, and put forward their own reasonable suggestions.
(3) Coordination with UI design: According to how the UI plan is implemented, it is the best and optimal way, instead of holding the design drawing and working hard to make better suggestions.
(4) Cooperate with other front-ends: At this time, the code specification is particularly important, so from the beginning of learning the front-end, I emphasized that it is very good and necessary to form good coding habits at the beginning of learning.
(5) Self-preliminary test: After completing the development of a project, perform a functional preliminary test by itself, and then deliver it to the tester for testing after no problems.
(6) Cooperate with testers to modify bugs.
(7) Actively cooperate with the subsequent iterations of project products.
(8) When your level is further improved, you must learn to manage a front-end team for work distribution and overall quality and delivery time control. This is a step-by-step improvement, although you may not have access to it now, but you can learn about it.
Finally , ①mind map; ②source code; ③interview questions and other pdf documents involved in the article are all free to share, as long as you support me!
——You can directly click here to see all the contents of the information packaged for free.