前端资源
介绍
API
数据结构和算法
设计
HTML
CSS
前端资源
Git和Github
JavaScript
反应
TypeScript
其他内容
介绍
这是一些(令人惊叹的)资源的集合,主要集中在前端 Web 开发上。
API
- RapidAPI - 为开发人员提供免费的公共 API
- any-api - 超过 1400 个公共 API 的文档和测试控制台
- public-apis - 用于软件和 Web 开发的免费 API 集合列表
- API 列表- API 的集合列表
- 免费开放 API - 为营销人员和内容开发者提供 30 个免费开放 API
- json 占位符- 用于测试和原型设计的免费伪 API
数据结构和算法
算法挑战
算法书籍
算法网站
设计
设计文章
设计书籍
颜色
- colors - 配色方案生成器
- Hex Colors - 调色板生成器
- Canva 颜色- 多种颜色工具
- 对比度- 对比度检查器
- Adobe Color - 色轮和其他工具
- 命名颜色- 颜色命名器
- 无障碍品牌颜色- 颜色无障碍检查器
- 扁平化 UI 颜色- 调色板
- Coolors Palette Creator - 随机调色板生成器
- mycolor Palette Creator - 随机调色板生成器
设计系统
字体
- Google Fonts——庞大的字体库
- Font Flipper - 随机字体生成器
- Font Squirrel - 网页字体生成器
- 在线字体转换器- 创建@font-face规则并在线转换字体
- 野生字体- 字体库
- webfontloader - 控制@font-face 规则的工具
- BEfonts——设计师的免费字体
图标
- flaticon - 矢量图标和贴纸
- Material Icons - 巨大的图标库
- icones - 图标集
- Tabler 图标- 完全可定制的免费 svg 图标
- iconmonstr - 图标库
- IcoMoon - 像素完美的图标解决方案
- heroicons - 免费图标库
- heroicons - 由 tailwindcss 的开发者制作
- Bootstrap 图标- 免费图标库
- Font Awesome - 图标库
- Simlpe Icons - 图标库
- Icon Finder - 图标库和插图
- 700+ CSS 图标- 开源 svg 和 figma ui 图标
- 精简- 图标和表情符号
优化工具
库存照片-插图-模型
- Unsplash - 免版税图片
- Pexels - 免费素材照片和视频
- Pixabay - 免费图片和免版税素材
- Doodle Ipsum - 免费插图和涂鸦
- ls.graphics,Mockups 和 UI toolsl - 模型、插图和 UI 工具
- PurePNG - 纯 PNG 图像库
- FavPNG - 免费透明 PNG 图像
- CleanPNG - 免费 PNG 图像
- StickPNG - 免费 PNG 贴纸
响应式设计工具
- MY DEVICE.io是一款用于响应式设计和浏览器功能的工具
工具
排版
- 排版 101 - 初学者网页设计(作者:Dev Ed) - 排版 101 介绍视频
- CSS Wizardry 的《最快的 Google 字体》 ——一篇关于如何使用 Google 字体提升性能的文章
设计网站
- 用户体验法则——设计和用户界面的最佳实践
- uxcel ——ui/ux 设计课程和技能测试
- Ux 工具- 教程和方法,设计技巧
- 设计资源——各种设计工具的庞大来源
- UI 设计日报- 每日设计和 UI 作品
- 每日为您的项目精选免费 UI 套件每日设计和 UI 作品
HTML
无障碍设施
HTML 文章
清单
表现
验证
HTML网站
CSS
CSS 文章
- Josh W Comeau 撰写的《Flexbox 交互式指南》
- 理解 CSS 中的剪切路径 作者:Ahmad Shadeed
- Ahmad Shadeed 的防御性 CSS
- Fabrice Lejeune 的高效字体堆栈与 Sass
- Jonathan Suh 的《使用 Sass Maps 实现响应式排版》
- 一份文档齐全的 CSS 代码库是什么样的?作者:Kaloyan Kosev
- Kaloyan Kosev 编写的 CSS 编程文档选项
- 构建你的 SASS 项目
- 网格完整指南
- 你必须知道的 14 个 CSS 主题
- 简化表单样式
accent-color
- 大视口、小视口和动态视口
- 理解布局算法
架构-方法论
- Kiltty Giraudel 的 Sass 指南
- Jonathan Snook 撰写的《CSS 的可扩展和模块化架构》
- Harry Roberts 的 CSS 指南
- 面向对象 CSS(OOCSS)简介
- Matthew Elsom 的简单 SCSS 架构
- BEM 速查表
- 组织你的 CSS / SCSS 代码
CSS-in-JS
CSS 设计系统
CSS生成器
- CSS-GEN box-shadow 生成器
- CSS-GEN 边框半径生成器
- CSS-GEN 变换生成器
- CSS-GEN 图像过滤器生成器
- CSS 网格生成器- 网格生成器
- CSS 按钮生成器- 按钮生成器
- CSS box-shadow 生成器- box-shadow 生成器
- Neumorphism.io - 生成 Sof-UI CSS 代码
- 制造一些波浪! - 波浪发生器
- CSS 分隔符生成器- 制作不规则的 HTML 和 CSS 分隔符
- uiGradients - 渐变生成器
- 缓和渐变- 渐变生成器
- CSS 渐变- 渐变生成器
- 渐变设计器- 渐变生成器
- 网格渐变- 渐变生成器
- 精美边框半径- 边框半径生成器
- 平滑阴影渐变- box-shadow 渐变
- CSS 滚动阴影!
CSS 视频
CSS-网站
- css技巧
- cssreference.io
- cssauthor
- Stephanie Eckles 的现代 CSS 解决方案
- 斯蒂芬妮·埃克尔斯 (Stephanie Eckles) 的《时尚舞台》
- Heydon Pickering 和 Andy Bell 的《Every Layout》
- CSS { 现实生活中 } 作者:Michelle Barker
- CSS 速查表
- CSS 现状
- Sass 备忘单
- 精选的 Sass 和 SCSS 框架、库、样式指南、文章和资源列表。
- CSS 中的 100% 是什么意思?
前端资源
前端文章
- Smashing Magazine - 网页设计和开发指南
- 为什么学习编码如此困难?
- 前端开发人员终端指南
- 如何快速学习
- 前端可能很快就需要新的子学科
- 学习编程:如何像程序员一样思考 - Zapier
- 2023 年如何编写可维护的 JavaScript 代码——Web 还是 Node.js
前端挑战
前端调查
前端网站
- 模式- 一组代码片段,可帮助您优化 Web 项目。
- 代码谷
- 对比
- 101 个 DevTools 技巧
- Ritik Patni 的前端 Web 开发资源
- Tim Navrotskyy 的前端开发书签
- Rahul 推荐的 2021 年前端开发终极资源(200+)
- ZTM 免费开发者资源
Git和Github
Git 课程
Git 视频
Git 网站
Git工具
- lazygit用于 git 命令的简单终端 UI
JavaScript
JavaScript 文章
- 您应该使用的 6 大 JavaScript ES12 功能
- 浅显易懂的 JavaScript - 每天都有新的 JavaScript 内容
- 更快地构建 DOM:推测解析、异步、延迟和预加载(作者:Milica Mihajlija)
- JavaScript DOM 终极教程 - JS DOM 示例
- 学习 JavaScript 中的 map()、filter()、reduce() 和 sort()
- 如何使用 vanilla JS 在 5 分钟或更短的时间内创建黑暗主题系统。
- ES6 手册
- Javascript 中的 Promises、Async 和 Await Promises 简介!✨
- 2021 年我如何打造一个现代化的网站
- 17 个拯救生命的 JavaScript 单行代码 🔥
- 2ality – JavaScript 及更多
- 如何像专业人士一样使用 JavaScript 数组
- 我应该学习多少 JavaScript?🤔
- 语句与表达式
- 你需要了解的 165 多个 JavaScript 术语
JavaScript 书籍
- 你不懂 Javascript 作者:Kyle Simpson
- Kyle Simpson 的函数式轻量级 JavaScript
- 雄辩的 Javascript 作者:Marijn Haverbeke
- JSbooks——最好的免费 JavaScript 资源
- 探索 JS:面向程序员的 JavaScript 书籍
- Lydia Hallie 和 Addy Osmani 的《学习模式》
- JavaScript Allongé:函数、对象、组合器和装饰器的强大组合
JavaScript 会议演讲
- 通过使用 Katerina Trajchevska 的 SOLID 设计原则成为更好的开发人员
- Brenna O'Brien 的“真正的 JavaScript 开发者”神话
- 如何修复网络(作者:Brendan Eich)
- 只用 JavaScript 就能更好地掌握 JavaScript - Wes Bos
- 学习使用 JavaScript 进行函数式编程 - Anjana Vakil
JavaScript 课程实践
- 30天JavaScript
- 如何编写开源 JavaScript 库 - egghead
- 学习现代 Javascript - scrimba
- 免费学习 JavaScript - scrimba
- 干净的代码-javascript
- node.js 最佳实践
- JavaScript 算法和数据结构
- JavaScript 速查表:高级概念
JavaScript工具
-巴别塔
JavaScript 网站
- 仅 Javascript - 基于文本的 JavaScript 课程
- Whatthefuck.is - - dan 的 javascript 术语表
- JavaScript 模式研讨会
- 免费 Javascript 资源
- JavaScript 速查表
- SheCodes Javascript 速查表
- JavaScript 猫咪教程
- Javascript.info
- 在线学习 JavaScript
- 学习 JS
- egghead.io - Javascript
- codecademy - 学习 Javascript
- 公共 API
- JSON Crack - 无缝地将您的 JSON 数据即时可视化为图表
- 使用原生 JavaScript 管理 HTML DOM
反应
React 文章
- 如何学习 React - 有效方法
- 每个 React 开发人员必须知道的 5 个软件包
- 2021 年 Web 开发者终极 ReactJS 资源🛠👨💻
- React — 5 件可能会让你感到惊讶的事情
- 在现代 React 开发中实现原子设计
- 每个 React 开发人员都应该知道的一些功能
- useEffect 完整指南
- 使用刷新令牌轮换在 React 中持久登录
- React 身份验证和访问控制
- 作为 React 开发人员你应该知道的 13 个库
- 成为 React 大师的 19 个 GitHub 代码库⚛️🧙
- 原子设计和 ReactJS
React框架
React-Hooks
React 状态管理
React 工具
- 金翅雀
- 创建 React 应用
- React 入门项目
- React 开发工具
- React Redux
- 故事书
- React.js 速查表
- 常绿
- React Styleguisist
- React 测试库
- 反应
- React Cosmos
- React Proto
- React 热加载器
- React Hook 表单
- React Bits
- 反应引导
- kbar——命令+k界面
TypeScript
TypeScript 文章
- 面向 React 开发者的 TypeScript – TypeScript 为何有用以及其工作原理
- TypeScript 简介
- 2022 年 TypeScript 的相关性
- 使用 Vite 创建 TypeScript React 应用程序
- 在 Typescript 中创建自定义类型
- 使用 TypeScript 的 React 事件处理程序
- 30+篇文章,让你学习TypeScript不再困惑
TypeScript 课程
TypeScript 挑战
TypeScript 工具
其他内容
博客
- Dav Abramov 中等
- 反应过度 - Dav Abramov 博客
- Kent C. Dodds 博客
- DEV 社区
- alligator.io
- 弗拉维奥·科佩斯
- 乌娜·克拉维茨
- 西尔维斯塔·比斯特罗维奇
- 刘泽尔
- Kyle Cook(Web Dev Simplified)
- 莉迪亚·哈莉
- 李罗布
其他书籍
代码格式化程序
开发者和生产力工具
- Raycast - 具有超强能力的 Spotlight,拥有许多出色的扩展。
- Snipetty - 开发人员创建代码片段的工具。
- Polypane - 用于构建应用程序和重构的开发专用浏览器。
- React 开发者工具- 用于 React 开发的 Chrome 扩展程序。
- Thor - 通过自定义快捷方式轻松在应用程序之间切换。
- AltTab - 深度定制您的 alt-tab 设置。
- xScope——设计和开发的绝佳工具。
- Sip - Mac OS 的颜色选择器。
- RainDrop - 书签管理器。
- Github Copilot——你的 AI 配对程序员。
- WakaTime - 在浏览器和 IDE 中跟踪您的时间。
- GitKarken - 具有许多功能的 Git GUI 和 Git CLI。
- DevBook - 无需切换到浏览器即可搜索 DevDocs 和 StackOverflow。
- daily.dev——查找最热门趋势和热门文章的绝佳工具。
Discord 社区
文档
- TypeScript 文档
互动游戏
- 弹性盒子冒险
- 弹性盒表格骑士
- 弹性框僵尸
- 弹性盒青蛙
- 弹性框防御
- 弹性盒子
- CSS 网格花园
- CSS 网格速查表
- CSS 网格攻击
- CSS 网格小动物
- CSS 选择器速查表
- CSS动画
- CSS 规则
- CSS 过滤器混合
- CSS 之战
- CSS 餐厅
- TypeScript 练习
- React 教程
- 电梯传奇 - JavaScript
- Screeps - JavaScript
- 不受信任 - JavaScript
- PromiSEES - Javascript
- JSchallenger
- JS机器人
- 服务工作 (PWA)
- 学习 Git 分支
- 选择 Star SQL
- SQL警察局
- SQLBolt
- 正则表达式填字游戏
- 正则表达式101
- RegexOne
- CodinGame
- OpenVim
- Jamstack 攻击
- JavaScript 测验
面试实践
- 编程面试大学
- 使命与和平访谈
- 前端开发人员面试问题
- React 面试问题
- 123 个 JavaScript 面试必备问题
- JavaScript 面试问题与答案
- JavaScript 问题
- 技术面试手册
- Yangshun Tay 撰写的《前端面试手册》
- JavaScript 代码挑战
- 每个 JavaScript 开发人员都应该知道的 10 个面试问题
系统设计
时事通讯
- STACKR 新闻
- 凯文·鲍威尔的时事通讯
- Flaviocopes 时事通讯
- CSS-Tricks 时事通讯
- Smashing 杂志时事通讯
- Stephanie Eckles 的 ModernCSS
- 斯蒂芬的网络周刊
- JavaScript 周刊
- 网络工具周刊
- Web Dev Simplified 新闻通讯
- 前端焦点
- CSS动画周刊
- 开发技巧
- CSS周刊
播客
- 句法。
- 前端欢乐时光
- CSS播客
- freeCodeCamp 播客
- 商店脱口秀
- CodePen 电台
- JavaScript Jabber
- JS派对
- 瓢虫播客
- Orbit FM - 明日之网
- 全栈电台
- Frontside播客
- 开发者茶
- egghead.io 播客
- 前端播客
- 2021 年前端新闻
Reddit 子版块
- freeCodeCamp.org:在家免费学习编码
- 编程
- 询问计算机科学
- iOS 编程
- 学习 Javascript
- 计算机科学
- 网页设计
- 编码
- 学习编程
- JavaScript
- 询问编程
- webdev:面向 Web 开发人员的 Reddit
- 超文本标记语言
- HTML5 及其朋友
- 自 2013 年以来,网络已走出 2007 年。
- 层叠样式表
- 有关 reddit 自定义 CSS 的官方公告
- ProCSS
- css_irl
- Reddit CSS 帮助
- Sass——一种用于构建出色 CSS 的语言
路线图
- React 路线图
- codeSTACKr 的 2022 年 Web 开发路线图
- 网络技能路线图
- 成为现代前端开发人员的分步指南(roadmap.sh)
- FrontendMasters 的前端开发人员学习路线图
- 如何学习 JavaScript 2021
- React 高级教育
在线课程
Youtube频道
- 火船
- 凯文·鲍威尔
- 代码STACKr
- 特拉弗西媒体
- 设计课程
- 简化 Web 开发
- 韦斯·博斯
- 网络忍者
- 开发版
- 亚当·阿盖尔
- 编码器 编码器
- 聪明的程序员
- 编码技术
- 多利安开发
- 阿德里安·特瓦罗格
- 本·阿瓦德
- 肯尼·冈德曼
- 与 Tim 一起科技
- 弗洛林·波普
- 与 Erik 一起编程
- 协同进化
- 德夫斯洛普斯
- freeCodeCamp.org
- CS50
- JSConf
- uidotdev
混合内容
- web.dev
- 程序员生存指南
- 教程杂志
- 30秒编程
- codeSTACKr 提供的超棒免费开发者资源
- Brad Traversy 和 Csaba Kissi 的设计资源
- Web 开发播客终极清单
- Suhail Kakar 为开发人员提供的最佳设计资源
- Rico 的备忘单
- Honeypot 的邪教
- codecademy Web 开发速查表
- OverAPI - 收集所有备忘单
- 科多普
- 免费编程书籍
- 免费-for.dev
- 很棒的资源
- 今天我学到了 jbranchaud 的
- 每个程序员都应该知道🤔