01 preface
Recently there are a lot of beginners in the background message said: “I am a small white, how can quickly start the front end ah?” . It’s not an easy question to answer, because it’s like saying I’m a pauper how to get rich quick. But it is not without a way to answer you this question, after all, master a knowledge point or its path, can not say the path is the same, but at least can refer to.
Next, I will be a beginner but is not a beginner’s point of view to introduce the front end of the people’s tool library exactly what, how to quickly help you comb knowledge points, quick entry (master on their own).
02 Basics
Said the basic entry, in fact, is really very basic, I began to come over so. Nothing more than to start with the simplest HTML/CSS, at that time everything had to knock on their own, which is now so convenient component library! Can only say that now we are too happy, the so-called predecessors plant trees, descendants enjoy the shade. But don’t forget how trees are planted.
- Novice tutorial
You probably know this site, it’s a beginner’s Gospel, it’s got everything, but it’s very basic. We must not think that the foundation is not hard to learn, just like the university to learn the subject, with the basic two words of the book is often the most difficult. It can be said that the front end of the friends if you go through the above about the front end, you will get started. Time is ok probably one to two weeks, and also be to do not have what difficulty, if you are section of one’s previous experience, that is easier to enter.
- W3school
This is actually about the same as the rookie tutorial, but also the basic tags and other knowledge points, I think it is good to see the rookie tutorial, we can also understand.
- For class network
This is really my enlightenment site, and although it’s not used much anymore, it’s always number one on my favorites list. No reason, just for a feeling. This website was recommended by one of my senior students before I went to university. At that time, I mainly learned c++ courses, but later I went to learn front-end (because it was easy).
There are a lot of courses that are paid for, but there are also good free courses that you can go to if you don’t want to read a book or a course.
- MDN
This is also a more basic document, the content is a little deeper than the first two, knowledge explanation is also more in place, usually refer to the time can be used as their own document, the layout of the site I think is good, knowledge classification page is very organized.
03 Advanced exercise
When you learn the basics, you should learn some interesting technologies. For example, Vue and React are popular front-end technologies, which are required to learn, because you will not find a job if you do not master or use them.
- Vue.js
This is a very easy front-end framework to get started with, if you’ve already gone through the basics. It also has a very complete environment and ecology, as well as many supported component libraries, which will be described later. So I strongly recommend you to learn this framework, to be able to write a simple effect and so on, find the front end of the fun.
- Vue CLI
Also talk about Vue’s scaffolding tools, which allow you to quickly generate a Hello World project and then develop it quickly and focus on the business. Usually used is more.
- React
I’m not very familiar with react stack, so I just stick to documents. However, I have done simple demo, and I know the ideas of reference components and service separation. Personally, I think they are similar to VUE.
- Node.js
Thanks to the emergence of Node.js, front-end engineers have entered the server-side development like adding wings to a tiger, making JavaScript a language that can run on the server side. Previously, our back-end was written in the mainstream Java, Python and other back-end languages, but now we can write in JS. It’s exciting to think about it. There are also two mature frameworks that make it easy for the front end to develop full-stack applications, like Express and Koa.
- Webpack
If you want to fully understand the WebPack packaging tool, you will have to read its documentation. There are a lot of webPack properties that you can configure, you can know what each configuration does, and you must pay attention to the version when using it. Many weird errors can be solved by downgrading. If you want to explore the principle, optimization, etc., you can read the book “Simple Webpack”, you will understand a lot of knowledge.
04 Exquisite component library
Ok, here comes the part I want to introduce most, in fact, this is more convenient for our front-end daily business needs. To put it bluntly, it frees up our front-end development, no need to write complex CSS or HTML, out of the box. Thanks to the front-end community for their tremendous contribution.
- Element-ui
I like this component library very much, because some of the functions are basically able to meet my development needs, but also very easy to get started, direct CDN introduction or NPM installation, you choose. The most important thing is to cooperate with vue.js for project development.
- Ant Design
This is produced by ant Financial front end component library, is also very easy to use, say more is not as good as everyone to experience, it is also support front end framework use, and now version 4.0 has been released.
- Bootstrap
This is the first front-end component library I used. At that time, WHEN I discovered it, I felt that the world suddenly opened up a lot, because I have been in touch with this since I started to get basic knowledge. It was recommended by a front-end sister. Although now basically has not used, but still that sentence, feelings, also recommended.
- Fly ice
It seems that this UI component library is recommended by many people. It is the front-end component library developed by Ali. I have not used it.
- Cube UI
This is a front-end component library developed by Didi. It also supports vue. js syntax. I have not used it, you can also know about it.
05 small program development
Recently also do small program development related work, in fact, small program development is now a lot more convenient, because there are a lot of small program framework, the next introduction.
- The official development
This is not too much introduction, after all, is the big brother, and the official support of the WeUI component library, is also very convenient.
- uni-app
This is the development of a better small program framework in recent years, not only can develop small programs to achieve multi-terminal development, but also can be compiled into APP, think of people are moving. More importantly, it also supports VUE syntax, which is not too cool.
- Uni-app plug-in market
Speaking of Uni-App, we have to mention its plug-in market, which is just as convenient as shopping for vegetables in the grocery market. It is also free. But also look to see if there are some compatibility issues, etc. If you have any problems downloading plug-ins, don’t spray them, because everyone is contributing to the community, and we should encourage the authors.
- uView
This is a comment from a gold-digging friend. I just found this website and found it very good. According to its official website, this is the best UI framework of UniApp ecosystem, with comprehensive components and convenient tools that you can easily use, like a fish in water. I have not yet started to use, you can try, should be good.
- Taro
This is a small program framework developed by JINGdong, its introduction is a code, more than run, I used once a long time ago, forget what feeling. You can also go to the official website to know, maybe not fall in love with this framework!
- mpvue
This is a small program framework developed by Meituan, is also support vue.js syntax, and it also supports the life cycle of small program, that is, vue life cycle and small program are applicable.
- vant-weapp
Recently using MPVue development small program is also the use of this component library for development, have to say that this is a very good component library, the components are very rich, to meet our business development needs.
- View UI
It is also a high quality UI component library based on vue.js. I have to say that now the component library is too rich, it is the good news for our front-end people, now the front-end is also more and more focused on the development of experience, with components to make the user experience instantly become very friendly.
06 Useful Tools
Speaking of tools, here is the introduction of front-end people will use front-end tools, we must have a good collection.
- postman
This is an interface debugging tool, because the front and back end often have interactive operations, the use of this tool can be very convenient debugging, but also know where the problem is, it supports a variety of request methods for debugging, can also carry out a variety of operations such as value transmission.
- Google Chrome
Google Browser has a very high market share, because it not only has a good browsing experience, but more importantly, it has a very good debugging function. I introduce Chromium browser here, which is the same, click to download.
- Color conversion
This is a color conversion tool, very convenient for your color value. I have been using this one before, but recently I found that the screenshot function of QQ can also absorb color, directly CTRL + C can get hexadecimal color, it is not too cool.
- navicat
Navicat is a database management software, you can easily view the various tables in the database data and so on, but this is a charging software, we need to see the situation. Or you can find some way to use it, just keep it out of the way.
- WEBPAGETEST
This is a site testing tool that can see the details of the time you spend requesting a site and can be used to optimize your site. But I don’t use it that much. I just stumbled on it.
07 Excellent blogs
There are a lot of good blogs out there. Here are a few that I think are good ones.
- Nguyen half-stretching
Ruan teacher’s blog is also let me benefit a lot, also learn a lot of useful knowledge points and life truth, above also recorded ruan teacher’s log experience, etc., it is worth everyone to see.
- Technology of fat
There are a lot of free videos on react. I think the react video is very clear and definitely helps a lot of people get started.
Front-end people should know the site and tools are about to say, the following talk about zero basis small white learning web front-end in the end to learn what? How to learn
1. Programming tools
First introduce programming tools, there are many programming tools available in the market at present, all kinds. But programming tools are all about programming code quickly and easily. Almost any programming tool can do this. Therefore, I think I can choose programming tools according to my own preferences, and choose which one is more convenient to use. For example: Sublime, Webstrom, VS-Code,HBuilder, etc. are great choices, and I personally prefer vS-Code and HBuilder. The reason why programming tools are relatively fast, is because programming tools have the function of code prompts, so for beginners, it is not recommended to use the above several programming tools, beginners must be able to skillfully write their own code, complete, here recommends another code awareness function. EditPlus is a great programming tool for beginners. The installation package of each programming tool can be downloaded and installed on its own website.
2, HTML + CSS + HTML + CSS 3
Learning the front end is the first to learn HTML + CSS + HTML5 + CSS3 these are the basic part of the front end comparison, the difficulty coefficient is low, basically there is no difficulty, mainly the use of some tags and attributes and the construction of the page layout. These are also entrances to the front end of learning. Many beginners will be skeptical when they learn these things. They all look Like English words. My English is not good enough to learn. This is also a place where many self-learners begin to doubt themselves when they encounter difficulties in learning. Once again, the result of doing something has nothing to do with the event itself, but with various reasons in the process of doing it. Friends who do programming will know that in fact, although the code of programming is composed of English letters, but the relationship with English is really not very big, zero basis learning to achieve the level of employment, you can put aside the burden of English. Completely in accordance with the logic of learning programming thinking, HTML + CSS English words are more, on the basis of understanding more to operate naturally can also be skilled.
3, JavaScript,
When you have learned HTML + CSS + HTML5 + CSS3, then it is recommended to find some materials, write more comprehensive static pages to consolidate their code practice ability. When you can write comprehensive static pages independently and skillfully. It’s time to move on to JavaScript and ES, but don’t forget to take some time to review what you’ve learned before as you learn JavaScript. Never learn the back and forget the front.
JavaScript, referred to as JS, is the core of the front-end technical knowledge. Is also a lot of beginners in the process of learning the front of the block, a lot of self-taught people learn js here can not go to school, give up a lot of. If you are reading this article and feel that it is difficult to learn here, I hope you stick to it and wish you success.
JavaScript is ubiquitous in front-end development, which is the difficulty and focus of front-end technology. Although a lot of enterprise development is based on the mainstream technology framework in the development of the front end. But the underlying implementation principle of the technical framework is still native JS. To make a big leap forward in technology, don’t forget about native JS and js extensions like ES6.
JQuery and Ajax
And learning HTML + CSS part of the same truth, when you finish learning JS must be js and front-end learned HTML + CSS + HTML5 + CSS3 combination. Do some comprehensive case exercises. For example, to write some comprehensive static website and so on. When learning to program, it’s important to remember that practice is key and important. Don’t “see it, do it, lose it”. Learning must exercise their ability to operate independently.
Once you’ve mastered JavaScript and practiced it, you can move on to the next point, which is JQuery and Ajax. JQuery is a library of tools that has contributed a lot to the development of the front end. JQuery is a technical tool library packaged on the basis of native JS. It is also necessary to learn about it in front-end development. At this point in the development of front-end technology, many people may think that JQuery is gradually becoming less and less used, whether it is obsolete, whether it can not learn. According to my development experience in the programming industry, I suggest you take a good look at this tool library, some ideas of JQuery is still very good, and in the actual development, there will be more specific needs to do the selection of technology, master a technology, for your future work will also be very helpful.
5, style frame (the bootstrap, elementUI, layUI)
My advice to you is always the same: Take the time to apply everything and do some practical exercises. Arrived here front-end knowledge point almost learned half, behind is some technical framework. Here, first of all, suggest that we can learn some style framework, such as the bootstrap, elementUI layUI… And so on. The style framework is primarily a wrapper around HTML + CSS. Many style effects are encapsulated within these frameworks. Do not use HTML + CSS to call the original code, direct use can be. The use of style framework is very simple, you can refer to the corresponding official website to learn, here is not repeated.
At this point, I believe that many people will have questions, natural style framework is packaged, why should learn HTML + CSS + HTML5 + CSS3 these basic knowledge points. Here I tell you a law “the foundation is not firm, the earth shakes”. Only use the style framework, the style framework research is very thorough can also meet the basic development work, now in the enterprise is also in the use of the framework in the development. However, if there is no foundation, it is a state of “knowing what is, not knowing why.” There are great obstacles to their future advancement in technology. Moreover, the style features encapsulated in the style framework do not meet all requirements. Sometimes you have to adjust according to your needs. Therefore, the foundation and the framework are very important, to master.
6. Vue family bucket
In addition to the style framework, there are a lot of front-end technology framework, here are two more mainstream, in the process of learning must focus on mastering the use of this framework. When learning the two frameworks, we must have a good grasp of webpack technology. Proficiency in the use of these technologies would also be of great help in terms of employment and development. The first and to say the technical framework is VUE, which is currently compared to the mainstream of the front-end technology framework. VUE is based on the component development model, very popular with programmers. And it’s being used quickly in the development industry.
7. React Framework
The second front-end framework I’ll introduce is React. This technical framework is also highly used in enterprise development today. It is mainly used in some large enterprises more common. However, each enterprise will have differences in the process of technology selection. The specific use of a technical framework in enterprise development depends on the needs of the enterprise.
8, node. Js
If you’re a front-end programmer and you don’t know back-end programming languages like PHP or Java, and you want to build your own services, then it’s recommended to learn Node.js, which is a good choice. Node.js is JavaScript that runs on the server. If you are familiar with JavaScript, you will easily learn Node.js. Of course, if you are a back-end programmer and want to deploy some high performance services, then learning Node.js is also a great choice. Learning Node.js will help you get a better understanding of the interaction between the front and back ends.
Version Controller (SVN/Git)
When you put the front of the eight major content all learn and master, for the front-end technical knowledge points, about the same. But in the actual development, basically is a team collaborative development, so in the development process and how to share their own code with the development team members, this time to learn about the project management. In development, two version controllers are usually used to solve this problem, one is SVN or Git, and either one can be used. Git is one of the most widely used, depending on the choice of development teams in enterprise development.
10, small program development
When you finish learning the knowledge points of the first nine modules, do you think the technology of the front end is finished? Secretly tell you, not yet, technology is constantly with new, after learning the technical knowledge of the first nine modules can basically meet the basic development needs of enterprises. But in recent years there has been a very hot technology, is small program development. Small program development is a module with more development potential. As a front-end developer, it is very necessary to master the development technology of small programs
conclusion
If you are committed to a career in programming, start with a basic plan for your studies and a basic understanding of the technical requirements of the industry. Have an employment-oriented learning goal and work hard to see it through. If you are lucky enough to read this article, I hope it will help you and I wish you a satisfactory job.
No matter you are a zero-based cute new, or want to change the small partner, as long as you want to understand the front end, proficient in the front end, you are welcome to join our front end self-study group.
Here, you can find like-minded friends, learning partners who encourage each other, and the opportunity to share the experience of the great god and participate in the actual project. If you want to join a self-study group, do it now
Want to learn front-end Web and need PDF document friends can join this penguin skirt, front: 938,, middle: 051,, and finally: 673 skirt from students to big guys have, there are resources free to share, be there or be square oh!Copy the code