Start the big guy's performance
I have been engaged in front-end development for almost 3 years, and I have accumulated a certain amount of theoretical and practical experience from a little white who knows nothing, and I also have a review of the learning and practical process in the past 3 years for later details. Reminiscence taste.
1. Why choose to learn 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 it is, just find the target and learn!
2. What is Web front-end development? Is there a way to "money"?
(1) Definition: Front-end development is the realization of the interface designed by the UI designer, that is, using 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) "Money" path : 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 considerable.
Of course, if you are 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.
1. How to get started, 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, and pass the suggestions of many articles and 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 . I believe that learning under such a plan is much faster and more effective than just starting to learn specific knowledge.
-
Code specification : It's not that Xiaobai's period is not important. It is when you don't understand anything, you must strictly implement the learned specifications. Gradually, wait until you have learned something, and gradually form a set of your own code style.
-
Handwritten code : At the beginning of learning, it is recommended to write code, even if there is only one line of code, type a letter and a space.
-
Hands-on operation : even if there is only one line of code, you must write and run it manually instead of being expert and low-handed. Oh, it's so easy, so you don't have to do it.
-
Lay a good foundation : Only when the basics are laid in the novice stage (such as HTML, CSS, Jquery), the subsequent advanced difficulties can be better overcome.
-
Perseverance : At the most difficult moment, persevere, the sky will be completely different
-
Make a plan : make a corresponding plan and implement it strictly, otherwise the general learning effect will be greatly reduced
-
Keep your feet on the ground : There is a lot of knowledge to learn and master at the front end, and you need to follow the plan step by step, from easy to difficult
The above is a summary of personal learning. If you can follow it well, the learning effect and follow-up advancement will be of great help. Of course , the method that suits you is the best .
Second, how to learn at the novice stage
At this stage, you should know nothing, maybe you don't even know what the front end is probably doing. Maybe I just heard that this position is hot and it is easy to find a job, so you want to study. Or maybe you see a beautiful web page, you start to be curious, feel that it is a beautiful thing to realize it, you want to know how to make it. If you want to know how to get started, you can take a look at the next suggestions and comments. This is some experience accumulated through the self-learning stage of Xiaobai to the competent front-end position, I hope it can be helpful.
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 library that must be mastered in the Javascript programming language). It can make the static web pages you made before "live", such as (drop-down secondary menus, expansion of tool navigation on the right side of the webpage, etc. interactive effects).
(3) It is recommended to take the time to read the book "The Art of DOM Programming" or this kind of book. It is about the application of Javascript programming language in web development. Following this book, you can write a simple interactive website.
The above points are what 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 step (3), you will feel a sense of accomplishment, and subsequent learning will be more confident and more interested.
3. Preliminary suggestions for advanced learning
I believe that after the previous exploration, if you can stick to it and learn according to the recommendations, you should have completed the first DIY website. Here are some suggestions for preliminary advanced learning.
Improve our basic knowledge
(1) HTML5, a more advanced markup language, with more colorful functions. Added many 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 colorful page animations, it is not necessary to use js every time, using CSS3 can easily and conveniently achieve some desired web page interactions.
(3) javascript programming language (the top priority). 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 continued 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 subsequent learning implementations. It is not difficult to understand the real learning, 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, and 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 documentation 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, and so on. 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 we don't need to reinvent the wheel again, it is very convenient to use 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.
(7) At this point, you have basically mastered some knowledge and skills of front-end development. You can find some typical official websites to imitate their interface and interactive special effects, such as Jingdong official website, Taobao official website and so on. Carefully write a few such official website homepages, you can further consolidate and improve the knowledge you have learned before.
Four, continue to learn
After you can complete a basic page with interactive effects, you need to master some popular front-end development JS frameworks and efficient and popular development models to further improve yourself when participating in the work. 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.
1. 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. A necessary skill for front-end development, a popular JS framework. For how to use and master it, you can Baidu, you can also go to its official website to learn official documents, or the rookie website also has an introduction.
(2) React.js, compared with vue, it is a bit more complicated and heavier, but it is also very fast and convenient to implement large-scale 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 the 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 seen and 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 so simple.
Keep learning and keep improving
The above articles are some suggestions for getting started. Of course, throughout your study and future work, you may also learn to master some other necessary skills. Such as:
-
Baidu is very important.
-
UI design file PSD cut drawing (required skills, learn to look at the design drawing delivered to you by UI design).
-
Use the F12 developer mode of Google or Firefox to quickly debug and find problems during the development process.
-
Cooperate with the background to debug the data interface and solve some cross-domain problems (such as the configuration and use of nginx).
-
Different projects use different best development tools (sublime, editplus, hbuilder, vsCode, etc.).
-
Use version control tools (such as svn), a good tool for you to work closely with your team.
In the end, after seeing so much learning content, are you almost giving up, but don't worry. Getting started is very simple. After the getting started guide is done, the follow-up will become easier. These are some techniques, some tools, just master it. The real difficulty is teamwork at work, code specification, and continuous improvement.
Five, after joining the work, some suggestions
(1) Recognize the responsibilities of one's own position.
(2) Cooperate with product manager: understand the prototype and requirements, and put forward your own reasonable suggestions.
(3) Coordination with UI design: The best and most optimal way is based on how the UI plan is implemented, 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, self-conduct a functional preliminary test, and then deliver it to the tester for testing after there are 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 to distribute work and control the overall quality and delivery time. This is a step-by-step improvement, although you may not have access to it now, but you can learn about it.
At the end, if you also want to learn front-end development technology now, if you encounter any learning problems in the entry front-end, or lack of learning materials, you can apply to join the front-end skirt: front: 953 middle: 352 last: 883. In the group, there are front-end beginners like you, and there are front-end bosses who can consult and learn. There are documents in the data skirt of this article that can be shared for free, and there are more html, css, JavaScript, Vue, etc. information and interview question documents to share.