前端发展
你好呀
对于所有想要学习前端开发的人来说，这是一个开源存储库。
前端发展
前端Web开发是通过使用HTML，CSS和JavaScript将数据转换为图形接口的实践，以便用户可以查看并与该数据进行交互。
确保通过Star Mark展示您的支持并共享存储库
前端开发人员有用的资源列表
目录
- 前端发展
- 你好呀
- 前端开发人员有用的资源列表
- 目录
- 路线图
- 有用
- 学习
- A11y
- YouTube频道
- 博客
- 播客
- 代码编辑器
- 工具
- CSS框架
- 图标
- 颜色
- 排版
- 设计灵感
- 动画框架
- 库存资源
- 地理位置
- 蜜蜂
- 模型
- 图书
- 挑战 /游戏
- 免费的学生工具
- YouTube视频
- 测试
路线图
- 路线图 - 针对前端开发人员的分步路线图进行了详尽的描述。
有用
- BGJAR-用于您的网站，博客和应用程序的免费SVG背景生成器。
- 检查 - 检查并调试您的移动网络应用程序以及直接从Mac或Windows上的iOS设备上的网站。
学习
- Flexbox的完整指南| CSS -Tricks-弹性盒布局的综合指南。
- 网格的完整指南| CSS -Tricks-网格布局的综合指南。
- 命令线电源用户 - 用于Web开发人员的视频系列，用于学习使用ZSH，Z和相关工具的现代命令行工作流程。
- CSS网格 - 完整的视频课程有关CSS网格
- 最好的JS网站，以查看您最喜欢的JS框架的最佳GitHub存储库
- CodeCademy-一系列互动课程教导世界如何编码。提供各种语言的免费和付费订阅。
- Codementor-一种工具，可以在学习过程中从各种编码语言中获得经验丰富的开发人员的帮助。
- Scaleer主题 - 学习诸如HTML，Java，JavaScript，Python等编程语言的平台。
- 征服响应式布局 - 由凯文·鲍威尔（Kevin Powell）（https://twitter.com/kevinjpowell）制作。本课程将介绍他在他出色的21天课程中创建响应式布局所需的一切。
- Coursera-从斯坦福大学和耶鲁大学等著名学校提供的各种课程。
- CSS年鉴| CSS -Tricks- CSS许多功能的快速参考指南。
- CSS网格游乐场 - 由Mozilla团队策划的视觉指南，可帮助您学习CSS的网格布局功能，其中包括许多代码示例和演示。
- 设计资源 - Skullface设计资源。
- dev.to-程序员分享想法并互相帮助的地方。
- DevProjects-一个免费的社区由高级开发人员的精心策划项目组成，以帮助您弥合理论与实践之间的差距。呢
- Dicoding Academy-每个人都可以从基本面学习编程（仅在印度尼西亚提供）。
- EDX-哈佛大学，麻省理工学院，沃顿商学院等一系列大学级课程。
- Egghead-“咬合大小”段中的网络开发视频教程。具有免费和“ Pro”（付费）会员资格。
- Enboard |前端资源 - 有关前端开发的有组织资源。
- Flexbox-升级您的Flexbox知识 - 在线，以僵尸为中心的故事课程。
- FreeCodeCamp-一种免费的资源，结合了编程项目和开发人员工作的面试准备。
- 前端大师 - 来自行业领导者的网络开发视频教程（经常更新）。具有免费（限时）和付费会员资格。
- Full Stack Open-赫尔辛斯基大学的全堆栈Web开发课程。一口气学习React，Redux，Node.js，MongoDB，GraphQl和TypeScript！本课程将向您介绍基于JavaScript的现代网络开发。主要重点是使用使用Node.js构建的REST API的ReactJ构建单页应用程序。
- Geeksforgeeks-怪胎的计算机科学门户。
- 可汗学院 - 一个通用的在线学习平台，还为开发人员提供了重要的课程。
- 学习 - 搜索交互式思维地图以学习任何东西。
- 学习JavaScript-在互动环境中学习JavaScript。在浏览器中直接阅读简短的课程，记笔记和完整的挑战。
- 掌握Markdown-一个迷你系列，将改变您编写文档的方式。
- Mozilla开发人员网络 - 有关开放Web技术的最新信息。
- 完整的Web开发教程-Lyty.dev完整的Web开发教程，免费解释了示例。
- PLURALSIGHT - 来自行业专家的无限在线开发人员培训。
- Saylor-一种开放的在线学习解决方案，为学生提供大学学分机会。
- Scrimba-基于多种语言的基于代码屏幕的学习。
- 苏格兰威士忌 - 许多网络开发课程。具有免费和“ Premium”（付费）会员资格。
- 搜索课程 - 精选的趋势课程和教程。
- SoloLearn-一个免费学习Web开发的门户。
- Team Treehouse-跨多种语言和主题的自定进度学习。
- 现代JavaScript教程 - 有关JavaScript语言的所有内容。
- ODIN项目 - 用于学习Web开发的开源课程
- 教程点 - 具有交互式代码示例的许多不同语言的教程。
- Udacity-在线学习任何东西 - 深度学习，机器学习，前端语言。
- Udemy-在线学习和教学市场。
- 观看和代码 - 针对要求智力严格和深度的学生的计算机科学学校。
- W3School-网络开发参考库。涵盖HTML，CSS，JavaScript（jQuery，Ajax等）以及一些服务器端语言。包括描述和交互式示例。
- Web API | MDN-初学者需要了解的有关Web API的一切。
- Bulma CSS和Marksheet.io的Jeremy Thomas Creator在4分钟内的网页设计。
- Wesbos-网络开发中的免费和高级课程
- Web开发技巧 - 您的所有CSS，JS，jQuery趋势代码都在一个地方源代码。您的所有类型现代网络开发和设计的方便合作伙伴。
- Web.dev- Google开发人员的现代快速网站指南和资源。
- 成为前端Web开发人员 - 与HTML，CSS，JavaScript和JQuery开发能力。
- WebGlossary.info-网络开发和设计的词汇表，有3500多个条目（截至2023年8月）
- 网络技能 - 作为网络开发人员学习的有用技能的视觉概述。
- 应用程序啤酒厂 - 一台平台，以涵盖您的网络开发技能
- Full Stack Open 2021-本课程用JavaScript作为现代Web应用程序开发的介绍。
- DevTools Tech-一个免费的面试准备平台，针对前端工程师，重点是高质量的现实世界编程问题。
⬆回到顶部
A11y
- A11Y样式指南 - 由KSS记录的样式产生的生活方式指南或模式库……具有可访问性的扭曲。
- 斧头 - 可访问性测试工具包。
- 颜色对比分析仪 - CCA可帮助您确定文本的可读性以及视觉元素的对比度，例如图形控件和视觉指示器。
- Deque University-网络和移动可访问性技能的在线课程。
- W3C介绍Web可访问性 - 策略，标准，资源，使残疾人可以使用网络。
⬆回到顶部
YouTube频道
- APNA学院 - HTML，CSS，Bootstrap，JavaScript，Git，Git，GitHub，SQL
- Adrian Twarog- HTML，CSS，Bootstrap，JavaScript，React，React的教程
本地，UI/UX和酷设计的东西 - 1stwebdesigner- WordPress上的教程，PSD到HTML
- 布拉德·侯赛（Brad Hussey） - 自举，萨斯（Sass），jquery，php，自由职业的教程
- CSS技巧 - Chris Coyier的YouTube频道CSS CSS Tricks的YouTube频道。
- CSS教程 - 侯赛因爵士（Husain Sir）在印地语中的教程，涵盖了CSS的所有基础知识。
- 编码器指南 - HTML，CSS，JavaScript，Bootstrap的教程
- CodeVolution-关于React，Vue，Angular，MongoDB，JavaScript，Mean Stack，HTML，CSS的教程。
- 聪明的程序员 - 关于React，MongoDB，JavaScript，Mern Stack，HTML，CSS的教程。
- 德里克·巴纳斯（Derek Banas） - C＃，Visual Basic，Django，Python，Nodejs，AngularJS，MongoDB，Jquery，Jquery，JavaScript，CSS，Ruby on Rails，Java，sqlite，sqlite，android，html，html，php，php，php，php，php，php，php，php，
- DevTips- HTML5，CSS，Sass，Bootstrap，Foundation，Jquery，Ruby on Rails on Rails，Github上的教程。
- DesignCourse- UI/UX设计或HTML5，CSS，SASS，动画库的教程。
- Dennis Ivy-关于Django和Flask Full -Stack Web开发项目的教程
- Elzero Web学校 -仅阿拉伯语
- FreecodeCamp-关于jQuery，JavaScript，React，数学，科学，软件工程，开源软件的教程
- 有趣的娱乐功能 - 关于JavaScript，React，功能编程，GraphQl，Life作为开发人员的教程
- Google Chrome Developers - 有关现代网络开发的最新和最伟大的谈判，采用专业指数，见解和技术，可帮助您提高网络开发技能。
- 凯文·鲍威尔（Kevin Powell） - HTML，CSS上的教程，以简单的方式帮助更好地理解CSS
- LearnCode.Academy- HTML，CSS，JQUERY，JAVASCRIPT，REECT JS / REDUX，节点JS的教程
- Leveluptuts- HTML，CSS，SASS，WordPress，Magento，Drupal，React，流星的教程
- Mackenzie Child-设计对代码挑战的设计 - UI上的教程，如何设计和编码多种样式的网站。
- 编码列车 - 有关JavaScript，节点，机器学习，神经网络，算法的教程
- NET NINJA- HTML，CSS，JQUERY，JAVASCRIPT，GIT和GITHUB，Bootstrap，Mangodb，PSD，psd到WordPress，PSD，psd到HTML等等。
- Thedigicraft- HTML，CSS，JQuery，PHP，Ajax，Bootstrap，MySQL上的教程。
- 当时的ewboston-关于ecmascript 6，react js / redux，django，angular 2，gulp，git，git，python，seo，sass，sass，sass，grunt，插图仪，蒙古多德，php，php，php，ruby，ruby，ruby，ruby，ruby，ruby，客观c
- Traversy Media - Tutorials on HTML, CSS, jQuery, PHP, Ajax, Bootstrap, MySQL, ECMAScript 6, React JS / Redux, Django, Angular, Ionic, Gulp, Git, Python, Node JS, PHP, Laravel, Cake PHP, Symfony, CodeIgniter, Programming Tips
- CodeWithHarry- HTML，CSS，JavaScript，Node JS，MongoDB和托管的教程。
- 使用MOSH的编程 - 关于React，Nodejs，Python，JavaScript，Angular，typescipt和C＃的教程。
- 开发 - 学习网络开发，网页设计，3D建模，诸如无花果等工具等等
- Web Dev简化 - 使用HTML，JavaScript，CSS和其他相同项目的框架以及更多的框架学习网站开发
- Mozilla开发人员 - 用于帮助您作为网页设计师，Web开发人员或涉及的网站或网络应用程序的人员的视频
- Academind-总有一些东西要学习。无论您想看角教程还是指南，vue.js，其他前端开发内容或数据科学主题或其他任何内容 - 您都可能正确
- Sonny Sangha项目教程有关React，Redux，Next JS和React本地的教程
- WB Web开发 - HTML，CSS，Bootstrap，Sass，JavaScript，Git和Github，MongoDB，Nodejs，reactjs的教程
- 在线教程 - 前端Web开发的顶级内容。具有HTML，CSS和JavaScript的独家教程，具有惊人的效果。必须访问所有前端开发人员
- Akshay saini-在前端面试技巧，面试经验以及JavaScript的核心概念。
- DevTools的技术视频 - 有关高级前端概念，面试问题和经验，并专注于中间至高级JavaScript概念。
⬆回到顶部
博客
- 10需要了解JavaScript概念课程 - 从基本到进步JavaScript概念，以简单的方式解释了每个JavaScript开发人员都需要知道的。
- 提高创意的100种方法 - 从Shaunta Grimes中提高创意的100种方法。
- 2017年设计综述 - 2017年所有CODROPS Web开发资源的收集。
- 您（可能）忘记设计的50件事 - UX电动工具 - 中型 - 您可能忘了从乔恩·摩尔（Jon Moore）设计的50件事
- 代码2K17的ACM月份：构建Moodify -ACM代码2K17：从Ajay NS构建Moodify。
- 使用Github＆Cloudflare建立网站的插图指南 - 使用Karan Thakkar的GitHub和Cloudflare设置网站的插图指南。
- Brad Frost Blog- CSS＆HTML的Atomic Design，建筑设计系统的作者。
- 最佳免费字体-70+最佳设计师字体 - 2019年免费商业用途
- CSS动画与网络动画API：案例研究
- CSS技巧 - 有关CSS，HTML，JavaScript的每日文章以及与Web设计和开发有关的所有内容。
- 设计和创造力引号-Margaret Kelsey关于设计和创造力的72句话。
- 设计资源 - 用于设计和学习设计的资源清单。
- 变革设计 - Viba Mohan关于再生和可持续设计的文章。
- 域注册商DNS和托管 - 域注册商，DNS和来自Kirby Kohlmorge的托管
- Gatsby的初学者指南-Gatsby.js：如何设置和使用Aman Mittal的React静态站点生成器
- 2016,2017，2018年所有内容的示例
- Flavio应对教程 - 关于JavaScript和Web开发的每日教程，Flavio Copes
- 从URL到互动 - 解释我们的万维网如何运作。
- 前端教条 - 前端开发的新闻和工具，通常每天两次更新
- Frontend Weekly-与Frontend开发有关的最佳文章，链接和新闻每周向您的收件箱交付一次。
- 我如何使用CSS - 自定义CSS动画上的Process文章对BitsofCode徽标进行动画动画。
- MinMax（）函数的工作原理 - CSS MinMax（）函数的解释，可用于CSS网格布局。
- 当您是技术新手时，如何建立令人印象深刻的投资组合 - 当您是Randle Browning的新手时，如何建立令人印象深刻的投资组合
- 如何使用JavaScript和HTML为绝对初学者构建随机报价生成器 - 如何使用JavaScript和HTML构建随机引用Generator，以适用于Sophanarith Sok的绝对初学者。
- 如何构建第一个VUE组件 - 初学者项目教程，以构建Sarah Dayan的VUE组件。
- 让我们从头开始编码神经网络 - 第1部分 - Typeme - 中间 - 让我们从查尔斯·弗里德（Charles Fried）从头开始编码神经网络
- 音乐播放器的灵感 - Muzli的音乐播放器2017年灵感。
- 前端清单 - 在启动网站进行生产之前，您需要/测试的所有元素的详尽列表。
- 当您只有14岁时，建造和销售聊天机器人的感觉 - 当您只有14岁的Alec Jones时，建立和销售聊天机器人的感觉
- 可折叠边缘有什么关系？ - CSS崩溃边缘特征的说明。
- fernandocomet的UX策划资源列表的精心策划列表。
- Airbnb开源 - 工程和数据科学文章以及开源项目。
- JS的成本 - 如何有效地交付JavaScript，以获得Addy Osmani的宝贵用户体验。
- CSS卷轴snap- CSS滚动卡片上的教程，该教程使您可以在用户完成滚动后锁定视口。
- Chrome的预加载，预取和优先事项 - 有关Web Loading Operitives如何在Chrome的Neworking Stack上使用Addy Osmani的文章。
- 为自己学习git-传统的中文
- Web开发人员的IDE-选择用于Web开发的IDE时需要考虑的因素和良好选择的示例。
- 2020年的前8个天气API- 2020年的前8个天气API-开发人员的最佳免费天气API
- 数字海洋社区教程 - 专家的免费教程系列。所有这些都来自数字海洋社区。
- 对初学者的反应 - 前端开发人员的React.js手册 - 前端开发人员的React.js手册
- Ultimate React Resources - 博客包括博客文章，免费电子书，带有精选列表的GitHub存储库，使用工作代码在现实世界中对React.js的实际实现。
- CSS网格的完整介绍 - 一个博客，可通过构建不同的复杂布局来了解CSS网格的基础知识。
- Rado的博客） - 关于React依赖性和实现，GraphQL等文章的博客共同说明！
- ROBLOG-与技术，JavaScript，Node.js和Web开发有关的所有事物的首选目的地。
- 莫妮卡·鲍威尔（Monica Powell）博客 - 关于JavaScript，React，Gatsby和Git的很棒的博客。
- DevTools Tech-精心策划了前端工程师的高质量资源。
雇用
播客
- 编码块 - 专业程序员团队的软件开发播客。
- 前端欢乐时光 - 行业小组成员的前端，软件和职业发展播客。
- JavaScript Jabber- JavaScript开发人员的播客。网站还提供许多与编程相关的播客。
- 语法 - Wes Bos和Scott Tolinski的前端开发播客从Tuts等级。
⬆回到顶部
代码编辑器
Atom- Atom是一种文本编辑器，现代化，平易近人却可以黑客入侵 - 您可以自定义任何事情，但可以进行有效的使用，而无需触摸配置文件。开源|所有平台
支架 - 借助聚焦的视觉工具和预处理程序支持，Brackets是一款现代文本编辑器，可在浏览器中易于设计。它是为网络设计人员和前端开发人员而制作的。开源|所有平台
Geany -Geany是一个小型且轻巧的综合开发环境。
Intellijidea-喷气桥的通用IDE。它具有代码完成，Integrationa和版本控制系统（VCS）。
Notepad ++ -Notepad ++是免费的（如“言论自由”，也是“免费啤酒”中的）源代码编辑器和支持几种语言的替代者。仅使用Windows -PyCharm专门用于Python语言，它提供代码分析，图形调试器，集成的单元测试仪，与版本控制系统的集成，并与Django以及与Anaconda一起支持Web开发。所有平台|开源
崇高文本 - 代码，标记和散文的复杂文本编辑器。所有平台
vim -vim是一个高度可配置的文本编辑器，用于有效地创建和更改任何类型的文本。它与大多数Unix系统和Apple OS X一起被包括在“ VI”中。
Visual Studio代码 - 编辑重新定义。它具有Intellisense，内置的git命令，可扩展且可自定义的语法突出显示和自动完成。开源|所有平台
WebStorm- WebStorm是最聪明的JavaScript IDE，是用于JavaScript和相关技术的集成开发环境。所有平台
Ultraedit -Ultraedit是一种功能强大的HTML，代码编辑器可用于Mac，Windows和Linux。它带有内置文件比较实用程序，自动完成，高级布局，多标签，多窗格编辑器以及最受欢迎的编程语言的语法突出显示。
Nano -GNU Nano是Unix式操作系统的文本编辑器。
Stackblitz-一个用于JavaScript框架和库的在线开放源代码强大的代码编辑器，具有一些很棒的功能，例如GitHub Imports，Live Server和Live Server和直接提交编辑器到Github！
⬆回到顶部
视觉工作室代码扩展
- 自动重命名标签 - 重命名一个HTML/XML标签时，会自动重命名配对的HTML/XML标签。
- 更好的评论 - 此扩展颜色代码各种类型的注释，使它们具有不同的意义，并在您的其余代码中脱颖而出。
- 括号对配色器 - 颜色匹配括号以使您的代码更加可读性 - 非常有用。
- 代码咒语检查器 - 与骆驼代码配合良好的基本咒语检查器。
- ES Lint -JavaScript Linter用于突出显示代码错误和最佳实践。
- 格式化切换 - VS代码扩展名，可让您简单单击打开和关闭格式器（Prettier，Beautify，…）。
- git历史记录 - 查看git日志，文件历史记录，比较分支或提交
- Gitlens-增强Visual Studio代码中内置的GIT功能 - 通过GIT责备注释和代码镜头一目了然地可视化代码作者身份，无缝导航和探索Git存储库，通过强大的比较命令获得宝贵的见解，等等。
- JS片段 - 此扩展名在ES6语法中包含JavaScript的代码段，用于VS代码编辑器（支持JavaScript和Typescript）。
- 实时服务器 - 具有实时浏览器重新加载的快速开发实时服务器。
- 材料图标主题 - Google材料主题图标包。
- 路径IntelliSense-当您开始在引号中键入路径时，您将获得目录和文件名称的IntelliSense。
- 孔雀 - 巧妙地更改工作区的工作区颜色。当您拥有多个VS代码实例并且想快速确定哪个是哪个。
- Polacode-您知道您在文章和推文中看到的那些精美的代码屏幕截图吗？好吧，他们很可能来自Polacode。它非常简单。将一块代码复制到剪贴板，打开扩展名，粘贴代码，然后单击以保存图像！
- Prettier-在保存时自动格式化代码。
- quokka.js -quokka.js是用于快速JavaScript /打字稿原型制作的开发人员生产力工具。输入时，在代码旁边的IDE中更新了运行时值并显示在您的IDE中。
- 设置同步 - 设置同步扩展名在GitHub中保存设置。然后，您可以使用一个命令将它们加载到任何新版本的VS代码中。
⬆回到顶部
工具
- API目录|可编程Web
- Animista -CSS动画预设/发电机
- 更好的代码中心 - 根据软件工程指南检查GitHub代码库并提供反馈。
- 浏览 - 虚拟机上实时交互式跨浏览器测试。
- Lambdatest- 2000+浏览器和OS的测试网站和Web应用程序。
- 浏览器 - 在不同的浏览器和移动设备上测试网站和移动应用程序。
- 我可以使用...-桌面和移动浏览器上的HTML5，CSS3等支持表
- CheckBot-浏览器扩展程序，用于测试SEO，速度和安全问题的网站
- Codepen-社会发展环境，您可以在浏览器中编写代码，并在构建时查看结果。
- codeply- html，CSS，JavaScript编辑器游乐场，供设计师和开发人员比较，原型和测试前端框架。
- CodesandBox-网络开发的即时IDE和原型制作工具。
- 在线代码编辑器中创建一个新的小提琴-JSFIDDLE -JSFIDDLE-测试JS，CSS，HTML或Coffeescript。
- 关键路径CSS生成器 - 乔纳斯·奥尔森（Jonas Ohlsson） - 减少浏览器必须通过渲染网页的CSS数量。
- CrossBrowserTesting应用程序 - 用于在移动和桌面Web浏览器上运行功能网络测试的Web服务。
- CSS备忘单 - 非常易于使用的CSS选择器和属性的一页参考。它还包括Flexbox和Grid的类别。
- CSS Minifier-缩小您的CSS文件！
- CSS参考 - CSS的免费视觉指南。
- CSS触发器 - 告诉您突变给定CSS属性时触发的是什么。
- CSS过滤器 - 交互式CSS滤波器发生器
- Colorlisa-基于伟大艺术家的调色板生成器
- dirtymarkup-整理您的HTML，CSS和JavaScript代码。
- ExtendSclass-提供工具以添加浏览器中可直接可用的功能。
- Favicon Generator-上传图像并为您的网站生成Favicon。
- iOS/Google Progressive Web应用清单的Favicon Generator -Online工具在不同平台上测试Favicons。
- 免费开发人员的东西 - 开发人员使用的免费内容清单要使用。有些服务永远是免费的，或者至少有1年的免费服务。
- 免费开发人员 - 本网站拥有大量的免费和付费资源列表，不仅为前端开发人员，而且针对任何类型的开发人员而策划。
- 基于文本生成Favicon-从文本，图像或表情符号生成粉丝。
- 获取波 - 生成许多类型的SVG波，用于Web设计。
- Glitch-小故障就像在Google文档中一起工作 - 众多人可以同时在同一项目上工作。
- 图形生成器 - 为某些常见前端应用程序生成图形。
- Google Analytics（分析） - 跟踪和报告网站流量的Web服务。
- Google APIS Explorer-交互式探索各种Google API的工具。
- sublime文本中的JavaScript控制台 - 测试JavaScript的教程，并通过Sublime Text 3中的构建系统执行它。
- jQuery Mega备忘单 - jQuery selectros，操纵，事件等的备忘单。
- JS bin-用于HTML，CSS和JS的Live Pastebin以及一系列处理器。
- 灯塔 - 开源，自动化工具，用于提高网页的质量。
- 现代JavaScript备忘单 - Manuel Beaudru的JavaScript提示和概念的绝佳集合，可以很好地概述，如果您刚刚开始使用JavaScript和其他相关框架，则需要熟悉的许多内容。
- Node软件包管理器（NPM） - JavaScript的软件包管理器。
- 纱线 - JavaScript的软件包经理，例如NPM。
- 反应器 - 复制响应站点在流行设备上的外观。
- React备忘单 - 基于文档的网站也是一个渐进的Web应用程序，这意味着即使在离线也可以正常运行。您可以通过关键字搜索或选择一个预定义的过滤器之一。
- 响应式网格系统 - 生成灵活的网格以创建响应式网站。
- 正则表达式（REGEX）编辑器 - 有助于创建和验证您的正则表达式。
- Sans Francisco-设计师的工具 - 设计师的工具收集
- ScreensizeMap-与设备无关像素中屏幕大小的比较。
- Sizzy：浏览器测试工具 - 一次在多个设备上开发和测试响应式设计的工具。
- 堆叠溢出 - 在线社区供开发人员提出问题并获得答案。
- W3C标记验证服务 - 检查HTML，XHTML，SMIL，MATHML等中Web文档的标记有效性。
- W3C CSS验证服务 - 使用样式表检查CSS和XHTML文档的有效性。
- 时间助理 - 帮助将Millis转换为数据级，反之亦然。
- TINYPNG -PNG和JPEG压缩/优化器
- Web开发人员清单 - 对网络开发期间要介绍的内容进行了分类。
- 渐进式工具以优化您在Web上的性能 - 可用于改善页面性能的工具列表。
- Stackblitz-可以通过链接共享的Angular和React项目的在线IDE。
- Postman（用于测试API的工具）-API客户端以创建，共享，测试和文档API。
- 免费的Bootstrap 5备忘单 - 这是Bootstrap 5类，变量和Mixins的交互式列表。
- JSONT-一种在线简单而强大的JSON格式化工具。
⬆回到顶部
CSS框架
- Bootstrap-设计和自定义负责任的移动优先站点。
- Bulma CSS-基于Flexbox的模块化开源框架。
- 焦糖 - 一个简单，现代，响应迅速的网站框架。
- 红衣主教 - 性能和可扩展性的模块化移动优先框架。
- 元素CSS-基于VUE 2.0的组件库。
- 基金会CSS-响应式前端框架家族。
- 半月 - 用于构建仪表板和工具的完全可定制且响应迅速的前端框架。
- Jeet-用于Sass和手写笔的分数网格系统。
- 少-CSS网格系统用于设计自适应网站。
- 材料设计精简版 - 在香草CSS，JS和HTML中实现材料设计组件。
- 物质化CSS -CSS框架旨在允许在任何平台上的所有产品中都有统一的用户体验。
- 毫克 - 简约的CSS框架。
- 整洁 - 轻巧且灵活的杂种网格。
- 花瓣CSS-基于较少的光CSS UI框架。
- 纯CSS-一组响应的小型CSS模块。
- 语义UI -UI框架设计用于主题和响应式设计。
- 骨架CSS-简单，响应式的样板，以启动任何响应式项目。
- Spectre CSS-轻巧，响应和现代CSS框架，以更快，可扩展的开发。
- Tacit-对于图形设计的初学者来说，原始但有吸引力的框架。
- TailWindCSS-高度可定制的低级CSS框架。
- UI套件 - 网络接口的轻质和模块化前端框架。
- 非大气 - 基于百分比的流体网格系统，而不是设定的列数。
- 重要的CSS-最小的侵入性CSS框架，用于使用Sass和Slim构建的Web应用程序。
⬆回到顶部
图标
- Brandicons-图标字体生成器和查看器。
- 平面图标 - PNG，SVG，EPS，PSD和BASE64格式的免费图标数据库。
- 字体很棒 - 开源图标集和具有一致样式的工具包。
- Glyphicon-与Bootstrap，其他CSS框架和任何Web项目一起使用的图标。
- Google材料设计图标 - 材料图标的概述以及如何将它们集成到项目中。
- Icomoon-图标字体生成器和图标集合。
- Icongram-来自不同来源的图标包装。
- ICONSVG-您项目的快速可自定义图标
- ICONS8-始终如一的样式和可自定义的图标包。
- Ionicons- SVG和WebFont中的开源图标。
- Mapicons-使用SVG标记和图标标签与Google Maps API和Google Places API一起使用的图标字体。
- 材料设计标志性字体 - 完整的材料设计图标，适用于网站或桌面上的SVG。
- MFGLABS -ICONSET -MFG LAB的图标集用于WebFonts和CSS。
- MICON- Windows字体和CSS工具包。
- 名词项目 - 综合图标集合。
- Octicons - Github的项目图标集合。
- 打开标志性，免费开放的图标集 - SVG，WebFont和Raster格式中的开源图标集。
- OpenWebicons-可扩展向量图标和徽标的WebFont。
- ReactiCons -SVG React React React Icon的图标包装。
- Remixicon-开源中性样式图标系统。
- SHAPE.SO-可自定义的图标和动画集合。
- Stackicons-社交品牌的可定制图标。
- Typicons-嵌入WebFont中的免费使用向量图标。
- 天气图标 - 天气主题图标字体和CSS。
- zocial | CSS3按钮集 - 使用CSS创建社交按钮，并将社交图标作为字体。
⬆回到顶部
颜色
- Adobe颜色 - 色轮，提取主题，提取梯度，可访问性工具等
- BADA55颜色代码 - 将Leet单词转换为CSS十六进制颜色。
- Branition Colors-手工策划的调色板收集最适合品牌。
- 彩色狩猎 - 开放的美丽调色板集
- Natalya Shelburne的颜色理论 - 代码的人的实用颜色理论：有关颜色使用的教程与示例
- 色轮|配色方案 - Adobe Color CC-具有不同颜色规则的交互式色轮（可能）
- ColorDesigner工具 - 此工具的主要目的是帮助构建调色板并基于它生成色调和阴影。只需选择颜色，其余的应用程序就可以完成。您可以使用预选的颜色或颜色选择器进行更多控制。在这里还检查其他工具
- Colormind -Bootstrap -Colormind是一种配色方案生成器，它使用深度学习自动将颜色pallete应用于实时网站模型。
- Coolors-超级快速的配色创建者，具有很多功能
- CSS梯度 - 策划的站点列表，以探索梯度和调色板。
- 数据颜色选择器 - 生成具有视觉等距颜色的调色板。对于数据可视化有用。
- 颜色设计 - 颜色设计的完整指南（文章中的文章）
- UI颜色平坦 - 平面设计的颜色选择器
- 图像彩色拾取器 - 图像彩色选择器和调色板生成器
- 大声笑颜色 - 精选调色板灵感
- 材料调色板 - 材料设计的调色板生成器
- 可调节 - 交互式彩色选择器：根据您的偏好和调色板创建一个配色方案
- Paletton - The Color Scheme Designer - Advanced tool for creating color schemes
- Picular - Google, but for colors - Primary color generator using Google's image search.
- Pigment - Palette Generator - Generate color palettes based on lighting and pigment.
- UI Gradients - Scroll through or pick from beautiful gradients, download JPG and copy CSS Code
- W3school Color Picker - Find the perfect color from the color wheel, easy control
- UI Color Picker - Best colors in few selected shades to choose from very helpful for quickly choosing and adding color to design. ！[自由的]
⬆ back to top
排版
- A Crash Course in Typography: The Basics of Type - First article of a series on Typography
- Circular Font Combinations | Free Alternatives | Typewolf - A great resource for everything related to Typography
- Font Pair - Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs. - Clean web-tool on How to pair Google Fonts
- Fontspiration - An iOS app for creating custom typographic designs
- Fontsquirrel - A resource for FREE, hand-picked, high-quality, commercial-use fonts
- Google Fonts - A catalog of free & open source fonts, great details and font pair suggestions
- Just My Type - A collection of font pairings
- Table of Contents | The Elements of Typographic Style Applied to the Web - A practical guide to web typography
- Typekit - "Quality fonts from the world's best foundries"
- Typography Terms - An infographic on Typography Terms + explanations
⬆ back to top
设计灵感
- Admire The Web - Admire the Web is where we showcase the very best in website design inspiration - carefully curated and organised to keep you inspired.
- Awwwards - The Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
- Dribble - Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.
- Site Inspire - siteInspire is a showcase of the finest web and interactive design.
- Web design Inspiration - Find inspiration for your next web design project. We help web designers, digital agencies and entrepreneurs to be inspired. Everyday, our team of experts hand picks the best new web designs from all over the world.
- Behance - Behance is a social media platform to showcase and discover creative work like Graphic Design, Illustration, Game Design and many more things
- Pinterest - Pinterest has a host of design inspirations in a variety of forms and styles.
- Pixpa - Pixpa features some nice modern designs and inspirations for web designers and photographers.
- Lapa Ninja - Lapa Ninja is a gallery featuring the best 4127 landing page examples, free books for designers and free UI kits from around the web.
- Landings - Find the best landing pages for your design inspiration based on your preference.
⬆ back to top
Animation Frameworks
- Animate CSS - Choose, try out and get the CSS-Code for different animation types (over 70)
- Anime JS - It's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.
- Bounce JS - Tool and JS Library, creating CSS3 powered animations(adjustments possible) & export CSS code
- Magic Animations - Showcase of different animations with link to GitHub repo
- MO JS - The library provides built-in components to start animating from scratch like HTML, shape, swirl, burst, and stagger but also brings you tools to help craft your animation in a most natural way.
- Particles JS - A lightweight JavaScript library for creating particles.
- Typed JS - A JavaScript typing animation library with a great documentation on GitHub
- Wow JS - JavaScript library: Reveal CSS animation as you scroll down a page
⬆ back to top
Stock Resources
- Burst - Free, high-resolution images. All our pictures are free to download for personal and commercial use.
- Canva - 8,000+ free templates and thousands of free photos
- Free stock images and Videos - A great collection of stock photos, videos and other resources. Most of them under the CC0-License, all of them free.
- Gratisography - Photographer Ryan McGuire provides this collection of high-resolution pictures for free. You can use them on your personal or commercial project free of copyright restrictions.
- Humaaans - Library of editable people illustrations. Free for both commercial and personal use.
- I'd Pin That! - Created to help bloggers and non-designers create high quality images like those often seen on Pinterest. I'd Pin That is more than just a source for free images — it is an image editor! Use the tools provided here to add your own text and edit the images right on the site.
- Illlustrations - 120+ Awesome free illustrations made by the artist vijay verma on a 100 days challenge.
- MakerBook - The best free resources for creatives - A directory of sites to get free resources (Photography, Mockups, Graphics, Textures, Fonts, Colours, Video, Audio & Tools).
- Morguefile - Founded in 1996 by college student Michael Connors.Photographers contribute images to Morguefile for visitors to use in their creative projects. Yes, they're all completely free. The website does ask that you credit the photographer when possible.
- Open Doodles - A Free Set of Open-Source Illustrations.
- The Open Photo Project - The Open Photo Project is a photo sharing platform created in 1998 by Michael Jastremski. Contributors have offered their images free of charge under terms of Creative Commons licensing.
- Pexels - Exclusively stock photos of high quality, great feature: Filter photos by color.
- Picalls - Free photos and wallpapers licensed under the Creative Commons CC0 license.
- Pixabay - In addition to photos, Pixabay offers video, vectors and illustrations.
- Pikwizard - Free stock photo library for commercial and editorial use. Huge library of stunning, high quality, royalty free images.无需归因
- Public Domain Archive - “a public domain image repository” created by Matt a graphic designer, web designer and photographer.Vintage and modern images.
- StockSnap.io - High quality stock photos free to download and use. Licensed under the Creative Commons CC0 license.
- The Stocks - Another awesome directory sharing sites for resources, loading directly on the webpage
- UnDraw - "MIT licensed illustrations for every project you can imagine and create
- UnSplash - "Beautiful, Free Photos" & themed collections of photos
- 3D Bay - "Free, 3D Illustrations" A collection of High-quality 3D Illustration resources
- Design Stripe - "Create beautiful illustrations, no design skills needed
⬆ back to top
地理位置
- Geocomplete-location autocomplete - An advanced jQuery plugin that wraps the Google Maps APIs Geocoding and Places Autocomplete services into a dropdown for an input-form.
- Google maps API | Google - Google Map APIs including documentation & learning resources - extensive
- Google maps API | Traversy - Great YouTube tutorial on using the Google Maps APIs
- OpenCage Geocoder - Free to use forward (lat/long to text) and reverse (text to lat/long) geocoding API
- GeoJS - Free to use API for geolocation lookup by IP address
⬆ back to top
蜜蜂
- Alexa API | Codecademy - Learn to develop a custom Amazon Alexa skill that respond to the user's voice with custom messages.
- Abstract APIs - Free utility API's for compressing images, creating user avatars, validating emails, and more
- jsonplaceholder - Fake Online REST API for Testing and Prototyping
- A list of public APIs
- Lorem Picsum - Easy to use and customize placeholder photos
- OpenWeatherMap - Weather API with free and paid licenses
- Random famous quotes | Rapid APIs - Gets a random quote in JSON format.
- TMDB API - API Service for those who are interested in displaying data/images about different movies, TV Shows or actors in their application.
- Unsplash Source - API to retrieve random images from Unsplash.com
- Web APIs | MDN
- News API - Locate articles and breaking news headlines from news sources and blogs across the web with our JSON API.
- Spotify API - Spotify's Web API allows you to find music and podcasts, manage your Spotify collection, control audio playing, and do a variety of other things.
⬆ back to top
模型
- Am I Responsive - This is a tool to check the responsiveness of a website and take a screenshot on multiple devices in a single frame. Go to the site and enter the URL to capture the screenshot. You should have separate screen capture tool to take the proper screenshot.
- Figma - Free app with a simple to use surface for designing, prototyping and sharing your website and app ideas
- Adobe XD - One of the best tool for UI/UX Design, Wireframe, animate, prototype, collaborate, and more
- Magic Mockups - Place your product in realistic environment! Free real-life product/app mockup generator. Laptop, Phone, Tablet, Imac.
- Rotato 3D Mockup Generator - Make video 3D mockups and images.无需经验。 Unlimited renders. MacOS.
- The MockUp Club - Website that offers free downloads of design mockups (mostly Photoshop format).
- MockupsJar - Build mockups with screenshots of your application or web Design for free to share with customers and clients
- MockUPhone - Free and simple screenshots device mockups generator. Wrap your design in mobile devices or Laptop/Desktop in a few clicks!
- Multi Device Website Mockup Generator - Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, MacBook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click. You should have a proper screen grabber tool to take the screenshot from the browser.
- Wireframe.cc - Great tool for sketching out ideas and layouts, super minimalistic
⬆ back to top
图书
- Ebook Foundation-free programing books: GitHub Repository - A directory of free learning resources, categorized by language
- HTML Basics - A workshop covering the basics of HTML (free pdf/18 pages)
- HTML5 for Masterminds, 2nd Edition - A complete course from Beginner to Mastermind
- HTML5 Pocket Reference (Pocket Reference (O'Reilly) - A comprehensive compact reference for HTML 5
- HTML Tutorialspoint - A thorough tutorial on HTML (free pdf/486 pages)
- Learn How To Code In HTML5 and CSS3 - A free e-book about making websites in HTML5 and CSS for absolute beginners
- Responsive Web Design with HTML5 and CSS3 - A comprehensive book about making RWD
- You don't know JS - Book series diving deep into the core mechanisms of the JavaScript language.
- Guide to Git and Github - A beginner friendly guide to using git and working with Github.
- Introduction to HTTP - Introduction to HTTP, the stateless protocol underlying all of the web.
- Introduction to the Command Line - A short and beginner friendly introduction to the command line, covering common commands that will make you immediately productive.
- HTML & CSS Books ![Free]
- Web Design Playground, Second Edition - Modern HTML, CSS, and web design standards.Paid
- Build a Frontend Web Framework (From Scratch) - Learn how a frontend web framework works by coding your own.Paid
⬆ back to top
Challenges / Games
- Ace Front End - Ace Front End has complete and practical coding challenges, with a detailed walk through of a perfect interview solution.
- Codepen Challenges - Each month has a theme and every week there is a new challenge prompt that you can use to build a project online using HTML, CSS and JavaScript. The best projects are featured on Codepen's homepage.
- Codewars - Improve your skills by training with others on real code challenges.
- CSS Battle - CSSBattle is an online CSS Code Golfing game. Here, players from all around the world try to visually replicate Targets in smallest possible CSS code and battle it out to get to the top of the leaderboard.
- CSS Diner - It's a fun game to learn and practice CSS selectors.
- CSS Zen Garden - A demonstration of what can be accomplished through CSS-based design, and a chance to do your own.
- Dev Challenges - Made by Thu Nghiem. devChallenges.io is a community driven platform for anyone who wants to solve practical tasks. It has some tricky and curated challenges.
- Flexbox Defense - It is a game that covers the flex properties align-items, justify-content, flex-direction, align-self and has 12 different levels.
- Flexbox Froggy - This game is also about Flexbox and it covers even more flex properties: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and has 24 different levels.
- Front End Mentor - Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 192,401 developers building projects, reviewing code, and helping each other get better.
- Grid Garden - Interactive CSS code game. Practice your CSS skills by watering your garden! It has 28 different levels to learn CSS Grid Layout.
- Hackerrank - Practice coding, prepare for interviews, and solve interview style coding challenges.
- JavaScript30 - A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript.
- Leetcode - Coding problems to solve in a range of categories and difficulties
- Project Euler - Challenging computer science and mathematical problems.
- 100DaysOfCode - Regardless of your coding skills or your language of choice, this challenge invites you to code for at least 1 hour a day.
- Devtools Tech - Devtools Tech is a free platform for Frontend Engineers to practice high quality real world programming interview questions, follow curated learning paths, read blogs, and track progress across various frontend domains.
⬆ back to top
Free Tools For Students
- JetBrains Student License : Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members.
- Student Developer Pack : The best developer tools, free for students via @githubeducation
⬆ back to top
YouTube Videos
- Flexbox in 20 minutes - Quick crash-course on the CSS Flexbox model.
- SVGs can do that ? - Sarah Drasner's talk on nontypical pratical uses of SVGs.
- CSS Grid Tutorial - Use CSS grid to structure and position websites with ease.
- Git and GitHub for Beginners - Crash Course - Ad-free tutorial by freeCodeCamp.
- 12HR Coding Bootcamp 2021! - Complete frontend bootcamp!
⬆ back to top
测试
- Jest - JavaScript testing framework
- Mocha - JavaScript testing framework
- Karma - JavaScript test runner
- Istanbul - JavaScript test coverage tool
- TestCafe - Node.js end-to-end testing
- Cypress - JavaScript end-to-end testing framework
- Puppeteer - Google's Chrome automation tool for E2E testing.
- Playwright - Microsoft's browser automation tool for E2E testing.
- Sinon.JS - Standalone test spies, stubs and mocks for JavaScript
- Chai - Assertation library for JavaScript testing
- PactumJS - REST API Testing Tool used to automate e2e, integration, contract & component (or service level) tests
- Vitest - Vitest is a blazing fast unit test framework powered by Vite
⬆ back to top
