Front end people should have websites and tools


I wanted to write an article about the tool library of front-end people for a long time, because I found that having tools is the foundation of becoming a tool person.

Front end people should have websites and tools

01 Preface

Recently, there are many beginners in the background message said: “I am a little white, how can I quickly get to the front end?”. In fact, it is not easy to answer this question, because it is like saying that I am a poor man and how to get rich quickly. But it is not that there is no way to answer this question. After all, there is still a path to master a knowledge point. It can not be said that the path is the same, but at least it can be referred to.

Next, from the perspective of a beginner, but not a beginner, I will introduce to you what the front-end people’s tool libraries are, and how to quickly help you sort out knowledge points and get started quickly (mastery depends on yourself).

02 basic introduction

Speaking of basic introduction, in fact, it is very basic. I also came here like this at the beginning. It’s just starting from the simplest HTML / CSS. At that time, you had to type everything by yourself. How convenient is the component library now! It can only be said that everyone is too happy now. The so-called predecessors plant trees, and later generations enjoy the cool. But don’t forget how trees are planted.

  • Rookie course

You should all know this website, it isThe gospel of beginnersThere’s everything in it, but it’s very basic. We must not think that the foundation does not pay attention to study, just like the subject of university study, books with basic words are often the most difficult. It can be said that if the front-end partners go through the front-end above, you will get started. The time is about a week or two, and there is no difficulty, if you are a professional, it is easier to get started.

  • W3school

This is actually similar to the rookie tutorial, and it is also a basic knowledge point such as labels. I think it’s good to watch the rookie tutorial, and you can learn about it.

  • Moocnet

This is really mineEnlightenment website, although it is no longer commonly used, it has always been on the top of my favorites. No, it’s for a feeling. This website was recommended by a senior brother before I went to university. At that time, I mainly studied C + + courses, and then I went to preschool (because it is simple)

Many of the above courses are charged, but there are also good free classes, students who do not want to read books or tutorials can choose to watch moocnet.

  • MDN

This is also a relatively basic document. The content is a little deeper than the first two, and the knowledge explanation is also in place. I can use it as my own document when I check it. I think the layout of the website is good, and the knowledge classification page is very organized.

03 advanced exercise

After you get started with the basics, you should play with some interesting technologies, such as Vue and react, which are popular front-end technologiesFront end must learn technologyBecause you don’t master or use them, you can’t find a job.

  • Vue.js

This is aIt's very easy to get startedThe front-end framework, the premise is that you have gone through the basic introduction of the exercise. Moreover, its surroundings and ecology are very perfect, and there are many supported component libraries, which will be introduced later. thereforeHighly recommendedEveryone to learn this framework, can do a simple effect and so on, find the fun of the front end.

  • Vue CLI

We also introduce Vue’s scaffolding tool, which allows you to quickly generate a hello world project, and thenRapid development, focusing on the business. I usually use a lot of them.

  • React

Because I am not very familiar with the technology stack of react. I only stay on the document, but I have done a simple demo. I know the ideas of reference components and business splitting. I think they are similar to Vue, and they are also component-based ideas. We should learn about them.

  • Node.js

because Node.js The emergence of the front-end engineers just like adding wings to the tiger to enter the server-side development, making JavaScript a language that can run on the server side. Before, our back-end was written in Java, Python and other back-end languages. Now we can use js to write it. It’s exciting to think about it. And now there are two more mature frameworks, so that the front-end can easily develop full stack applications. You can take a look at the express and koa frameworks.

  • Webpack

If you want to have a comprehensive understanding of the webpack packaging tool, you must read its documents carefully. There are a lot of attribute configurations about webpack. You can know the function of each configuration. When you use it, you must pay attention to the version problem. Many weird errors can be solved by downgrading. If you want to explore the principle, optimization and so on, you can read the book webpack, you will understand a lot of knowledge.

Since I have not been in contact with angular, I will not say more about this. However, it is not ruled out that some companies use angular technology. You should learn more about it when you have time. I want to know

04 exquisite component library

Well, to the part I want to introduce, in fact, this is more convenient for our front-end daily business needs. To put it bluntly, it liberates our front-end development without writing complex CSS or HTML,Out of the box。 I would also like to thank the front-end community for its great contribution.

  • Element-ui

I like this component library very much, because some of its functions can basically meet my development needs, and it is also very easy to operate. You can choose to directly introduce CDN or install NPM. The most important thing is to be able to cooperate Vue.js Carry out project development.

  • Ant Design

This is a front-end component library produced by ant financial services, which is also very easy to use. It also supports the use of front-end framework, and now version 4.0 has been released.

  • Bootstrap

This is the first front-end component library I used. When I found it, I felt that the world had been widened a lot, because I have been in touch with this since I started to learn the basics. It was recommended by a little sister of the front end. Although it’s basically not used now, it’s still that sentence. I’d like to recommend it.

  • Flying ice

It seems that this UI component library is also recommended by many people. It is a front-end component library developed by Ali. I have never used it. You can go and have a look.

  • Cube UI

This is a front-end component library developed by didi company, which also supports Vue.js Grammar, I have not used, you can also understand.

05 small program development

Recently, I also do the work related to the development of small programs. In fact, the development of small programs is much more convenient now, because there are many small program frameworks. Next, I will introduce them.

  • Official development

I don’t need to introduce this too much. After all, it’s big brother, and the official weui component library with native support is also very convenient.

  • uni-app

This is a relatively good development of small program framework in recent years. It can not only develop small programs, realize multi terminal development, but also compile into app, which is exciting to think about. What’s more, it also supports Vue syntax, which is not so cool.

  • Uni app plug-in Market

Speaking of uni app, we have to mention its plug-in market. It’s just as convenient as we usually buy vegetables in the vegetable market. We can use it directly and it’s free. But we should also see whether there are some compatibility problems. If you have problems downloading plug-ins, don’t spray them, because we all contribute to the community. We should encourage authors.

  • uView

This is a comment from a gold digger. I found this website and found it very good. Its official website said that this is the best UI framework of uniapp ecology. Comprehensive components and convenient tools will let you have it at your fingertips. I haven’t started using it yet. You can try it. It should be good.

  • Taro

This is a small program framework developed by JingdongOne code, more runsI used it once a long time ago and forgot what it felt like. You can also go to the official website to learn about it, maybe not fall in love with this framework!

  • mpvue

This is a small program framework developed by meituan, which is also supported vue.js And it also supports the life cycle of applets, that is, the life cycle of Vue and that of applets are applicable.

Said so much, I recommend to you a very good small program data summary, each time the development of small programs will see what is good, others summarize very well! Summary of wechat applet development resources

  • vant-weapp

Recently, we also used this component library to develop small programs with mpvue. We have to say that this is a very good component library. The components in it are very rich and can meet our business development needs.

  • View UI

This is also a set of Vue.js High quality UI component library. It has to be said that the current component library is too rich, which is the gospel of our front-end people. Now the front-end also pays more and more attention to the development experience. With the component, the user experience becomes extremely friendly instantly.

OK, so much about it. We don’t have to use every one of them. If there are other good ones, we can update them!

06 easy to use tools

When it comes to tools, here we will introduce the front-end tools that front-end people must use. We must collect them well.

  • postman

This is an interface debugging tool, because the front and back end often carry outinteractiveUsing this tool, you can easily debug and know where the problem is. It supports a variety of request methods for debugging, as well as value transfer and other operations.

  • Google browser

Google browser in the market share is very high, because it not only has a good browsing experience, more importantly, it has a very good debugging function, I introduce here ischromiumBrowsers are the same, click to download.

  • Color conversion

This is a color conversion tool, very convenient for your color values. Before I have been using this one, but recently I found that QQ screenshot function can also absorb color, direct Ctrl + C can get hexadecimal color, it is not too cool.

  • navicat

Navicat is a database management software, you can easily view 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 ways to use it. Just know it.


This is a website testing tool, you can see the details of the time you spent on requesting a website, which can be used to optimize your website. But I don’t often use it. It’s just by chance.

07 discussion community

  • Nuggets

The first thing I recommend is nuggets. I think the quality of articles here is very high, and everyone’s activity is also very good. I like this community very much. You can also take a look at the Nuggets brochure, which is also very good.

  • Think no

Think no is also a good discussion community, I also have a lot of difficulties in the above to find solutions.

  • stackoverflow

This is more powerful. There are developers from all over the world, and it is also an active discussion community. There are many bull people to help you answer questions. But the only drawback is that you need to have a higher level of English, but you can also right-click and translate.

  • has helped me a lot when I was looking for a job, especially in the aspect of internal promotion. There are also many companies that will release some information on internal promotion, and there are many seniors and sisters who recommend to you. You must collect this website.

  • github

This is a code hosting platform, which is convenient for our regular project hosting. There are many open source projects on it. The best way for beginners to learn is git clone. To see how others write code, their own improvement must be great. At the same time, there is a code cloud is also good, domestic visit is faster.

In addition, there are some things like Zhihu, Jianshu and CSDN, which are more popular. I think the content quality is OK. But you can also go around and you can find good solutions.

08 personal excellent blog

In fact, there are many excellent blogs, here I recommend a few, I think it is better.

  • Ruan Yifeng

Ruan teacher’s blog also benefited me a lot, from which I learned a lot of useful knowledge and life truth. It also records Ruan teacher’s diary experience, which is very worthy of your visit.

  • Technical obesity

The blogger of conscience in the industry has released a lot of free videos. After watching react, I think it is very clear. It will certainly help many people to get started with the front-end.

  • My blog

Finally, I don’t want to recommend my blog. Although I have just started, writing blog is also a record of my growth and a spur to myself. I also hope to make progress together with you in the front-end circle, and I hope you can put forward suggestions. I also opened my own official account.Front end hours》It’s also a record of my own growth. I hope you can pay attention to it and support it. Ha ha.

The blog is not built by hand, but also built by using the open source blog system hexo. We can also build their own blog system, easy to start! You can see the article “Xiaobai can build a blog” I wrote before

09 other easy to use websites

  • BootCDN

This CDN website can easily introduce various CDNs, including vue.js Element UI.

  • Font Icon

Every time I use the icon, I will look it up. Basically, I can find the icon I want, and I can easily download the ruler you want.

  • Font type

Used once, there are various types of fonts for you to download, you can directly import it to use. Not very commonly used, except for some very special circumstances.

  • Flutter

A popular mobile development framework can be developed across platforms, that is, Android and IOS can use the same set of code to compile. I used it once, and I think it’s very good. It’s easy to get started. It’s almost the same as the front end, but it takes time to get started.

  • Rotation chart

The function of a carousel chart, which provides the styles and functions of various carousel charts, can also be used in the vue.js However, it is not used much because there are similar functions in the component library.

10 summary

Well, today’s article to share here, my collection of websites and tools are recommended to you, data collation is not easy, I hope you can like to pay attention to it, if you have a good tool can leave a message at the bottom of the article, I will update to the top of the article.

I hope you can make good use of these websites to improve their business ability. I think the article is good, and can also pay attention to my official account. Articles are sent synchronously! Thank you!

Front end people should have websites and tools