开发商ROADMAPS
Frontend (https://roadmap.sh/frontend)) -前端开发路线图。
Backend (https://roadmap.sh/backend)) -后端开发路线图。
React (https://roadmap.sh/react)) -React开发路线图。
Andriod (https://roadmap.sh/android)) -Android开发路线图。
DevOps (https://roadmap.sh/devops)) -DevOps路线图。

文档和备忘单
MDN Web Docs (https://developer.mozilla.org/en-US/)) -MDN Web Docs网站提供有关Open Web技术的信息，包括网站和渐进式Web应用程序的HTML，CSS和API。
DevDocs (https://devdocs.io/https://devdocs.io/)--) 为开发人员提供的快速，离线和免费的文档浏览器。在一个Web应用程序中搜索100多个文档。
DEVHINTS (https://devhints.io/)--) 少量的备忘单。
FLEX - Malven (https://flexbox.malven.co/)) -用于CSS flex布局的可视备忘单。
GRID - Malven (https://grid.malven.co/)) -CSS网格布局的可视备忘单。

设计工具
Figma (https://www.figma.com/)) -Figma帮助团队从头到尾创建，测试和交付更好的设计。
Adobe XD (https://www.adobe.com/products/xd.html)--) 通过外观和感觉像真实事物的设计分享您的故事。线框，动画，原型，协作等等—一切都在这里，一站式完成。
Sketch (https://www.sketch.com/)--)使用超过100万人使用的设计平台，从自由职业者到全球最大的团队，创建，制作原型，进行协作并将您的想法变为现实。
Whimsical (https://whimsical.com/)) -以思想的速度进行视觉交流–协作流程图，线框，便签和思维导图。
网络如何运作？
互联网的工作原理视频 (https://www.youtube.com/watch?v=x3c1ih2NJEg)) -互联网如何运作？
互联网的工作原理简短视频 (https://www.youtube.com/playlist?list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7)) -关于互联网如何工作的简要说明？
域名解析 (https://howdns.works/)) -DNS如何工作？
HTTPS (https://howhttps.works/)) -HTTPS如何工作？

HTML和CSS
freeCodeCamp (https://www.freecodecamp.org/learn)) -学习Web开发的免费课程。
Interneting Is Hard (https://www.internetingishard.com/)) -面向完整初学者的友好的Web开发教程。
HTML Elements (https://developer.mozilla.org/en-US/docs/Web/HTML/Element)--)由MDN引用的HTML元素。
HTML Entity (https://css-tricks.com/snippets/html/glyphs/)) -CSS技巧的HTML实体参考。
CSS3属性 (https://developer.mozilla.org/en-US/docs/Web/CSS/Referencehttps://developer.mozilla.org/en-US/docs/Web/CSS/Reference)) -MDN引用的CSS。
CSS参考 (https://cssreference.io/)) -CSS的免费视觉指南。
Flexbox Froggy (https://flexboxfroggy.com/)) -一款可帮助您学习CSS Flex的游戏。
CSS技巧 (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)-Flexbox-Flexbox) -Flexbox完整指南。
网格花园 (https://cssgridgarden.com/)--)一个学习CSS网格的游戏。
CSS TRICKS - A Complete Guide to Grid (https://css-tricks.com/snippets/css/complete-guide-grid/)) -CSS网格的全面指南，着重于网格父容器和网格子元素的所有设置。
学习CSS网格 (https://learncssgrid.com/)) -Jonathan Suh撰写的综合指南，可帮助了解和学习CSS网格布局。
Can I Use (https://caniuse.com/)) -最新的浏览器支持表，以支持台式机和移动Web浏览器上的前端Web技术。
CSS Effects (https://emilkowalski.github.io/css-effects-snippets/)) -CSS动画。
Keyframes (https://keyframes.app/)--)使用可视时间轴编辑器创建基本或复杂的CSS @keyframe动画。
Animista (https://animista.net/)) -玩准备好使用CSS动画的集合。
BEM (https://9elements.com/bem-cheat-sheet)) -BEM命名备忘单。
Autoprefixer (https://autoprefixer.github.io/)) 一个PostCSS插件，可解析您的CSS并添加供应商前缀。
CSS Formatter (https://www.cleancss.com/css-beautify/)--) 在线CSS Formatter，CSS Beautifier。
Placeholder (https://placeholder.com/)) -如何使用我们的占位符。只需在我们的URL后指定图像大小，将获得一个占位符图像

前端挑战或技能
CodePen (https://codepen.io/)) -使用我们的在线代码编辑器构建，共享和学习JavaScript，CSS和HTML
Frontend Mentor (https://www.frontendmentor.io/)) -通过构建真实的项目来提高您的前端技能。解决现实世界中的HTML，CSS和JavaScript难题，同时致力于专业设计。
Good Code (https://moeminm.github.io/goodcode/)) -浏览数十种前端编码挑战，并附带Adobe XD文件和样式指南。
codier (https://codier.io/)) -探索并尝试前端编码挑战。
CSS之战 (https://cssbattle.dev/)) -CSS代码查询在这里！使用您的CSS技能以尽可能小的代码复制目标。随时检查以下目标，并测试您的CSS技能。

字体和印刷术
Google字体 (https://fonts.google.com/)) -免费和易于使用的Webfonts的第一大资源。
Fonts Arena (https://fontsarena.com/)--) 免费字体，高级字体的免费替代品，针对您的研究需要的文章。
Fontjoy (https://fontjoy.com/)) -Fontjoy帮助设计师选择最佳的字体组合。混合并匹配不同的字体以实现完美的配对。
FontPair (https://fontpair.co/)) -字体对可帮助设计师将Google字体配对在一起。漂亮的Google字体组合和对。
颜色和工具
Coolors (https://coolors.co/)) -为您的设计生成或浏览漂亮的色彩组合。
0to255 (https://www.0to255.com/)--) 一种颜色工具，可轻松使颜色变浅和变暗。
color x color (https://colorcolor.in/)--) 一种为UI创建可访问的颜色系统的工具
颜色和字体 (https://www.colorsandfonts.com/)) -查找颜色和版式组合，随时可以一键复制粘贴。
ColorSpace (https://mycolor.space/)--) 生成漂亮的调色板。
CSS Gradient (https://cssgradient.io/)--) 免费的CSS渐变生成器工具。
uiGradients (https://github.com/iamismile/web-dev-resources/blob/main/uigradients.com)--)为设计人员和开发人员精心挑选的一组美丽的颜色渐变。

图像资源区
Unsplash (https://unsplash.com/)) - Free images and photos.
Pexels (https://www.pexels.com/)) - Free stock photos.
Pixabay (https://pixabay.com/)) - Free image or video.
LOADING.IO (https://loading.io/)) - 针对项目的免费微调器
LottieFiles (https://lottiefiles.com/)) -lottifiles是一个为Lottie设计的动画集合——给开发者调试的日子已经一去不复返了
removebg (https://www.remove.bg/)) - 去除图像背景
Remove Photo Data (https://github.com/iamismile/web-dev-resources/blob/main/removephotodata.com)) 2 - 在网上分享照片之前，请先删除照片上的个人资料
befunky (https://www.befunky.com/)) - BeFunky的一体化在线创意平台有您需要的一切轻松编辑照片，创建图形设计，并使照片拼贴

插图
unDraw (https://undraw.co/illustrations)) - 浏览以找到适合您需要的插图，并单击下载
manypixels (https://www.manypixels.co/gallery/))，免费插图，为您的项目提供动力。以商业或非商业的方式使用它们，用于登陆页面、博客帖子、电子邮件通讯、社交媒体图形等
DrawKit (https://www.drawkit.io/)) - 为您的下一个完美项目手绘矢量插图和图标资源。
freepik (https://www.freepik.com/)) - 免费的图形资源

图标
Ionicons (https://ionicons.com/)) - 开源的MIT许可图标包.
Font Awesome (https://fontawesome.com/)) - 矢量图标和社会标志
Material Icons (https://material.io/resources/icons/?style=baseline)) - 材质图标是常见动作和物品的精美精美设计符号。在桌面上下载可在Android，iOS和Web的数字产品中使用它们
icons8 (https://icons8.com/icons)) - 下载PNG和SVG中的免费图标
flaticon (https://www.flaticon.com/)--) SVG，PSD，PNG，EPS格式或图标字体的免费矢量图标。
Tabler Icons (https://tablericons.com/)) - 完全可定制的免费SVG图标
icofont (https://icofont.com/icons)) - 2100多种免费图标，为您的创意设计增添趣味
Simple Icons (https://simpleicons.org/)) - 1463个流行品牌的免费SVG图标

生成器
Lorem Ipsum (https://loremipsum.io/)) -Lorem Ipsum发生器。
RealFaviconGenerator (https://realfavicongenerator.net/)) -图标生成器
Favicon Maker (https://formito.com/tools/favicon)--) 免费的Favicon制造商。
Meta Tags (https://metatags.io/)) -元标记生成器，预览您的网页在Google，Facebook，Twitter等上的外观！
Clippy (https://bennettfeely.com/clippy/)) -CSS剪切路径生成器。
Regex101 (https://regex101.com/)--) 在线正则表达式测试器。
Web代码工具 (https://webcode.tools/)) -生成HTML5，CSS3，微数据，JSON-LD，Twitter卡，Open Graph等！
Carbon (https://carbon.now.sh/)) -创建并共享您来源的精美图像。
CSS网格生成器 (https://grid.layoutit.com/)--)快速设计网页布局，并获取HTML和CSS代码。直观地学习CSS Grid，并使用我们的交互式CSS Grid Generator构建Web布局。

可访问性
辅助功能博客 (https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94)) -七个易于实施的指南，用于设计更易访问的网站。
可访问性博客-开发 (https://dev.to/erhannah/13-ways-to-level-up-your-site-s-accessibility-22c6)) -提升网站可访问性的13种方法。
可访问性备忘单 (https://moritzgiessmann.de/accessibility-cheatsheet)) -通用设计的实用方法，使每个人都可以访问您的网站/ webapp。

现场分析仪
web.dev (https://github.com/iamismile/web-dev-resources/blob/main/web.dev/measure)) -查看您的网站的效果如何。然后，获取技巧以改善您的用户体验。
Lighthouse Metrics （灯塔指标） (https://github.com/iamismile/web-dev-resources/blob/main/lighthouse-metrics.com))可让您轻松了解网站的性能。

Windows终端
Windows Terminal (https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab)FluentTerminal)
FluentTerminalFluentTerminal) (https://github.com/felixse/FluentTerminal)Hyper)
HyperHyper) (https://hyper.is/)Cmder)
CmderCmder) (https://cmder.net//))

在线 #IDE 编辑器
Repl.it (https://repl.it/)CodeSandbox)
CodeSandboxCodeSandbox) (https://codesandbox.io/)CodePen)
CodePenCodePen) (https://codepen.io/))
JS Bin (https://jsbin.com/)JSFiddle)
JSFiddleJSFiddle)
goormIDE (https://ide.goorm.io/))

JavaScript
freeCodeCamp (https://www.freecodecamp.org/learn)) -最好的免费资源，用于以交互方式学习JavaScript。
Codecademy (https://www.codecademy.com/learn/introduction-to-javascript)) -免费课程，以交互方式学习JavaScript。
JavaScript.info (https://javascript.info/)) -现代JavaScript教程。
Eloquent JavaScript (https://eloquentjavascript.net/)--) 这是一本有关JavaScript，编程和数字奇迹的书。您可以在此处在线阅读。
JavaScript30 (https://javascript30.com/)-30-30) 天香草JS编码挑战。在30天内使用30个教程构建30件事。
JavaScript的工作方式
(https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5)MDNMDN)的JavaScript参考
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)JavaScriptJavaScript)事件参考
(https://developer.mozilla.org/en-US/docs/Web/Events)DOMDOM)操作参考
(http://youmightnotneedjquery.com/)JavaScriptJavaScript)设计模式

(https://addyosmani.com/resources/essentialjsdesignpatterns/book/)Node.jsNode.js)教程 (https://www.youtube.com/playlist?list=PL4cUxeGkcC9jsz4LDYc6kv3ymONOKxwBU)) -Net Ninja编写的Node.js速成课程教程。
最佳实践 (https://github.com/goldbergyoni/nodebestpractices)) -大量的构建节点应用程序的最佳实践。对于大型项目很重要。
The Node Way (http://thenodeway.io/)-Node.js-Node.js)最佳实践的完整哲学和指导原则，用于编写可维护的模块，可伸缩的应用程序和易于阅读的代码。
你不知道Node.js
(https://github.com/azat-co/you-dont-know-node)AwesomeAwesome) Nodejs (https://github.com/sindresorhus/awesome-nodejs)) - 令人愉快的Node.js软件包和资源。
Express.js安全提示 (https://www.freecodecamp.org/news/express-js-security-tips/)) -如何保存和保护应用程序。
PYTHON
Codecademy (https://www.codecademy.com/learn/learn-python)--) 免费课程，以交互方式学习Python。
Programiz (https://www.programiz.com/python-programming)--) 学习Python编程。
Awesome Python (https://github.com/vinta/awesome-python)--) 精选的Python框架，库，软件和资源的精选清单。
Flask教程 (https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world)) -Miguel Grinberg编写的Flask Mega-Tutorial。

APIs
公共API (https://public-apis.io/)--) 面向开发人员的1000多种免费的公共和开放REST API的汇总列表。
JSONPlaceholder (https://jsonplaceholder.typicode.com/)--) 免费使用伪造的在线REST API进行测试和原型制作。
OpenWeather (https://openweathermap.org/guide)--) 来自OpenWeatherMap的简单，快速，免费的天气API，您可以访问当前的天气数据，每小时，5天和16天的天气预报。
SWAPI (https://swapi.dev/)--) 星际大战API。
Quotes REST API (http://quotes.rest/)--) 他们说So在数据库中拥有超过一百万条报价，这是世界上最大的此类数据库。Quotes API提供了一种简单的方法来访问数据

开发者工具
Postman (https://www.postman.com/)) -使API开发变得容易。简化构建API的每个步骤并简化协作，以便您可以更快地创建更好的API。
Insomnia (https://insomnia.rest/)) -领先的开源API客户端，以及用于GraphQL和REST的协作API设计平台。
JSON Server (https://github.com/typicode/json-server)) -在不到30秒的时间内（严重）获得具有零编码的完全伪造的REST API。用<3创建，供需要快速后端进行原型制作和模拟的前端开发人员使用。
npm trends (https://www.npmtrends.com/)) -您应该使用哪个NPM软件包？比较一段时间内的NPM软件包下载统计信息。找出趋势，选出赢家。
BUNDLEPHOBIA (https://bundlephobia.com/)--)查找将npm软件包添加到软件包中的成本

在线学习资源
w3schools (https://www.w3schools.com/)) -世界上最大的Web开发人员网站。教程参考，示例，实践，证书。
Codecademy (https://www.codecademy.com/)--) 学习所需工作所需的技术技能。作为在线教育和学习编码的领导者。
Real Python (https://realpython.com/)--) 在线学习Python：面向所有技能水平的开发人员的Python教程，Python书籍和课程，Python新闻，代码示例，文章等。
Study Tonight (https://www.studytonight.com/)) 学习-通过手写的简单教程，测试和视频教程学习诸如Java，C ++，DBMS，数据结构等工程主题的最佳场所。
Programiz (https://www.programiz.com/)) -通过我们易于遵循的教程，示例，在线编译器和参考资料，学习使用Python，C / C ++，Java和其他流行的编程语言进行编码。
JavaScript资讯 (https://javascript.info/)--)现代JavaScript教程。
命令行教程 (https://dev.to/iamismile/command-line-tutorial-58km)) -UNIX基本命令教程。
Try Git (https://try.github.io/)) 一系列互动的挑战，以学习和尝试Git。恢复
ResumeGenius (https://resumegenius.com/)) -唯一可以吸引您面试的在线简历构建器。在几分钟之内创建一份专业的简历，下载并打印。
resume.io (https://resume.io/)--) 免费的在线简历制作工具，可让您在数分钟内创建完美的简历。看看今天写一份专业简历并申请工作是多么容易！
Resume Now (https://www.resume-now.com/resume/builder)) - 只需要几分钟。在线简历制作者应该花很长时间使用-我们免费的简历制作者也不需要。
Canva (https://www.canva.com/create/resumes/)--) 使用Canva的免费简历生成器，可以轻松快捷地申请理想的工作。从数百种免费中选择。
novoresume (https://novoresume.com/)--) 在2020年制作完美的简历，并使用免费的简历生成器获得理想的工作。选择一个模板。个性化它。
RX-Resume (https://rx-resume.web.app/)--) 轻松建立您的简历。

mailsac (https://mailsac.com/)--) 一次性测试电子邮件收件箱服务。
HTTP状态代码 (https://httpstatuses.com/)) -HTTP状态代码目录，其中包含定义，详细信息和有用的代码参考。
Play With Docker (https://labs.play-with-docker.com/)) -一个简单，互动且有趣的游乐场，可学习Docker。
Tiny Helpers (https://tiny-helpers.dev/)--) 面向Web开发人员的免费的单用途在线工具集合。
Free for Developers (https://free-for.dev/#/)) -这是为开发人员提供免费套餐的软件和其他产品的列表。
Dev Resources (https://devresourc.es/)) -开发资源可为您的开发者之旅提供一切，所有内容均列在精选列表中。
开发者博客站点
DEV (https://dev.to/)--) 一个建设性和包容性的社交网络。开源且完全透明。
Medium (https://medium.com/)) -媒介是一个开放的平台，读者可以在其中找到动态思维，专家和未被发现的声音可以在任何主题上分享他们的作品。
Hacker News (https://github.com/iamismile/web-dev-resources/blob/main/news.ycombinator.com)) -从Hacker News获取最新信息！
Hacker Noon (https://hackernoon.com/)) -Hacker Noon用真实的技术专家撰写的不受束缚的故事和观点反映了技术行业。
Smashing Magazine (https://www.smashingmagazine.com/)) —适用于Web设计师和开发人员。
Hashnode (https://hashnode.com/)--)一个免费的内容创建平台和社区，允许您在自己的域上发布