- ECMAScript 基本语法
- DOM 编程
- BOM 的使用
- 作用域、闭包、原型链
- 事件代理/委托
- 错误处理/异常处理
- 事件队列 (setTimeout/setInterval/Promise)
- JSON
- AJAX/Fetch
- ES6+
- 正则表达式
- 《你不知道的 JavaScript》
- 《How JavaScript Works》
- Understanding ES6
- Understanding ES6 中文
- how-javascript-works
- 《JavaScript DOM 编程艺术》
- 《JavaScript 高级程序设计》
- 《JavaScript 语言精粹》
- 《JavaScript 设计模式》
- 《JavaScript 权威指南》
- 《Secrets of the JavaScript Ninja》
- 前端小测
- 每日一题
- nestjs+vue+ts 打造一个酷炫的星空聊天室
- 手写 webpack 核心原理
- 用 jQuery 手写一个小游戏
- 一篇文章搞定 babel-plugin-import 插件
- HTML5 画布
- GraphQL + Koa + React 项目实践
- 手写 Promise
- JavaScript 教程
- Eloquent JavaScript
- ECMAScript 6 入门-阮一峰
- 现代 JavaScript 教程
- 记录前端开发中的技巧以及算法知识
- 缓存
- 如何在 JS 循环中正确使�� async 与 await
- axios
- 掘金翻译计划
- RoadMap
- 原生 Web 项目
- JavaScript Style -js 书写风格
- javascript-algorithms
- 30-seconds-of-code - JavaScript 片段集合
- Front-End Checklist
- Tech Interview Handbook
- 33-js-concepts
- Node.js Best Practices
- 简洁的 js 代码 -js 书写风格
- Project Guidelines
- javascript-questions
待补充...
- JavaScript 教程 | 通俗易懂的 JavaScript 教程
- ES6 入门教程 | 通俗易懂的 ES6 入门教程
- JavaScript 30 | 使用原生 JavaScript 在 30 天内完成 30 个项目
- 现代 JavaScript 教程 | 最近很流行的 JavaScript 教程
- Node.js 学习指南 | 系统的 Node.js 学习教程和笔记系统整理
- JS 代码规范 | 优秀的 JS 代码规范
- TypeScript 教程 | 通俗易懂的 TypeScript 教程
- TypeScript 教程 | 最��的 TypeScript 视频+图文教程
- CSS Tricks 效果大全 | CSS 的各种效果实现 有很多动画效果
- CSS Inspiration | CSS 灵感的诞生地 我每天都的网站
- CSS 常用样式 | 有很多常用的 CSS 样式
- Animista | CSS 动画库 主打按需定制 CSS 动画效果
- Animista | CSS 动画库 主打按需定制 CSS 动画效果
- CSS Minifier | 在线 CSS 代码简化/压缩工具
- Sass: Sass 文档 | Sass 中文网 成熟、稳定、强大的 CSS 扩展语言
- Less 快速入门 | Less.js 中文文档 将 CSS 赋予了动态语言特性的样式语言
- stylus | CSS 扩展 富有变现里、动态、健壮的 CSS
- JavaScript 算法与数据结构 | 多种基于 JavaScript 的算法与数据结构
- leetcode 解题之路 | 私藏 LeetCode 解题攻略
- 五分钟学算法 | 每天拿出五分钟 学学算法 比如上个厕所就学了
- 数据结构与算法项目推荐 | GitHub 上 170K+Star 的前端学习数据结构和算法题目
- JavaScript 十大经典排序算法 | JavaScript 排序必会题目 作者功力很深 值得学习
- 算法可视化工具 | 用可视化工具和交互方式 让你从代码中可视化算法
- 算法可视化来源
- 算法的工作方式 | 变量和操作的可视化表示 增强了控制流和实际源代码
- 前端面试常考问题整理 | 按模块和知识点分类
- 前端开发面试题
- WEB 前端面试宝典
- 掘金前端面试题合集
- 前端面试图谱
- 前端面试开源项目汇总 | GitHub 上 100K+ Star 的前端面试开源项目汇总
- GitHub | 高质量内容创作和分享平台
- Stackoverflow |一个回答技术问题的网站
- 掘金 | 国内的很多优质前端文章都掘金
- 博客园 | 一个很纯粹的技术博客平台
- 知乎 | 很多程序人喜欢泡在知乎
- CSDN | 老牌社区 程序员必上的一个社区
- v2ex | 程序员分享和探索的社区
- segmentfault | 低调技术博客社区
- Node.js 中文社区 | node 专业中文社区
- 博客杂志站点 | 一个 web 技术类的博客杂志站点
- JS 技术的网站 | 每天推出一个 JS 技巧的网站
- W3Cplus | 推广国内行业的技术博客
- 印记中文 | 最权威的技术中文文档社区
- 技术胖博客 | 专注前端 每年 100 集免费前端视频
- 腾讯 Alloy Team | 腾讯前端博客 每天必看
- 腾讯用户体验博客 | 专注于前端用户体验
- 淘系前端博客 | 淘宝前端博客 代表中国最强前端实力
- 京东凹凸实验室 | 京东前端技术博客
- 饿了么前端博客 | 知乎上的最强前端博客
- 百度前端博客 | 百度前端团队旗下博客
- 360 奇舞团 | 360 公司前端团队
- 美团技术博客 | 美团技术团队博客
- NPM | 包管理 和 项目构建工具
- webpack | 前端最流行的项目构建工具
- Yarn | 后起之秀 优秀的包管理和构建工具
- Gulp | 老牌构建工具
- Babel | ES6 构建转换工具
- ESLint | 可组装的 JavaScript 和 JSX 检查工具
- PostCSS | 用 JavaScript 转换 CSS 代码的工具
- GitHub Page | GitHub 提供的免费静态网站托管服务
- Netlify | 30 秒内部署你的网站
- Vercel | 快速部署你的网站 国外很流行
- Surge | 一个命令部署你的网站
- Heroku | 运动构建 、 运行你的网站和应用
- Tgideas | 腾讯前端代码规范 值得参考
- 京东 | 京东前端代码规范文档 分类详细
- Bootstrap 编码规范 | 适合个人和小团队使用的代码规范 不复杂
- ES6 编程风格 | 阮一峰编写的 ES6 代码规范 值得每个人阅读并参考
- Airbnb 前端代码规范 | 国外企业的前端代码规范
- ESLint | 代码规范检查和格式化工具
- Prettier | VS Code 最热门的代码格式化工具 让你写出漂亮的代码
- CodePen | 前端在线测试和演示工具 国外站点
- Can I use | Web 前端兼容性列表
- TinyPNG | PNG/JPG 图片在线压缩工具
- CNZZ | 老牌站点统计工具 5 年前国内站长必上网站
- web.dev | 评测网站性能 基于 Lighthouse
- Shape Divider | 定制各种形状 SVG 的工具
- GTmetrix | 网页性能在线分析工具
- Carbon | 代码转图片工具
- Wappalyzer | 检测某个网站的技术栈
- CODEIF | 变量方法起名工具 人工智能加持
- tool.lu | 程序员在线工具大全
- VS Code | 前端最流行的编辑器
- Sublime Text | 轻量级代码编辑工具 曾经我的最爱
- WebStom | 忠爱粉最多的编辑器
- Atom | 用的人很多 我却不喜欢的编辑器
- Typora | 程序人 Mrakdown 笔记 一直在用的笔记工具
- Vue.js 开发者大会 | 前端人必须关注的前端大会
- 中国 JS 开发者大会 | 公司每年必组织参加的技术大会
- CSS 开发者大会 | 提高 CSS 技术的开发者大会 打开视野 ��向世界
- D2 前端开发者大会 | 阿里组织的大会 可以看直播
- Font Awesome | 网站开发最流行的图标集
- Feather | 简洁美观的开源图标
- Material Design Icons | 轻快、精美的符号图标
- Tabler Icons | 681 枚可定制的开源 SVG 图标
- 常见品牌的 SVG 图标
B 站学习资源整合
(Internet)
浏览器是如何运作的?:https://www.bilibili.com/video/BV1x54y1B7RE
DNS 基本工作原理:https://www.bilibili.com/video/BV1GW411j7Ts
(HTML)
HTML 全套基础教程:https://www.bilibili.com/video/BV11t411K74Q
html5 表单验证:https://www.bilibili.com/video/BV16K4y1Z7Gb
SEO 优化学习教程:https://www.bilibili.com/video/BV1fE411J7ya
(CSS)
- 浮动布局
- 浮动布局:https://www.bilibili.com/video/BV1Zs411j7Z3
- 定位布局
- CSS 定位布局:https://www.bilibili.com/video/BV1ni4y1g7tc
- Display
- display&visibility:https://www.bilibili.com/video/BV1HJ411M7CM
- 盒子模型
- CSS 盒子模型与定位:https://www.bilibili.com/video/BV1P7411G7BW
- Grid 布局
- 如何用 grid:https://www.bilibili.com/video/BV14C4y1W7oA
- Flex 布局
- Flex 伸缩布局:https://www.bilibili.com/video/BV1BJ41197XE
六个案例学会响应式布局:https://www.bilibili.com/video/BV1ov411k7sm
(JavaScript)
JavaScript 基础语法:https://www.bilibili.com/video/BV1Sy4y1C7ha
JS 必会的 DOM BOM 操作:https://www.bilibili.com/video/BV1k4411w7sV
AJAX 入门到精通:https://www.bilibili.com/video/BV1WC4y1b78y
ES6-ES11 新特性:https://www.bilibili.com/video/BV1uK411H7on
Version Control System
- GitHub
- 十分钟学会 Github:https://www.bilibili.com/video/BV1yo4y1d7UK
- GitLab
- gitlab 使用说明:https://www.bilibili.com/video/BV11E411x7Uv
- Gitee
- 这个看中文网址就可以了,目前 B 站还没有很好的视频介绍
Web Security Knowledge
你连 HTTPS 原理都不懂:https://www.bilibili.com/video/BV1Up4y1i7PG
OWASP TOP10:https://www.bilibili.com/video/BV1ey4y1V7Jj
Package Managers
Yarn 入门:https://www.imooc.com/learn/766 (B 站没有,推荐这个免费)
CSS Preprocessors
SCSS 从入门到实战:https://www.bilibili.com/video/BV1Zg4y1v75U
前端 less 教程:https://www.bilibili.com/video/BV1YW411T7vd
Build Tools
[Task Runners]
- npm scripts
- npm 包管理应用:https://www.bilibili.com/video/BV1Dv411W7XP
- Gulp
- Gulp 入门:https://www.bilibili.com/video/BV1yA411s72G
- Webpack
- Webpack 从入门到精通:https://www.bilibili.com/video/BV1e7411j7T5
- Parcel
- Parcel 初体验:https://www.bilibili.com/video/BV1Pa4y147Kf
- Prettier
- Prettier 和 ESLint 使用:https://www.bilibili.com/video/BV183411r7YK
- ESLint
- ESLint 基础入门:https://space.bilibili.com/390120104/search/video?keyword=ESLint
Web Framework
React 基础视频:https://www.bilibili.com/video/BV1g4411i7po
React 实战博客:https://www.bilibili.com/video/BV1CJ411377B
React 商城实战:https://www.bilibili.com/video/BV1i5411c7xp
vuejs 从入门到精通:https://www.bilibili.com/video/BV1Zy4y1K7SH
Angular 基础:https://www.bilibili.com/video/BV1Wx411R7qt
Web Components
CSS Frameworks
一周学会 BootStrap:https://www.bilibili.com/video/BV1Lx411v73k
Material UI 入门教程:https://www.bilibili.com/video/BV12J411s75b
Materialize CSS Crash Course:https://www.bilibili.com/video/BV1gx411h7Y5
Type Checkers
TypeScript 从入门到精通:https://www.bilibili.com/video/BV1qV41167VD
Server Side Rendering (SSR)
- Next.js
- Next.js 入门教程:https://www.bilibili.com/video/BV13441117KK
- GatsbyJS
- GatsbyJS 实战:https://www.bilibili.com/video/BV1i4411T7AR (英文)
- Nuxt.js
- Nuxt.js 入门:https://www.bilibili.com/video/BV1Xt41117Kg
- Universal
GraphQL
Cocos 图形游戏开发:https://www.bilibili.com/video/BV1sA411Y7x4
Three.js 基础教程-英文:https://www.bilibili.com/video/BV1ks411W78i
Three.js 教程:https://www.bilibili.com/video/BV1va4y1p7QB
Static Site Generators
Next.js 入门教程:https://www.bilibili.com/video/BV13441117KK
GatsbyJS 实战:https://www.bilibili.com/video/BV1i4411T7AR (英文)
Nuxt.js 入门:https://www.bilibili.com/video/BV1Xt41117Kg
VuePress 入门到精通:https://www.bilibili.com/video/BV1vb411m7NY
10 分钟搭建个人网站:https://www.bilibili.com/video/BV1x64y117PX
Mobile Applications
ReactNatvie 基础:https://www.bilibili.com/video/BV1Eg4y16735
ReactNatvie 实战:https://www.bilibili.com/video/BV15K411s75p
Uni-App 从入门到实战:https://www.bilibili.com/video/BV1BJ411W7pX
Uni-App 美团外卖:https://www.bilibili.com/video/BV1Zt4y117RR
Flutter 基础:https://www.bilibili.com/video/BV15t411U7yf
Flutter 实战:https://www.bilibili.com/video/BV1kt411B7mu
Desktop Applications