web dev resources下载 - web dev resources源代码下载

web dev resources

其他源码

1.0.0

下载

您需要的网络开发资源

Ismile Hossain
_{LinkedIn上的Twitter上关注我。}

这是一个完整的Web开发资源，您需要构建下一个项目。此处包括150多个以上的资源。随时探索和使用您的项目。

内容

开发人员路线图
文档和作弊表
设计工具
网络如何工作？
HTML和CSS
前端挑战或技能
字体和版式
颜色和工具
图像资源
插图
图标
发电机
可访问性
站点分析仪
Windows的终端
在线IDE，编辑
JavaScript
node.js
Python
反应
蜜蜂
开发人员工具
在线学习资源
恢复
其他的
开发人员博客网站
YouTube频道

资源

开发人员路线图

前端 - 前端开发路线图。
后端 - 后端开发路线图。
反应 - 反应开发路线图。
Andriod- Android开发路线图。
DevOps -DevOps路线图。

文档和作弊表

MDN Web文档 - MDN Web文档网站提供有关网站和渐进式Web应用程序的开放Web技术的信息，包括HTML，CSS和API。
DevDocs-快速，离线和免费文档浏览器供开发人员浏览。在一个Web应用程序中搜索100多个文档。
Devhints-备用表单的谦虚集。
Flex -Malven- CSS Flex布局的视觉备忘单。
网格 - 马尔文 - CSS网格布局的视觉备忘录。
CSS网格备忘单 - 您的最终CSS网格视觉指南。
Overapi-收集作弊表。
很棒的作弊表 - 流行编程语言，框架和开发工具的很棒的作弊表。
gitsheet-一个死去的简单git备忘录。
HTML5医生 - 这是对新元素或已在HTML5中重新定义的元素的快速参考。
HTML5帆布备忘单-HTML5画布备忘单。
备忘录 - 编程作弊表。
CSS 3，媒体查询备忘单-CSS 3，媒体查询备忘单。
SEO备忘单 - 网络开发人员的SEO备忘单。
Bootstrap 5备忘单 - ThemeSelection的Bootstrap 5备忘单。

？设计工具

无花果 - 无花果可帮助团队从头到尾创建，测试和运送更好的设计。
Adobe XD-与看起来和感觉像真实事物的设计分享您的故事。线框，动画，原型，协作等等 - 一切都在一个地方。
草图 - 创建，原型，协作并通过超过一百万人使用的设计平台（从自由职业者到世界上最大的团队）将您的想法栩栩如生。
异想天开 - 以思想速度在视觉上进行交流 - 协作流程图，线框，粘性音符和思维地图。
不设计的 - 为制造商，开发人员和设计师收集免费设计工具和资源。
Flyonui-最简单的组件库，用于逆风CSS。

网络如何工作？

互联网的工作方式 - 互联网如何运作？
互联网的工作方式简短视频 - 简要说明，互联网如何运作？
DNS- DNS的工作原理？
HTTPS- HTTPS的工作原理？

？ HTML和CSS

FreeCodeCamp-免费课程学习Web开发。
互联网很难 - 完整初学者的友好网络开发教程。
学习编码HTML＆CSS-该指南涵盖了各种网页设计和开发主题，从初学者到高级技能水平。
HTML元素 - MDN引用的HTML元素。
HTML实体 - CSS -tricks的HTML实体参考。
HTML鲨鱼 - 用于编码网站，效果和元素的智能动作和肮脏的技巧。
CSS3属性-MDN参考CSS参考。
CSS参考 - CSS的免费视觉指南。
CSS布局 - 由CSS制成的流行布局和图案的集合。
现代CSS解决方案 - 研究现代CSS解决方案的系列问题。
CSS Diner-一款有趣的游戏，可帮助您学习和练习CSS选择器。
Flexbox Froggy-一种可以帮助您学习CSS Flex的游戏。
CSS技巧 - Flexbox-弹性箱的完整指南。
以示例网格 - 学习CSS网格布局所需的所有内容。
网格花园 - 学习CSS网格的游戏。
CSS技巧 - 网格的完整指南 - CSS网格的综合指南，重点介绍了网格父母容器和网格子元素的所有设置。
学习CSS网格 - 乔纳森·苏（Jonathan Suh）的综合指南，可帮助您了解和学习CSS网格布局。
我可以使用 - 最新的浏览器支持表，以支持台式机和移动网络浏览器上的前端Web技术。
CSS效果-CSS动画。
UI片段 - 更多的CSS动画。
KeyFrames-使用Visual Timeline编辑器创建基本或复杂的CSS @KeyFrame动画。
Animista-播放准备使用CSS动画的集合。
BEM- BEM命名备忘单。
AutoPrefixer -AutoPrefixer是一个PostCSS插件，可以解析您的CSS并添加供应商前缀。
CSS Formatter-在线CSS格式化，CSS Beautifier。
占位符 - 如何使用我们的占位符。只需在我们的URL之后指定图像大小，您就会获得占位符图像。
DevProjects-通过免费的HTML/CSS项目练习您的编码技能。项目从初学者到高级级别不等。
HTML备忘单 - 完整的HTML备忘单，可帮助您掌握HTML。
CSS备忘单 - 通过此综合备忘单刷新CSS技能。
HTML和HTML5面试问题 - HTML面试问题的完整列表，可帮助您王牌面试。
ReadyTools HTML结构生成器 - 在几秒钟内生成HTML结构。使用Bootstrap或您的样式/JavaScript。
ReadyTools组件生成器 - 轻松生成HTML组件。
ReadyTools生成的按钮 - 一键单击复制精美按钮，然后在您的网站上使用它。
ReadyTools HTML minifier-压缩您的HTML文件以获得更快的加载时间和更好的性能。
HTMLREV -HTMLREV为网站和着陆页提供免费的HTML模板。

？前端挑战或技能

codepen-与我们的在线代码编辑器一起构建，共享和学习JavaScript，CSS和HTML
前端导师 - 通过构建实际项目来提高前端技能。在研究专业设计时，解决了现实世界中的HTML，CSS和JavaScript挑战。
好的代码 - 浏览数十个前端编码挑战，并附有Adobe XD文件和StyleGuides。
Codier-探索和尝试前端编码挑战。
CSSBATTATLE -CSS代码高尔夫在这里！使用您的CSS技能以最小的代码复制目标。随时查看下面的目标，并将CSS技能进行测试。

？字体和版式

Google字体 - 免费且易于使用的WebFonts的＃1资源。
字体竞技场 - 免费字体，高级字体的免费替代方案，对您进行的研究文章。
Fontjoy -Fontjoy帮助设计师选择最佳的字体组合。混合并匹配不同的字体以进行完美配对。
字体配对可帮助设计师将Google字体配对在一起。美丽的Google字体组合和对。
字体游乐场 - 播放可变字体。
字体任何内容 - 键入任何内容都是一种免费且令人敬畏的排版工具，可为您的项目创建和测试字体组合。

？颜色和工具

冷却器 - 为您的设计生成或浏览美丽的颜色组合。
0to255-一种颜色工具，使其易于减轻和深色的颜色。
Colorbox-创建惊人的颜色套件超快。
颜色X颜色 - 为UI创建可访问的颜色系统的工具
颜色和字体 - 查找颜色和版式组合，准备一键复制糊状物。
Colorspace-生成漂亮的调色板。
CSS梯度 - 免费CSS梯度生成器工具。
Uigradients-设计师和开发人员精心挑选的精美颜色梯度集合。
picular-任何东西的颜色。
可着色 - 根据您的背景颜色选择字体颜色。
快乐的色调 - 上下文中精心策划的颜色。
Branition Colors-最适合品牌的手工策划的颜色托盘系列。
彩色选择器 - 获取一个免费的彩色选择器，其中包含颜色名称，十六进制，RGB和HSL代码。
调色板 - 您的项目免费分类调色板。获取十六进制和RGB代码。
颜色对比检查器 - 轻松检查颜色对比度，以确保您的设计易于访问和视觉吸引力。
颜色梯度发生器 - 轻松地创建令人惊叹的颜色梯度。

？图像资源

Unsplash-免费图像和照片。
pexels-免费库存照片。
Pixabay-免费图像或视频。
Loading.io-您的项目免费旋转器。
Lottiefiles- Lottiefiles是为Lottie设计的动画集合 - 已经消失了开发人员的日子。
REMOVEBG-删除图像背景。
删除照片数据 - 在Internet上共享照片之前，请从照片中删除个人数据。
Befunky- Befunky的多合一在线创意平台拥有轻松编辑照片，创建图形设计并制作照片拼贴的一切所需的一切。

？插图

UNDRAW-浏览以找到适合您需求的插图，然后单击以下载。
多像素 - 免费插图来为您的项目供电。以商业或非商业方式将它们用于您的着陆页，博客文章，电子邮件新闻通讯，社交媒体图形等。
drawkit-手绘矢量插图和图标资源，非常适合您的下一个项目。
Freepik-免费的图形资源。
插图无花果 - 您可以在无花果内使用5000多个矢量图。所有FIGMA插图均采用SVG和PNG格式，包括平坦，衬里，抽象等的样式。
矢量图 - 搜索超过5000个矢量图和70多种设计样式，并具有集成的编辑器，以调整您希望的设计。

？图标

离子 - 开源和麻省理工学院许可的图标包。
字体很棒 - 矢量图标和社交徽标。
材料图标 - 材料图标是令人愉悦的，精美的符号，用于常见动作和物品。在桌面上下载将它们用于Android，iOS和Web的数字产品中。
ICONE -ICONS集合。
ICONS8-在PNG和SVG中下载免费图标。
Flaticon- SVG，PSD，PNG，EPS格式或图标字体中的自由矢量图标。
表图标 - 完全可自定义的免费SVG图标。
ICOFONT -2100+免费图标，以增添创意设计。
简单图标-1463免费的SVG图标，适用于流行品牌。
获取表情符号 - ✂️复制和？粘贴表情符号？
Ikonate-可自定义图标包。
UseAnimations-免费的动画图标。
3dicons-超过5000个3D图标和具有4K分辨率的字符的集合，每个图标都以5个调色板，前面和透视图交付。
Iconshock-最大的图标包，具有超过200万个专业图标的+400图标集，具有30多种设计样式：材料，平坦，3D，现实，iOS等。

⚙发电机

lorem ipsum -lorem ipsum Generator。
RealFavicongonerator -Favicon Generator
Favicon Maker-免费的Favicon Maker。
元标记 - 元标记生成器，预览您的网页在Google，Facebook，Twitter等上的外观！
Clippy -CSS剪贴式路径制造商。
我讨厌正则表达式 - 我讨厌正格书是一张正则备忘单，它也解释了常用的表达式，以便您理解它。
REGEX101-在线正则测试仪。
pyrexp-在线视觉正则表达式测试仪。
Web代码工具 - 生成HTML5，CSS3，MicroDATA，JSON -LD，Twitter卡，打开图等！
碳 - 创建并分享您来源的美丽图像。
CSS网格生成器 - 快速设计Web布局，并获取HTML和CSS代码。通过视觉学习CSS网格，并使用我们的Interactive CSS网格生成器构建Web布局。
CSS滚动阴影 - 调整控件（？），并查看CSS卷轴阴影更改。
CSS阴影发生器 - 使阴影平滑。
Haikei-生成独特的SVG设计资产。
变换 - 变换|多磁场Web转换器。
perflink | JS基准测试 - 您可以通过URL共享JavaScript性能基准。
OptimizeImages-使用此免费工具，在PNG，JPEG，SVG，AVIF，WebP，WebP和GIF格式中使用此免费工具在线优化图像，甚至获取图片HTML标签以进行正确的实现。
ReadyTools HTML和CSS Generator-使用ReadyTools代码中心毫不费力地创建HTML和CSS代码。通过复制生成的按钮来增强网站的外观。

？可访问性

可访问性博客 - 中型 - 七个易于实施的指南，以设计更容易访问的网络。
可访问性博客-DEV- 13种升级网站可访问性的方法。
可访问性备忘单 - 通用设计的实用方法，以使您的网站/WebApp访问所有人。

？站点分析仪

web.dev-查看您的网站的性能。然后，获得提高您的用户体验的技巧。
灯塔指标 - 灯塔指标为您的网站性能提供了简单的见解。

？ Windows的终端

Windows终端
氟
超级
cmder

在线IDE，编辑

repl.it
codesandbox
codepen
JS bin
JSFIDDLE
醋端
面试
Codilink

⚡javaScript

FreeCodeCamp-交互式学习JavaScript的最佳免费资源。
CodeCademy-免费学习JavaScript的免费课程。
JavaScript.info-现代JavaScript教程。
JavaScripture -JavaScripture.com是所有JavaScript API的测试场和参考。
雄辩的JavaScript-这是一本关于JavaScript，编程和数字奇观的书。您可以在此处在线阅读。
JavaScript30-30天香草JS编码挑战。在30天内通过30个教程建造30件事。
JavaScript的工作原理
MDN的JavaScript参考
JavaScript事件参考
JavaScript教程 - 在JavaScript中学习重要概念，例如操作员，循环，功能，OOPS等。
DOM操纵参考
JavaScript设计模式
Regexone-通过简单的互动练习学习正则表达式。
Scaleer-最佳的免费资源来学习顶级极客的JavaScript。
JavaScript备忘单 - 完整的JavaScript备忘单，可帮助您掌握JavaScript。
JavaScript采访问题 - 顶级JavaScript面试问题的完整列表，以帮助您王牌面试。

⚡nodejs

Net Ninja的Node.js教程-Node.js速成课程教程。
Mixu的节点书 - 一本关于使用node.js的书
节点JS -node.js原始文档。
30天节点-30天节点，node.js教程系列。
NodeBestPractices-构建节点应用程序的最佳实践列表。对于大型项目来说很重要。
节点方式 - node.js的整个理念最佳实践A0ND指导原则存在用于编写可维护模块，可扩展应用程序和代码的整个哲学，实际上可以阅读。
你不知道node.js
很棒的nodejs-令人愉悦的node.js软件包和资源。
Express.js安全提示 - 如何保存和保护应用程序。
Node.js面试问题 - 顶级Node.js面试问题的完整列表，以帮助您王牌面试。

python

学习Python编程 - 本网站包含Python 3编程语言的材料和练习。
PY4E-每个人的Python。
潜入python 3-进入Python 3覆盖Python 3及其与Python 2的差异。与潜水python相比，它的修订后约为20％和80％的新材料。这本书现在完成了。
Codecademy-交互式学习Python的免费课程。
Programiz Pro-为Python初学者提供了一个策划的学习路径，该学习路径为结构化的，深入的课程提供交互式测验，编码挑战和现实世界中的项目。
programiz-学习Python编程。
很棒的Python-精选的Python框架，库，软件和资源的列表。
烧瓶教程 - 米格尔·格林伯格（Miguel Grinberg）的《烧瓶大型教程》。
Scaleer主题 - 免费资源来学习顶级极客的Python。
Python面试问题 - 顶级Python面试问题的完整列表，以帮助您王牌面试。
Python备忘单 - 一张综合备忘单，可帮助您掌握Python。
Python教程 - Python教程：初学者的综合指南
Python开发人员技能 - 通过2024年需要的20多个Python开发人员技能来提高您的技术职业。

⚡反应

React-官方站点文档，教程。
Codecademy-编码器的免费反应课程。
FreeCodeCamp-免费的Web开发资源，您也可以在其中学习React。
React教程 - React教程 - 基本原理，钩子，上下文API，React路由器，通过编码瘾君子的自定义钩子。
React Beach Resort-通过编码吸毒者的React Beach Resort项目。
很棒的反应 - 关于React生态系统的一系列令人敬畏的事情。
REACT图标 - 在您的React项目中将流行图标包括在您的React -Icons中。
React访谈问题 - 顶级React访谈问题的完整列表，以帮助您王牌面试。
100+ React Redux访谈问题和答案（2023） - React Redux问题和答案的收集。

？蜜蜂

公共API-为开发人员提供了1000多个免费公共和开放REST API的集体清单。
jsonplaceholder-免费使用伪造的在线REST API进行测试和原型制作。
OpenWeather-从OpenWeatherMap中简单，快速，自由的天气API您可以访问当前的天气数据，每小时5和16天的预测。
Swapi-星球大战API。
引号REST API-他们说，数据库中有超过100万以上的报价，这是世界上最大的此类数据库。引号API可轻松访问数据。
Rapid API-快速API包含是最大的API工具套件之一，其中包含大量免费API及其文档化，这是一个名为Rapid API Learn的专用部分，其中包含有关使用和创建API的指南和教程。