FE Blog

Appearance

优秀网站收集 ​

计算机科学学习资源 ​

前端学习资源 ​

  • js现代教程 - 现代JavaScript教程，内容全面且实用
  • CSS Tricks - CSS 深度解析文章与技巧合集，同时涵盖 Vue/React 等现代技术栈
  • W3Schools - 适合初学者的在线学习网站，支持在线编辑运行代码，内容简洁
  • Frontend Masters - 深度前端和全栈课程，由行业专家授课，提供从初级到高级的完整学习路径
  • Frontend Mentor - 提供高质量的前端实战项目挑战，从简单静态页到高级响应式设计，附带设计稿
  • Frontend Mentor Learning Paths - 系统化的前端学习路径，从新手到高级开发者的完整技能提升
  • Frontend Practice - 提供真实项目练习，包含设计稿和资源，适合提升前端技能
  • CSS-Tricks Guides - CSS各种技术的完整指南
  • Learn JavaScript - 交互式JavaScript学习平台
  • JavaScript.info - 现代JavaScript教程
  • CSS Grid Garden - 学习CSS Grid的游戏
  • Flexbox Froggy - 学习CSS Flexbox的游戏
  • Codepip - 用简单易懂一步步讲解前端知识

算法与数据结构 ​

技术文档 ​

在线开发工具 ​

  • CodePen - 在线代码编辑器，适合快速原型开发
  • StackBlitz - 支持完整前端项目的在线运行，支持 Vue、React、Angular 等框架
  • CodeSandbox - 类似 CodePen，但更偏向实际项目开发
  • JSFiddle - JavaScript在线测试工具
  • Replit - 支持多种语言的在线IDE
  • Glitch - 协作式Web应用开发平台
  • GitPod - 基于云的开发环境
  • JSON Formatter - JSON格式化和验证工具
  • RegExr - 正则表达式测试工具
  • Regex101 - 正则表达式测试和调试工具

文档与笔记工具 ​

  • Overleaf - LaTeX 在线编辑器
  • Notion - 多功能笔记和知识管理工具
  • Obsidian - 知识库构建工具
  • Typora - Markdown编辑器
  • Miro - 在线协作白板
  • Figma - 在线设计协作工具
  • Canva - 在线设计工具，适合非设计师
  • Excalidraw - 手绘风格的图表工具
  • draw.io - 免费的在线图表制作工具

求职与职业发展 ​

代码托管与协作 ​

  • GitHub - 全球最大的代码托管平台
  • GitLab - 集成的DevOps平台
  • Bitbucket - Atlassian的代码托管服务
  • Gitee - 国内代码托管平台
  • Coding - 一站式软件研发管理平台
  • Sourcegraph - 代码搜索和导航工具
  • Coder - 远程开发环境

设计资源 ​

前端框架与库 ​

包管理与构建工具 ​

  • npm - Node.js包管理器
  • Yarn - 快速、可靠、安全的依赖管理
  • pnpm - 快速、节省磁盘空间的包管理器
  • Webpack - 模块打包工具
  • Vite - 下一代前端构建工具
  • Rollup - JavaScript模块打包器
  • Parcel - 零配置的Web应用打包工具
  • esbuild - 极速JavaScript打包器
  • Turbopack - Rust编写的增量打包器
  • Bun - JavaScript运行时和工具包

测试与质量保证 ​

性能优化工具 ​

浏览器开发工具 ​

部署与托管 ​

监控与分析 ​

无障碍工具 ​

安全工具 ​

API开发与测试 ​

数据可视化工具 ​

AI与机器学习工具 ​

Web3与区块链 ​

开源项目与资源 ​

开发者社区 ​

技术博客与新闻 ​

在线课程平台 ​