超赞的实用前端社区精选？

Dear 丶 2024-03-22 10:06 94阅读 0赞

转载

作者：黑马程序员前端  
链接：https://www.zhihu.com/question/39503897/answer/2998752442

### 社区精选 | 好的前端社区可以根据其特点和领域进行分类整理： ###

#### 1. [问答社区][Link 1] ####

*  Stack Overflow（[https://stackoverflow.com/）][https_stackoverflow.com]
 *  Segment Fault（[https://segmentfault.com/）][https_segmentfault.com]
 *  CNode（[https://cnodejs.org/）][https_cnodejs.org] 这类社区主要提供前端开发者们解决问题的平台，可以在社区中提问、回答问题，获得技术支持和建议。

#### 2. 技术分享社区 ####

*  掘金（[https://juejin.cn/）][https_juejin.cn]
 *  GitHub（[https://github.com/）][https_github.com]
 *  CodePen（[https://codepen.io/）][https_codepen.io] 这类社区主要分享前端开发的最新技术、工具和经验，让前端开发者们了解和掌握最新的前端开发技术。

#### 3. 设计分享社区 ####

*  Dribbble（[https://dribbble.com/）][https_dribbble.com]
 *  Behance（[https://www.behance.net/）][https_www.behance.net] 这类社区主要分享设计师们的设计作品，可以帮助前端开发者们提高自己的设计能力，为前端开发的页面设计提供灵感。

#### 4. 学习社区 ####

*  FreeCodeCamp（[https://www.freecodecamp.org/）][https_www.freecodecamp.org]
 *  CSS-Tricks（[https://css-tricks.com/）][https_css-tricks.com] 这类社区提供前端开发者们学习前端开发的平台，包括在线学习课程、教程、示例和实践项目。可以帮助前端开发者们系统学习前端开发知识和技能。

#### 5. 新闻资讯社区 ####

*  Hacker News（[https://news.ycombinator.com/）][https_news.ycombinator.com]
 *  Smashing Magazine（[https://www.smashingmagazine.com/）][https_www.smashingmagazine.com] 这类社区提供前端开发的最新新闻和资讯，可以让前端开发者们了解和掌握最新的前端开发趋势和动态。

### 前端开发中有很多实用的工具，用对效率翻倍，以下是一些常用的分类： ###

#### 1. [代码编辑器][Link 2] ####

*  Visual Studio Code ([https://code.visualstudio.com/][https_code.visualstudio.com])
 *  Sublime Text ([https://www.sublimetext.com/][https_www.sublimetext.com])
 *  Atom ([https://atom.io/][https_atom.io])
 *  WebStorm ([https://www.jetbrains.com/webstorm/][https_www.jetbrains.com_webstorm]) 这些代码编辑器具有代码高亮、自动补全、代码片段、Git 集成等功能，是前端开发必备的工具之一。

#### 2. 版本控制工具 ####

*  Git ([https://git-scm.com/][https_git-scm.com])
 *  SVN ([https://subversion.apache.org/][https_subversion.apache.org]) 版本控制工具可以帮助前端开发者们管理代码的版本、协同开发、记录代码变更等操作，使团队合作更加高效。

#### 3. 包管理工具 ####

*  npm ([https://www.npmjs.com/][https_www.npmjs.com])
 *  Yarn ([https://yarnpkg.com/][https_yarnpkg.com]) 包管理工具可以下载、安装和管理前端项目中使用的依赖包，使项目开发和部署更加便捷和可靠。

#### 4. CSS 预处理器 ####

*  Sass ([https://sass-lang.com/][https_sass-lang.com])
 *  Less ([http://lesscss.org/][http_lesscss.org])
 *  Stylus ([http://stylus-lang.com/][http_stylus-lang.com]) CSS 预处理器可以扩展 CSS 的语法，并提供变量、函数、嵌套等功能，使 CSS 的编写更加高效和灵活。

#### 5. 自动化构建工具 ####

*  Gulp ([https://gulpjs.com/][https_gulpjs.com])
 *  Grunt ([https://gruntjs.com/][https_gruntjs.com])
 *  Webpack ([https://webpack.js.org/][https_webpack.js.org]) 自动化构建工具可以自动化执行前端开发中的一些任务，如编译、压缩、打包、静态资源管理等，提高开发效率和质量。

#### 6. 在线调试工具 ####

*  JSFiddle ([https://jsfiddle.net/][https_jsfiddle.net])
 *  CodePen ([https://codepen.io/][https_codepen.io 1])
 *  JS Bin ([https://jsbin.com/][https_jsbin.com]) 在线调试工具可以在线编辑和调试 HTML、CSS、JavaScript 代码，并提供实时预览和分享功能，便于快速验证和共享代码。

#### 7. 前端框架 ####

*  Vue.js ([https://vuejs.org/][https_vuejs.org])
 *  React ([https://reactjs.org/][https_reactjs.org])
 *  Angular ([https://angular.io/][https_angular.io]) [前端框架][Link 3]可以帮助前端开发者们快速搭建 Web 应用程序，提供了一系列的工具和组件，简化了前端开发的流程。

#### 8. UI 库 ####

*  Bootstrap ([https://getbootstrap.com/][https_getbootstrap.com])
 *  Material Design ([https://material.io/][https_material.io])
 *  Ant Design ([https://ant.design/][https_ant.design]) UI 库提供了一系列的 UI 组件和模板，可以帮助前端开发者们快速搭建 Web 应用程序的用户界面，提高开发效率。

### 如果有零基础想学前端的朋友，参考以下，按照自己的时间做好学习计划 ###

*  HTML+CSS 25天
 *  JavaScript 20天
 *  环境基础 15天
 *  计算机基础 25天
 *  Bootstrap（15天）、jQuery UI（15天）、Amaze UI；流行的前端框架：jquery mobile、angular.Js（20天）、Vue.js（20天）、React.js（20天）
 *  Echarts（1周）、tableau（1周）

以上时间安排是每天至少学习6小时的时间安排，大家可以根据每天学习的小时数字型加减天数。

![7fbfcfe196db8e6e9f956f6227eeea33.png][]

### 前端全套课程分享： ###

HTML+CSS-->移动web->JavaScript基础-->Web APIs->数据交互&异步编程

\-->Node.js-->Vue2+Vue3-->React核心技术-->微信小程序

[前端开发学习路线2023版-黑马程序员web前端开发自学路线][2023_-_web]

[Link 1]: https://www.zhihu.com/search?q=%E9%97%AE%E7%AD%94%E7%A4%BE%E5%8C%BA&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A2998752442%7D
[https_stackoverflow.com]: https://link.zhihu.com/?target=https%3A//stackoverflow.com/%25EF%25BC%2589
[https_segmentfault.com]: https://link.zhihu.com/?target=https%3A//segmentfault.com/%25EF%25BC%2589
[https_cnodejs.org]: https://link.zhihu.com/?target=https%3A//cnodejs.org/%25EF%25BC%2589
[https_juejin.cn]: https://link.zhihu.com/?target=https%3A//juejin.cn/%25EF%25BC%2589
[https_github.com]: https://link.zhihu.com/?target=https%3A//github.com/%25EF%25BC%2589
[https_codepen.io]: https://link.zhihu.com/?target=https%3A//codepen.io/%25EF%25BC%2589
[https_dribbble.com]: https://link.zhihu.com/?target=https%3A//dribbble.com/%25EF%25BC%2589
[https_www.behance.net]: https://link.zhihu.com/?target=https%3A//www.behance.net/%25EF%25BC%2589
[https_www.freecodecamp.org]: https://link.zhihu.com/?target=https%3A//www.freecodecamp.org/%25EF%25BC%2589
[https_css-tricks.com]: https://link.zhihu.com/?target=https%3A//css-tricks.com/%25EF%25BC%2589
[https_news.ycombinator.com]: https://link.zhihu.com/?target=https%3A//news.ycombinator.com/%25EF%25BC%2589
[https_www.smashingmagazine.com]: https://link.zhihu.com/?target=https%3A//www.smashingmagazine.com/%25EF%25BC%2589
[Link 2]: https://www.zhihu.com/search?q=%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91%E5%99%A8&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A2998752442%7D
[https_code.visualstudio.com]: https://link.zhihu.com/?target=https%3A//code.visualstudio.com/
[https_www.sublimetext.com]: https://link.zhihu.com/?target=https%3A//www.sublimetext.com/
[https_atom.io]: https://link.zhihu.com/?target=https%3A//atom.io/
[https_www.jetbrains.com_webstorm]: https://link.zhihu.com/?target=https%3A//www.jetbrains.com/webstorm/
[https_git-scm.com]: https://link.zhihu.com/?target=https%3A//git-scm.com/
[https_subversion.apache.org]: https://link.zhihu.com/?target=https%3A//subversion.apache.org/
[https_www.npmjs.com]: https://link.zhihu.com/?target=https%3A//www.npmjs.com/
[https_yarnpkg.com]: https://link.zhihu.com/?target=https%3A//yarnpkg.com/
[https_sass-lang.com]: https://link.zhihu.com/?target=https%3A//sass-lang.com/
[http_lesscss.org]: https://link.zhihu.com/?target=http%3A//lesscss.org/
[http_stylus-lang.com]: https://link.zhihu.com/?target=http%3A//stylus-lang.com/
[https_gulpjs.com]: https://link.zhihu.com/?target=https%3A//gulpjs.com/
[https_gruntjs.com]: https://link.zhihu.com/?target=https%3A//gruntjs.com/
[https_webpack.js.org]: https://link.zhihu.com/?target=https%3A//webpack.js.org/
[https_jsfiddle.net]: https://link.zhihu.com/?target=https%3A//jsfiddle.net/
[https_codepen.io 1]: https://link.zhihu.com/?target=https%3A//codepen.io/
[https_jsbin.com]: https://link.zhihu.com/?target=https%3A//jsbin.com/
[https_vuejs.org]: https://link.zhihu.com/?target=https%3A//vuejs.org/
[https_reactjs.org]: https://link.zhihu.com/?target=https%3A//reactjs.org/
[https_angular.io]: https://link.zhihu.com/?target=https%3A//angular.io/
[Link 3]: https://www.zhihu.com/search?q=%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A2998752442%7D
[https_getbootstrap.com]: https://link.zhihu.com/?target=https%3A//getbootstrap.com/
[https_material.io]: https://link.zhihu.com/?target=https%3A//material.io/
[https_ant.design]: https://link.zhihu.com/?target=https%3A//ant.design/
[7fbfcfe196db8e6e9f956f6227eeea33.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a3b0f83178d54e7ba27f471e2e3c22c3.png
[2023_-_web]: http://yun.itheima.com/subject/webmap/index.html