技术胖浏览器收藏夹公开

收藏夹

01.JavaScript

• JavaScript 教程 | 通俗易懂的JavaScript教程
• ES6 入门教程 | 通俗易懂的ES6入门教程
• JavaScript 30 | 使用原生JavaScript在30天内完成30个项目
• 现代 JavaScript 教程 | 最近很流行的JavaScript教程
• Node.js学习指南 | 系统的Node.js学习教程和笔记系统整理
• JS 代码规范 | 优秀的 JS代码规范
• TypeScript 教程 | 通俗易懂的TypeScript教程
• TypeScript 教程 | 最好的TypeScript 视频+图文教程

02.CSS样式

• 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

03.算法数据

• JavaScript 算法与数据结构 | 多种基于JavaScript的算法与数据结构
• leetcode 解题之路 | 私藏LeetCode解题攻略
• 五分钟学算法 | 每天拿出五分钟 学学算法 比如上个厕所就学了
• 数据结构与算法项目推荐 | Github上170K+Star的前端学习数据结构和算法题目
• JavaScript 十大经典排序算法 | JavaScript排序必会题目 作者功力很深 值得学习
• 算法可视化工具 | 用可视化工具和交互方式 让你从代码中可视化算法
• 算法可视化来源
• 算法的工作方式 | 变量和操作的可视化表示 增强了控制流和实际源代码

04.前端面试

• 前端面试常考问题整理 | 按模块和知识点分类
• 前端开发面试题
• WEB前端面试宝典
• 掘金前端面试题合集
• 前端面试图谱
• 前端面试开源项目汇总 | Github上100K+ Star 的前端面试开源项目汇总

05.技术社区

• GitHub | 高质量内容创作和分享平台
• Stackoverflow |一个回答技术问题的网站
• 掘金 | 国内的很多优质前端文章都掘金
• 博客园 | 一个很纯粹的技术博客平台
• 知乎 | 很多程序人喜欢泡在知乎
• CSDN | 老牌社区 程序员必上的一个社区
• v2ex | 程序员分享和探索的社区
• segmentfault | 低调技术博客社区
• Node.js 中文社区 | node专业中文社区
• 博客杂志站点 | 一个 web 技术类的博客杂志站点
• JS 技术的网站 | 每天推出一个JS技巧的网站
• W3Cplus | 推广国内行业的技术博客
• 印记中文 | 最权威的技术中文文档社区

06.前端博客

• 技术胖博客 | 专注前端 每年100集免费前端视频
• 腾讯Alloy Team | 腾讯前端博客 每天必看
• 腾讯用户体验博客 | 专注于前端用户体验
• 淘系前端博客 | 淘宝前端博客 代表中国最强前端实力
• 京东凹凸实验室 | 京东前端技术博客
• 饿了么前端博客 | 知乎上的最强前端博客
• 百度前端博客 | 百度前端团队旗下博客
• 360奇舞团 | 360公司前端团队
• 美团技术博客 | 美团技术团队博客

07.构建工具

• NPM | 包管理 和 项目构建工具
• webpack | 前端最流行的项目构建工具
• Yarn | 后起之秀 优秀的包管理和构建工具
• Gulp | 老牌构建工具
• Babel | ES6构建转换工具
• ESLint | 可组装的JavaScript和JSX检查工具
• PostCSS | 用JavaScript转换CSS代码的工具

08.部署工具

• Github Page | Github提供的免费静态网站托管服务
• Netlify | 30秒内部署你的网站
• Vercel | 快速部署你的网站 国外很流行
• Surge | 一个命令部署你的网站
• Heroku | 运动构建 、 运行你的网站和应用

09.静态站点搭建

• Hexo | 最流行的静态博客程序 Markdown编写 生成静态站点
• VuePress | Vue驱动的静态网站生成器
• GitBook | 现代化的文档平台，支持团队协作

10.前端代码规范

• Tgideas | 腾讯前端代码规范 值得参考
• 京东 | 京东前端代码规范文档 分类详细
• Bootstrap编码规范 | 适合个人和小团队使用的代码规范 不复杂
• ES6 编程风格 | 阮一峰编写的ES6代码规范 值得每个人阅读并参考
• Airbnb 前端代码规范 | 国外企业的前端代码规范
• ESLint | 代码规范检查和格式化工具
• Prettier | VSCode 最热门的代码格式化工具 让你写出漂亮的代码

11.调试抓包

• Whistle | 代理抓包工具 我一直在用的工具 很好很强大
• Fiddler | 使用人数最多的抓包工具

12.在线工具

• CodePen | 前端在线测试和演示工具 国外站点
• Can I use | Web前端兼容性列表
• TinyPNG | PNG/JPG 图片在线压缩工具
• CNZZ | 老牌站点统计工具 5年前国内站长必上网站
• web.dev | 评测网站性能 基于Lighthouse
• Shape Divider | 定制各种形状SVG的工具
• GTmetrix | 网页性能在线分析工具
• Carbon | 代码转图片工具
• Wappalyzer | 检测某个网站的技术栈
• CODEIF | 变量方法起名工具 人工智能加持
• tool.lu | 程序员在线工具大全

13.开发工具

• VSCode | 前端最流行的编辑器
• Sublime Text | 轻量级代码编辑工具 曾经我的最爱
• WebStom | 忠爱粉最多的编辑器
• Atom | 用的人很多 我却不喜欢的编辑器
• Typora | 程序人Mrakdown笔记 一直在用的笔记工具

14.开发者大会

• Vue.js开发者大会 | 前端人必须关注的前端大会
• 中国JS开发者大会 | 公司每年必组织参加的技术大会
• CSS开发者大会 | 提高CSS技术的开发者大会 打开视野 面向世界
• D2前端开发者大会 | 阿里组织的大会 可以看直播

15.WEB图标

• Font Awesome | 网站开发最流行的图标集
• Feather | 简洁美观的开源图标
• Material Design Icons | 轻快、精美的符号图标
• Tabler Icons | 681枚可定制的开源SVG图标
• 常见品牌的SVG图标

B站学习资源整合

网络知识

（Internet）

• 1. 网络工作原理
• 计算机网络原理：https://www.bilibili.com/video/BV1xJ41137Q3
• 1. 什么是HTTP
• HTTP协议详解：https://www.bilibili.com/video/BV1js411g7Fw
• 1. 浏览器及工作方式
• 浏览器是如何运作的？：https://www.bilibili.com/video/BV1x54y1B7RE
• 1. DNS 及其工作原理
• DNS基本工作原理：https://www.bilibili.com/video/BV1GW411j7Ts
• 直观DNS科普：https://www.bilibili.com/video/BV1F54y1R7BC
• 1. 域名相关知识
• 域名解析完整讲解：https://www.bilibili.com/video/BV1zA411x7Pj
• 1. 云服务相关知识
• 揭秘阿里云服务器：https://www.bilibili.com/video/BV1Rt411u7k4

超文本标记语言

（HTML）

• 1. HTML基础知识学习
• HTML全套基础教程：https://www.bilibili.com/video/BV11t411K74Q
• 1. HTML 编写规则 和语义化写法
• HTML 速成：https://www.bilibili.com/video/BV1vs411M7aT
• 1. 表单和验证
• html5表单验证：https://www.bilibili.com/video/BV16K4y1Z7Gb
• 1. 公约和最佳实践方法
• 前端代码规范秘籍：https://www.bilibili.com/video/BV19P4y147Jz
• 1. SEO 基础知识
• SEO优化学习教程：https://www.bilibili.com/video/BV1fE411J7ya

层叠样式表

（CSS)

• 1. CSS 基础知识学习

• CSS3基础教程：https://www.bilibili.com/video/BV1Bx411u7cS

• CSS3全套教程：https://www.bilibili.com/video/BV1et411q74F

• 1. 页面切图和布局实现

• 浮动布局

• 浮动布局：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

• 1. 页面响应式布局设计

• 六个案例学会响应式布局：https://www.bilibili.com/video/BV1ov411k7sm

浏览器脚本语言

(JavaScript)

• 1. JavaScript基础语法和知识
• JavaScript基础语法：https://www.bilibili.com/video/BV1Sy4y1C7ha
• 1. 使用JavaScript 操作 DOM元素
• JS必会的DOM BOM操作：https://www.bilibili.com/video/BV1k4411w7sV
• 1. Ajax 异步请求相关知识学习
• Ajax入门到精通：https://www.bilibili.com/video/BV1WC4y1b78y
• 1. ES6 以上版本 的JavaScript
• ES6-ES11新特性：https://www.bilibili.com/video/BV1uK411H7on

版本控制管理系统

Version Control System

• 1. Git的基本用法

• Git最新教程：https://www.bilibili.com/video/BV1FE411P7B3

• 1. 相关平台/软件的使用

• GitHub

• 十分钟学会Github：https://www.bilibili.com/video/BV1yo4y1d7UK

• GitLab

• gitlab使用说明：https://www.bilibili.com/video/BV11E411x7Uv

• Gitee

• 这个看中文网址就可以了，目前B站还没有很好的视频介绍

网络安全相关知识

Web Security Knowledge

• 1. HTTPS 原理和使用
• 你连HTTPS原理都不懂：https://www.bilibili.com/video/BV1Up4y1i7PG
• 1. CORS 跨域请求和安全知识
• 什么是CORS：https://www.bilibili.com/video/BV1Kt411E76z
• 1. 内容安全策略
• 网络渗透：https://www.bilibili.com/video/BV1kh411W7Vv
• 1. OWASP 安全风险知识
• OWASP TOP10：https://www.bilibili.com/video/BV1ey4y1V7Jj

包管理工具

Package Managers

• 1. npm
• 包管理工具：https://www.bilibili.com/video/BV1Dv411W7XP
• 1. yarn
• Yarn入门：https://www.imooc.com/learn/766 (B站没有，推荐这个免费)

CSS 预处理 语言

CSS Preprocessors

• 1. Sass
• SCSS从入门到实战：https://www.bilibili.com/video/BV1Zg4y1v75U
• 1. PostCSS
• B站没太好的视频，建议买书《深入PostCSS Web设计》
• 1. Less
• 前端less教程：https://www.bilibili.com/video/BV1YW411T7vd

构建工具

Build Tools

• 1. 任务执行命令 [Task Runners]

• npm scripts

• npm包管理应用：https://www.bilibili.com/video/BV1Dv411W7XP

• Gulp

• Gulp入门：https://www.bilibili.com/video/BV1yA411s72G

• 1. 打包工具

• Webpack

• Webpack从入门到精通：https://www.bilibili.com/video/BV1e7411j7T5

• Parcel

• Parcel初体验：https://www.bilibili.com/video/BV1Pa4y147Kf

• 1. 代码格式化工具

• Prettier

• Prettier和ESLint使用：https://www.bilibili.com/video/BV183411r7YK

• ESLint

• ESLint基础入门：https://space.bilibili.com/390120104/search/video?keyword=ESLint

三大前端框架

Web Framework

• React.js
• React基础视频：https://www.bilibili.com/video/BV1g4411i7po
• React全家桶：https://www.bilibili.com/video/BV1wy4y1D7JT
• React实战博客：https://www.bilibili.com/video/BV1CJ411377B
• React商城实战：https://www.bilibili.com/video/BV1i5411c7xp
• Vue.js
• Vue2全家桶：https://www.jspang.com/detailed?id=57
• Vue3全家桶：https://www.jspang.com/detailed?id=67
• vuejs从入门到精通：https://www.bilibili.com/video/BV1Zy4y1K7SH
• Angular
• Angular基础：https://www.bilibili.com/video/BV1Wx411R7qt

Web 组件化编程

Web Components

• HTML Templates
• Custom Elements
• Shadow DOM
• 概要: 此部分内容没有找到合适视频

CSS 相关框架

CSS Frameworks

• BootStrap
• 一周学会BootStrap：https://www.bilibili.com/video/BV1Lx411v73k
• Material UI
• Material UI入门教程：https://www.bilibili.com/video/BV12J411s75b
• Materialize CSS
• Materialize CSS Crash Course：https://www.bilibili.com/video/BV1gx411h7Y5
• ReactStrap

JavaScript 语法糖

Type Checkers

• TypeScript
• TypeScript从入门到精通：https://www.bilibili.com/video/BV1qV41167VD
• Flow

服务端渲染

Server Side Rendering （SSR）

• React.js

• Next.js

• Next.js入门教程：https://www.bilibili.com/video/BV13441117KK

• GatsbyJS

• GatsbyJS 实战：https://www.bilibili.com/video/BV1i4411T7AR （英文）

• Vue.js

• Nuxt.js

• Nuxt.js入门：https://www.bilibili.com/video/BV1Xt41117Kg

• Angular

• Universal

图形化编程

GraphQL

• Cocos Creator
• Cocos 图形游戏开发：https://www.bilibili.com/video/BV1sA411Y7x4
• Three.js
• Three.js基础教程-英文：https://www.bilibili.com/video/BV1ks411W78i
• Three.js教程：https://www.bilibili.com/video/BV1va4y1p7QB

静态站点生成器

Static Site Generators

• 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
• Vuepress
• Vuepress入门到精通：https://www.bilibili.com/video/BV1vb411m7NY
• Hugo
• 10分钟搭建个人网站：https://www.bilibili.com/video/BV1x64y117PX

移动App开发

Mobile Applications

• React Native
• ReactNatvie基础：https://www.bilibili.com/video/BV1Eg4y16735
• ReactNatvie实战：https://www.bilibili.com/video/BV15K411s75p
• UniApp
• Uni-App从入门到实战：https://www.bilibili.com/video/BV1BJ411W7pX
• Uni-App美团外卖：https://www.bilibili.com/video/BV1Zt4y117RR
• Flutter
• Flutter基础：https://www.bilibili.com/video/BV15t411U7yf
• Flutter实战：https://www.bilibili.com/video/BV1kt411B7mu
• Ionic
• Ionic入门：https://www.bilibili.com/video/BV1Ub41117q5

桌面应用开发

Desktop Applications

• Electron
• Electron入门：https://www.bilibili.com/video/BV1QB4y1F722
• Electron基础：https://www.bilibili.com/video/BV177411s7Lt