If you open this article, it means that you are interested in learning about the front-end industry. The following are some web front-end learning and sharing routes summarized by bloggers in 2023. If you also want to work on the front-end or have ideas in this regard , please read on!
Front-end development prospects
Getting started with the front end
Front-end development prospects
Front-end positions are indispensable in Internet companies. Whether it is Internet leaders such as Tencent, Ali, Baidu, or Internet upstarts such as Bytedance, Didi, Meituan, or small and medium-sized Internet companies, all of them need front-end positions without exception. The front-end frameworks that need to be familiar with are basically Vue, React, Angular.
So is there a future in learning the front end? I don't dare to guarantee this 100%. I can only say that for the front-end, the educational requirements are not very high, so I can't explain everything for each person's different situation. Most of the front-end, as long as there is a request to the back The interface of the end, and then the data of the back-end interface can be processed and rendered to the page. Then some problems that you don’t understand, some complex functional modules, in fact, you can basically solve the problem with Baidu, if you can’t solve the problem with Baidu, it’s not that Baidu can’t solve it, but your project itself has problems . What is mentioned here is the vast majority of cases, of course there are some strange examples, which only account for a small part.
Every road has its advantages and disadvantages. If you are determined to choose an industry, you should go on firmly!
Getting started with the front end
I believe that every front-end developer’s introduction to the front-end starts with the front-end three-piece suit: HTML , CSS , and JavaScript . These three are both the foundation and the most important thing, and the mastery of these three disciplines also determines the upper limit of the future how tall.
The first step in getting started with the front end is to choose your own development tools:
As the saying goes: If a worker wants to do a good job, he must first sharpen his tools. Once you choose a developer tool, it may be with you for a lifetime, for front-end developers. The most commonly used compilers are: WebStorm, VsCode, and HBuilder. Bloggers have used all three compilers. Take VsCode as an example. The lightweight compiler, rich plug-ins and concise interface are destined to be popular. s reason. After choosing a compiler, you need to choose a website as a web visualization tool for your front-end development. The blogger here recommends using Google Chrome, because many browsers use the core of the Chrome browser, and its compatibility is relatively good , Of course, you can also download a few more browsers, in order to consider browser compatibility issues later.
The second step of getting started with the front end is HTML+CSS:
The blogger recommends a learning video : Teacher Yuan Jin from Duyi Education's front-end zero-basic introductory tutorial, given the link: Website Portal , after finishing the Douban page that Teacher Yuan Jin explained at the end, it can be said that your front-end can basically get started. Need to do more small cases to deepen my understanding of CSS knowledge. It can be said that CSS is an advanced subject at the front end. It is also difficult to learn it in depth. If you need to remember, just go to Baidu.
The blogger recommends consulting the website : For commands that cannot be remembered, you can usually consult the information at: Cainiao Tutorial or MDN These websites can be found.
Bloggers recommend reading column : Here you can also pay attention to the blogger’s explanation column on HTML and CSS: HTML column , CSS column which introduces and organizes the detailed knowledge of HTML+CSS in detail. Welcome everyone to subscribe! ! !
The third and most important step in getting started with the front end is JavaScript:
The blogger recommends learning videos : For JS, the blogger recommends the basic grammar explanation of JS by teacher pink among the dark horse programmers . The various third-party libraries or frameworks to be learned in the future are written based on native JS, so learn JS well It is the most important thing, give the link: website portal , recently Mr. pink also launched a new JS advanced knowledge core and advanced explanation in 2023, if you are interested, you can also go and have a look, give the link: website portal , learn If you finish JS, it is best to do a few small cases with HTML+CSS to consolidate it.
The blogger recommends to consult the website : JS query website. The blogger recommends: rookie tutorial or bee tutorial . If you want to check the grammar specification of ES6, you are recommended to check Ruan Yifeng's: Getting started with ECMAScript6 .
Bloggers recommend reading columns : Here you can also pay attention to bloggers’ explanation columns on JavaScript and ES6 grammar specifications: JS column , ES grammar specification column , which introduces and organizes the detailed knowledge of HTML+CSS in detail. Welcome everyone to subscribe! ! !
After learning the front-end entry stage, you can understand and practice the basic grammar of the front-end three-piece set, and you can use developer tools to independently develop a simple website. The front-end entry can be regarded as almost learned.
consolidate the foundation
As a front-end developer, the requirements for algorithms are not very high, but you still need to know some knowledge about computers and networks:
To understand the basic concepts of the Internet, domain names, browsers, servers, etc., at least know what it is. This is the basic skill of a solid front-end programmer. It is recommended to read the blogger's article: Network and Server . Knowing the basics of the network, you also need to understand browser debugging. Knowing such code debugging is also a criterion for judging a qualified front-end programmer. It is recommended to read the blogger's article on front-end code debugging: How to debug code in front-end programming .
Although the front-end does not have high requirements for the algorithm, you should still understand it and improve your core competitiveness. If you run away in the later stage, oh no, you switch to the back-end, and it is not too difficult to learn. Of course, it depends on personal choice. The master here is just a suggestion, here you can also pay attention to the blogger's explanation column on the algorithm: algorithm and programming .
Computer basics: If you are from a major, you should study computer network and operating system courses carefully. If you are not a major, you should also spend some time to learn about it.
Basic aspects of software development: You need to understand the common design patterns of software. The most important thing is that you need to understand the use of Git version control, which is often used in later company projects. Here, you can also pay attention to the blogger’s explanation of git Columns: Git columns .
Front-end engineering
Front-end engineering is the use of software engineering techniques and methods to carry out the front-end development process. It is the standardization of technology, tools, experience, etc. Its main purpose is to improve the development efficiency in the development process and reduce unnecessary repetition time. All means for the purpose of improving efficiency, reducing costs, and quality assurance belong to engineering.
In the stage of front-end engineering, you can get in touch with the use of third-party libraries related to the front-end. The use of third-party plug-in libraries will greatly improve the development efficiency of front-end programmers. The following bloggers also shared some treasure sites for everyone to use:
CSS engineering:
CSS can be described as a front-end subject. Your front-end styles are all based on CSS, but if you have to write CSS from scratch for every project, I think most front-end programmers will spend a lot of time. Time is on the design page. In order to solve this problem, many front-end program predecessors have worked hard to develop CSS websites with many treasures. The summary is as follows:
bootstrap : A simple, intuitive, and powerful front-end development framework that makes web development faster and easier.
RGB color value to hexadecimal color code conversion : a tool for color selection.
CSS button design : CSS button style design.
Button Effect : Design many button styles to make your page more colorful.
Wave Generator : Sets the CSS style of the wave.
Smooth Shadow : CSS smooth shadow style is set.
Shadow Generator : Sets the CSS shadow generation style.
Wait, there are a lot of websites with CSS styles, here are some typical examples for the bloggers, if you use these websites well, your own websites will definitely be filled with more brilliant colors! I hope everyone can apply flexibly.
JavaScript engineering:
JavaScript is an interactive subject on the front end. What kind of action you can make depends on the implementation of JS. Although native JS can also achieve some functions, the efficiency of manipulating DOM is too low. For this reason, JS has launched a special DOM manipulator. Third-party library: jQuery. This third-party library has greatly improved the efficiency of front-end operations on native DOM. This library was relatively popular in the past few years, but it began to decline with the change of the times. Of course, many companies still use jQuery in their old projects. It is best to learn from your own vision.
Bloggers recommend learning videos : here is the jQuery video explained by Mr. Pink, and the link is given: website portal .
Bloggers recommend querying websites : Here you can take a look at the knowledge explained by W3c, and give a link: Website Portal .
Blogger recommended reading column : Here you can also pay attention to the blogger's explanation column on jQuery: jQuery column .
Framework engineering:
Framework engineering is also born out of JS engineering. In the front-end engineering stage, you need to learn and master at least one mainstream front-end development framework (Vue / React), and know how to cooperate with scaffolding, component library tools, etc. to build independently from 0 And develop a complete front-end website, you can refer to some classic cases and some well-known websites for imitation, and feel the advantages of front-end engineering.
There is not much requirement for the order of framework learning. Compared with React, Vue is relatively simple, which is in line with the development and programming habits of domestic people. It may be a good choice to learn Vue first, but because of the simplicity of Vue, what it brings is The salary of a developer who knows React will be higher than that of a developer who knows Vue, of course it depends on personal choice.
The Vue framework learning route is summarized as follows
The blogger recommends learning videos : here the blogger recommends first watching the full set of Vue video tutorials explained by Mr. Pink from Dark Horse, and giving the link: Website Portal . This set of tutorials explains the basics, and then read the explanations by Mr. Zhang Tianyu from Silicon Valley From entry to proficiency in vuejs, link: website portal . The Vue explained in this set of tutorials is relatively low-level. It is recommended to read Vue once in both sets of tutorials before you can say that you can get started.
The blogger recommends querying the website : here you can look at the official document of vue, and give the link: website portal .
Blogger recommended reading column : Here you can also pay attention to the blogger's explanation column on vue: vue technology stack .
The React learning route is summarized as follows
The blogger recommends learning videos : Here, the blogger recommends first reading the React zero-basic introductory tutorial explained by Mr. Pink from Dark Horse, and giving the link: Website Portal . This set of tutorials explains the basics, and then read the explanation by Mr. Zhang Tianyu from Silicon Valley The React tutorial, given the link: website portal , the React explained in this set of tutorials is relatively low-level, and it is recommended to read the two sets of tutorials before you can say that you can get started.
Bloggers recommend querying the website : Here you can take a look at the official documentation of react and give it a link: Website Portal .
Blogger recommended reading column : Here you can also pay attention to the blogger's explanation column on react: react technology stack .
This stage of front-end engineering can be said to be the core focus of the entire front-end. It requires everyone to carefully polish and accumulate, strive to complete several projects, and combine Git to put their projects online on the open source warehouse. Only in this way can we let ourselves technology has been steadily improved.
Advanced front end
Due to the serious involution of the front-end industry, many companies now require you to know some other front-end essential skills, as follows:
Many companies now require the front-end to master nodeJS, and now the following learning route is given
Node.js does not require you to learn how deep it is. At least you can understand the express framework and write a set of interfaces independently. Of course, if you want to develop in the direction of full stack, you can use node.js Learn more deeply, so that the pressure of learning other back-end languages in the future will be less.
The blogger recommends learning videos : The blogger here recommends a full set of introductory tutorials for Node.js by Mr. Dark Horse Liu, with a link: website portal , courses as framework pre-courses, focusing on laying the groundwork for npm, packages, modularization, identity authentication, Main knowledge points such as CORS cross-domain.
Bloggers recommend querying the website : Here you can take a look at the Node.js article explained by the rookie tutorial: Website Portal .
Blogger recommended reading column : Here you can also pay attention to the blogger's explanation column on node: node column .
Now many Internet companies' projects are beginning to use TS to replace JS, so learn TS to improve their core competitiveness, as follows:
For TS, bloggers suggest that you should study hard. Many Internet company projects have begun to replace JS with TS. If you know TS, you can reduce some resistance to work in the company in the future.
Blogger recommended learning video : The blogger here recommends Dark Horse’s TypeScript zero-basic introduction to practical full-set tutorials, with a link: website portal , learning TypeScript from scratch, no engineering configuration is required when getting started, and there is no learning burden at all.
Bloggers recommend querying the website : Here you can take a look at the TypeScript article explained by the rookie tutorial: Website Portal .
Blogger recommended reading column : Here you can also pay attention to the blogger's explanation column on TS: TS column .
If you want to develop towards the mobile terminal, the WeChat Mini Program is a good choice, as follows:
For small programs, the company’s requirements are not very high, because small programs are basically a stitch of Vue and React, and many functions are relatively simple to implement, so getting started is relatively simple, and interested friends can also learn it.
Bloggers recommend learning videos : Bloggers here recommend Heima’s WeChat mini-program explanations, giving links: website portal , courses such as mini-program account registration, development environment construction, basic grammar, routing navigation, data request, subcontracting, componentization, etc. The basic knowledge necessary for small program development is elaborated in detail.
The blogger recommends querying the website : for WeChat applets, it is recommended to check the information or refer to the official document, and give the link: the website portal .
Blogger recommended reading column : Here you can also pay attention to the blogger’s explanation column on WeChat Mini Programs: Mini Program Column .
If you still want to go further in the front end, it is recommended to learn the knowledge of network security and form a front-end security system in combination with your own front-end direction, so that your core competitiveness can be improved. Of course, some front-end optimization knowledge is also needed. If you know a little bit, at least know some basic front-end optimization methods, etc., the blogger will publish a column to explain the knowledge of front-end security in the later period, please look forward to it! ! !
Front-end job search
Compared with previous years, the current employment prospects in the front-end industry have begun to decline. In the past, you can only find an internship with a jQuery framework for front-end help. I don’t even have the desire to look at your resume, so for the current front-end employment, job hunting is a long process. It is recommended to stretch the front and prepare as soon as possible .
Natural selection, survival of the fittest. If any industry does not work hard enough, it will eventually be submerged in the rolling torrent of history. If you want to get out as soon as possible, you must always maintain a state of humility , knowledge , persistence , and enthusiasm . The following are some small tips prepared by bloggers for front-end job seekers. I hope everyone can find a job that they are satisfied with, and strive for everyone to hit the big factory! ! !
Learning video recommended by the blogger : The video recommended by the blogger here is the front-end high-frequency interview explanation of Jindu Education, and the link is given: Website Portal
The blogger recommends the query website : If the website is interviewed and queried, the blogger recommends Niuke and gives the link: Website Portal
Blogger recommended reading column : Here you can also pay attention to the blogger’s explanation column on interviews: tearing interview questions by hand
After reading the interview questions and mastering the theoretical knowledge that I forgot before, I still need to practice some topics. Programming is not something that can be learned only by theory. You have to practice more and more to form your own muscle memory. Be able to handle any problem with ease, without being overwhelmed.
Bloggers recommend website for brushing questions : Here, I personally recommend Likou and Niuke. There are many types of questions in it, and there are also explanations of answers from other big guys for brushing questions, which are mutually confirmed with the answers I wrote. In this way, I think improvement is still quickly.
Blogger recommended reading column : Here you can also pay attention to the blogger's front-end brushing questions explanation column: Front-end brushing questions .
Front-end future
From the front-end position, because of the nature of the front-end work, as long as there is an Internet company, there must be a front-end. The mobile Internet continues to develop, front-end development technology is also improving, and the front-end application market is becoming more and more extensive. Front-end development is now moving towards engineering development. Whether it is a large or small company, the demand for front-end development is increasing and becoming more and more professional.
Generally speaking, the prospect of this industry is very broad. You can also take a look at the company's recruitment needs for the front-end, etc., and learn more about the requirements of the Internet companies for the front-end industry, so as to avoid blind self-study:
The above are some requirements for front-end engineers of some Internet companies. You are asked to work instead of paying a price to train you. No matter how turbulent the future is, hard work is the right way to go ashore.
write at the end
The above are some experiences summed up by bloggers self-studying front-end for a year. Although it is not particularly accurate, it can at least give a reference to the front-end Xiaobai who just entered school. Because the front-end technology is changing with each passing day, the blogger will update and revise this article every year. , and strive to conform to the current state of social development. Next, I will summarize the questions that some people may ask as follows, and share my experience with you:
Is the front end difficult ?
Compared with the back-end language, the front-end is relatively simple, and you don’t need to consider too much algorithm knowledge. If your programming ability is not particularly good and you want to work in the programming industry, the front-end can be said to be a good choice.
Is the front end good for employment ?
In recent years, due to the large number of programmers output by training institutions, the front-end is now a bit saturated. The large number of people has led to higher requirements for talents. If you want to work on the front-end, it is recommended to prepare to learn multiple technologies early so that you can not was eliminated.
To what extent can the front-end learn to practice ?
The front-end three-piece set must be learned, or at least you must be familiar with and master a set of front-end frameworks Vue or React. The company’s requirements for the front-end shared above are also easy to see, and then you must have some project experience, at least I can complete a project by myself, and this level can almost meet the work standards. If you want to improve your competitiveness, it is best to learn more about other relevant front-end knowledge.
How about the front-end salary ?
Since the front-end is relatively simple compared to the back-end, the salary of the back-end is generally a little higher than that of the front-end. Of course, if you have a lot of project experience, you can still get a high salary.
Since you want to choose this industry, then redouble your efforts to catch up with the predecessors and surpass yourself. The harder you work, the luckier you are, and I will give it to many novices who are new to the IT industry to encourage each other!
