Hello！ I’m a programmer, rice noodles. At present, I am engaged in full stack development in a listed company of the world’s top 500. I once served as the leader of the front-end group of more than 10 people. I like to share various front-end technologies and have been helped before, so I will also inherit this spirit of helping others.
Grab to, even the front-end development post, also need to be able to point to PS design. I used to design and develop my own pages, and I also developed them with PHP. But now it’s much better. You don’t need to design and use it yourself, but the front-end technology has developed rapidly
Soon, there are many knowledge points. With the development of the Internet, the front-end focuses more on development. At present, the mainstream is Vue family bucket, react family bucket, node technology stack, etc.
In the face of various technologies on the market, how should Xiaobai, a front-end programmer, learn the route? People are always afraid, confused and anxious about things they don’t know. You can rest assured here. Let’s talk about it with you today, in short, so as not to take more wrongs.
- Learn HTML5 and CSS3
At this stage, it’s still relatively easy. Go online and have a look at a preliminary tutorial. Write all the relevant knowledge and examples of HTML5 and CSS3. What stage can you pass? That is, you can complete a PC page independently.
- Complete the static cut of an enterprise website independently. For example: static cut of hao123 page. At this time, remember to practice more, practice makes perfect
- Completing an e-commerce station independently can enable students to master the development process and layout standards of more complex web page effects, and achieve 100% reduction of the design draft.
- Learn to deal with the compatibility problems of relevant browser page development. This is more annoying. Just spend more time.
- Web mobile terminal development (mobile H5)
At this stage, we mainly study the static cut-off of the mobile terminal, complete it independently, restore the design draft as much as possible, and use font icons, plane conversion, animation, etc. to enrich the effect and presentation of the web page; Complete the mobile terminal and multi terminal adaptation effect.
After the first stage, we have mastered HTML5 and CSS3, which can independently complete the cut-off of all enterprise stations, complex e-commerce websites, multi terminal mobile pages, etc. and static pages on the market.
To be honest, this stage is a very hard stage when I haven’t been in contact with programming. As a little white, I have no programming experience, because our major is not computer. So at that time, it was a bit of a headache to study and self-study, but it doesn’t matter. Just stick to it.
At this time, you need to master the operations related to the browser technology, complete the development tasks according to the product requirements, such as visual effects (animation, interaction, etc.), data processing, security, performance, etc., master the DOM operation methods, be able to analyze the visual interaction requirements, design a reasonable DOM structure in combination with CSS rules, and complete the development tasks.
You’ve almost started at this stage. At this stage, we need to master the principle of Ajax and learn how to interact with back-end data; Learn to deal with common technologies such as browser cross domain, jsonp, template engine, throttling and anti shake.
It’s fairly easy here. I’ll be able to master it soon.
Why do we talk about node here JS, because the basic node JS is the mainstream front-end framework at present, including react, Vue and angular pre knowledge. The focus is to pave the main knowledge points such as NPM, package, modularization, identity authentication and CORS cross domain, so as to lay a solid foundation for learning the following react, Vue and angular courses. At the same time, I learned MySQL database, API interface project development and other back-end contents by the way, which broadened my knowledge and built a complete knowledge system at the front and back ends for better development.
Here we need to learn about vue2 / vue3. One of the most popular frameworks in China is the technology stack owned by large, medium and small factories. As long as you learn this one, you can find a good job. Here we need to learn the grammar of Vue, which is relatively simple. Here you need to master Vue knowledge, including MVVM ideas, template syntax
Calculate attribute and listener, class and style binding, condition / list rendering, event processing, component development, vuex (state management), hooks, router, etc.
After learning this, you go out to work and have no problem at all. You can complete a core project.
React technology stack is used by many large manufacturers, including bat, meituan, JD, pinduoduo, etc. Now that you have learned Vue and can be competent for any project, why learn this technology stack? In fact, I thought so at the beginning. After learning so much, I’m very tired, but the market is like this. You don’t learn from many people. After learning, you can expand your knowledge and improve your competitiveness. When you really learn it, you’ll find it delicious!
Here, you need to master the technologies of react scaffold, JSX, function components, class components, controlled components, component communication, context, component life cycle, high-level components, hooks, Redux and so on. After learning so much, make a todolist (why choose it? Because this little thing includes adding, deleting, modifying and checking, and operations needed for daily work), or practice with a small project.
It was painful at the beginning, but mastering it can really improve the development efficiency and reduce bugs. After mastering the basic knowledge and advanced knowledge points, it can be used in combination with vue3 and react.
You’ve all learned about the development of small programs here. As long as you read the documents, you can master the introduction of a small program in a few days. Here you need to master the basic knowledge points, such as small program account registration, development environment construction, basic syntax, routing and navigation, data request, subcontracting, componentization and so on.
After learning, learn again. Uni app technology realizes the development of wechat applet, which can be developed at one time and deployed at multiple ends.
Well, you have mastered the common front-end knowledge points. The above is just a general situation. If you really want to be very detailed. Here is a diagram:
So I hope this article will help you. If there are any mistakes in the article, please correct them in the comment area. If this article helps you,
You are welcome to praise and pay attention, and you will output better sharing in the future.