I have the habit of collecting interested websites when I surf the Internet at ordinary times. When I was in school, most of my collection were games, music, movies, and indescribable websites, but after work, I was full of technical learning information and so on. A few days ago, when sorting out browser bookmarks, I found that there were more than 200 bookmarks, and I deleted dozens of bookmarks by mistake and it was very troublesome to restore them, so I felt it was necessary to record them in another way, and I also selected some good websites to share with students in need.
Full bookmarks for articles (including previous ones) and browser exports are kept on Github for backup and may be updated later to add new content.
Project address: github.com/hoc2019/blo…
If some foreign websites can not be accessed, please solve by yourself.
The development tools
Some auxiliary tools used in the development of work at ordinary times
| The url | instructions |
|---|---|
| regexr.com | Regular expressions verify matches |
| www.gitignore.io | Generate.gitignore files based on the selection |
| unbug.github.io/codelf | Variable naming recommendations (Support Chinese) |
| www.html.cn/tool/css3Pr… | CSS Box-shadow shadow preview and code generation |
| www.internetke.com/jsEffects/2… | CSS gradient preview and code generation |
| Xuanfengge.com/easeing/cea… | CSS animation buffer function preview and generation |
| www.toptal.com/developers/… | Compose Sprite image from multiple images and generate corresponding CSS |
| tool.lu | A collection of tools, including timestamp conversion, base conversion, etc |
| www.bootcdn.cn 或 cdn.baomitu.com | Domestic CDN library, fast speed |
| www.jsdelivr.com | Foreign CDN library, support github, NPM, WordPress |
Online editing
Code online editing runs
| The url | instructions |
|---|---|
| jsrun.net | Domestic website, code tips, support CDN library import, do not support the creation of projects, code example market. |
| jsbin.com | Foreign website, less function, support local build |
| codepen.io | Foreign website, support CDN library import, support to create projects (non-members only support a project), there are a lot of rich code sample market. |
| stackblitz.com | Foreign site, with code tips, NPM support, can create projects (default create type without VUE). |
| codesandbox.io | Foreign website, support NPM and CDN library import, you can create various types of projects |
Programming question bank
Improve your programming mind by brushing problems and practicing programming
- freecodecamp
- Freecodecamp Chinese Version
- Freecodecamp Chinese Version
- leetcode
- Leetcode Chinese version
- The code
- scriptoj
- codewars
- codecademy
Note: According to FCC community, the old version of the topic is no longer maintained and updated, recommended to use the new version, the account is not interoperable. (Thanks Ricowang for the comment)
Video tutorial
Technical sharing and tutorial videos.
| The url | instructions |
|---|---|
| Frontendmasters | There are a lot of big man’s courses, English courses, English subtitles, a small part of the course free, most need to subscribe to the membership, the cost is more expensive, you can wait for the black Friday discount to buy the annual fee. |
| Egghead | English lessons with English subtitles. |
| IT says | Domestic technology conference to share video mainly. |
| MOOC (Massive Open Online Courses) | Domestic website, free class very much, actual combat class pay, pay by class, the price is expensive. (Others, such as Tencent Classroom, netease Cloud Classroom, are almost the same way) |
| Udemy | The website has Chinese language and Chinese courses, most English courses also have Chinese subtitles, charge by class, discount paid courses are acceptable. |
Maybe it’s more intuitive, so a lot of people prefer to watch videos, especially when they’re just getting started. There are also a lot of training institutions on the Internet now course video, can find you can also look, but advanced recommended to see more foreign video, broaden your horizons, incidentally practice your English ability.
Most of the videos on these sites are still paid, but if you want to watch free videos you can actually watch YouTube, and there are a lot of tech sharing videos on YouTube, but the point is, they’re all free.
Here are a few technical YouTube accounts you can follow.
- freeCodeCamp.org
- Red Stapler
- LearnCode.academy
- Wes Bos
- Coding Tech
These are just a few of my concerns, and there are many more that you can explore on your own.
Article information Blog
Learn technology and understand the latest trends in the industry.
domestic
- The Denver nuggets
- Blog garden
- CSDN
- Jane’s book
- infoQ
- Big front end
- All the sincere translation
- w3ctech
- v8
- w3cplus
- Zhang Xinxu blog
- TechBridge blog
- Cool shell left ear to listen to wind blog
- Taobao FED
- Jingdong Cave Laboratory
- Baidu FEX (Technology Week is still updating)
- Qiwu Weekly (public account subscription is recommended)
- Big search car technology team blog
foreign
- Echojs
- Front-End Front
- Hashnode
- css-tricks
- Devchat (Audio format)
- Medium (subscription mail)
- Dev (subscriptable mail)
- HTML5 Weekly (subscription email)
- CSS Weekly (subscription mail)
- JavaScript Weekly (subscription mail)
- React Status (Email subscription)
- Ponyfoo (subscriblable mail)
- Jake Archibald blog
- Dan Abramov blog
- David Walsh Blog
It is recommended to set up a special mailbox for receiving subscribed mail, as you will receive a large number of mail
Question and answer BBS
These are the places to go when you have a problem in development.
| Web site | instructions |
|---|---|
| zhihu | Nothing to say, with Zhihu should no one will use Baidu to know that rubbish. |
| Segmentfault | More focused on technical issues. |
| Stack Overflow | The original foreign version of Segmentfault, very powerful. |
| cnodejs | Node community |
| react-china | The react community |
| V2EX | Programmer 1024? |
Problems with open source frameworks and libraries can often be solved by looking for project query issues on Github.
Making related
After all, the world’s largest gay dating platform, there are a lot of cool people and projects on it, in addition to the wheel also has a lot of tutorials, here recommend some front-end learning helpful projects.
| The project name | instructions |
|---|---|
| 30-seconds-of-code | Dapper tool function, Chinese version. |
| Front-end-Developer-Interview-Questions | The front end test questions are arranged, there is a Chinese version, no answer. |
| front-end-interview-handbook | Front end interview manual, Chinese version, with answers. |
| Front-End-Checklist | Front-end development checklist |
| javascript-algorithms | Js algorithm and data structure |
| 33-js-concepts | 33 concepts to master for front-end development, available in Chinese. |
| awesome-javascript | List of javascript resources, yesThe Chinese version of. |
| nodebestpractices | Node best Practices list, available in Chinese. |
On Github, you can find other similar projects with the name awesome-*, such as the node resource list awesome-node and react resource list awesome-react.
Learning is not recommended to interview questions, it is not easy to form a system.
The last
The websites sorted here are the ones I often see, some of which have not been updated for a long time are not listed, and some websites may be omitted. If you have other excellent learning websites, you can also comment and share them. I hope these websites can help you with your learning and development.