无论你是经验丰富的前端，还是刚刚起步的设计师，这些为真正的网页设计师和开发者所准备的 实用工具 、在线服务、资源和代码片段，都是为你而生的，合理的运用能够让你的网页设计与开发事半功倍。
这次总结的工具总计有40款，它们基本上可以分为8个大类
·灵感与阅读：这类素材通常是设计案例和 酷站 ，它们启发灵感，给你经验
·网络社区：汇集web开发者和设计师的优秀社区
·网页测速工具：一些最好的网站测速工具
·沟通和项目管理：适宜进行沟通和管理的工具，包括网页端和移动端
·代码共享和编辑器：最好的markdown编辑器，代码分享工具
·css/html：能够让你的网页更漂亮的工具，帮你创建更清晰的css代码
·框架：最流行最好用的网页开发框架
·git客户端：好用不解释
接下来，enjoy！
灵感与阅读 web development reading list
这是一个纯手工精心挑选的web开发相关资源的列表，而你需要做的就是订阅它，关注它，使用它。
web tools weekly
web tools weekly 是一个专注与 前端开发 和网页设计工具的新闻简报。
web operations weekly
同样的，web operations weekly 也是一个新闻简报，每周更新，内容主要关于网络运营、网络基础设施、网络性能和工具等。
freshbrewed.co
这个网站汇集了最新的文章、技术和最值得阅读和收藏的网页设计开发最佳实践。
网络社区 front-end front
前端开发 者可以在 front-end front 提问、分享有趣的内容、展示自己的开发项目。
refind
refind 替你收纳网络上最好的网站与链接，你每天都可以在这里看到最好的设计项目，获取灵感。
linkedin php developer group
如果你精通php、mysql、drupal、joomla、zend、cake、mvc，那么这个linkedin社区非常适合你。
网页测速工具 website speed test
这是一款颇为实用的网站测速工具，其中还包含了页面预览功能。
google chrome devtools
google chrome devtools 是内至于谷歌浏览器的网页制作和调试工具，你可以用它来遍历、调试和监测。
pingdom
pingdom 的使用方法很简单，输入网站url就可以测试它的加载时间。
google pagespeed insights
这款测速工具可以参考最佳实践来分析和优化你的网站。
webpagetest
借助普通浏览器你就可以使用webpage test 针对全球范围内任何网站进行免费的连接测速。
gtmetrix
gtmetrix 是一个免费的网页连接测速工具，借助pagespeed 和 yslow ，gtmetrix 可以帮你针对页面进行评分。
沟通和项目管理 slack
slack 是一款在线的集成团队沟通工具，它可以通过实时聊天、协同、归档来管理你的团队、资源和项目。
glip
glip 是一款实时对话/视频沟通工具，可进行任务管理、文件分享、内容搜索的多功能应用。
jira
jira 是一款为敏捷软件开发团队提供的灵活的项目管理工具。
trello
trello 是一款跨平台的任务分配和项目管理工具，无论是团队协同还是制作任务清单都手到擒来。
asana
asana 是facebook旗下的团队协同、任务分配和项目管理工具，使用起来便捷，上手也很快。
代码共享和编辑器 codeshare
这是一个开发者免费分享代码片段的工具。
dabblet
这是一个交互式的css测试和代码共享工具，它还支持保存到github，以及许多便利的编辑功能。
beyond compare
通过简单但强大的命令来帮你对比文件和文件夹，帮你专注于值得关注的差异。
stackedit
stackedit 是一款基于pagedown的全功能开源markdown编辑器，stack overflow 和其他的stack exchange 网站常常会用到它的markdown 库。
mou
这是macosx平台上最好的markdown编辑器之一，实时预览、同步滚动、自动保存、自动皮拍、自定义主题等多种强大而实用的功能被纳入其中。最重要的是，它对于中文的支持相当不错。
markdownpad
markdownpad 是windows 平台下的一款全功能 markdown编辑器。
sublime text
sublime text 是一款高度可定制的、界面漂亮的代码编辑器，功能非同凡响，性能也相当不错，越来越多的开发者和设计师开始着迷于sublime text。
dillinger
dillinger 是一款基于云端、支持移动端、可离线存储的基于angularjs和html5的markdown编辑器。
texts
texts 是一款符文布编辑器，主要存在于windows 和ios平台。
byword
byword 同样也是一款markdown编辑器，它旨在提供更加流畅有趣的编辑体验。
css/html sass
sass 是目前最成熟、最稳定，同时保持功能强大和专业性的css扩展语言。
stylus
如果已经有node.js，安装stylus 是一件非常轻松的事情，它为node.js提供强大、功能丰富、性能优异的css语言支持。
less
less 是一款css的与处理器，它是css语言的延伸，强化了功能，提供了许多额外的支持。
框架 bootstrap
bootstrap 是最流行的html/css/js 框架，可以帮你创建响应式、移动端优先的页面和项目。
semantic ui
semantic ui 是一款开发框架，让你可以使用html创建漂亮、响应式的布局。
foundation
foundation 是一系列响应式前端框架，可以帮你更加轻松地设计漂亮的响应式网页、app页面和炫酷的电子邮件。
uikit
uikit 是一款轻量级、模块化的前端框架，旨在帮助开发者快速设计强大的网页界面。
git客户端 sourcetree
sourcetree 是一款覆盖windows和mac两大平台的免费的git与mercurial客户端。你可以借助sourcetree 管理所有的本地文件、托管和储存库。
tower 2
git tower 是mac平台上最优秀的git客户端，将git的强大功能和易用性结合到一起是mac用户选择git tower的主要理由。
gogs
gogs 让几乎可以在任何go可以运行的平台上进行编译：windows、mac、linux、arm，等等。gogs 对于性能的要求并不高，即使是在树莓派上都可以流畅运行。
gitkraken
gitkraken 是一款漂亮直观的git客户端，它可以在windows、mac和linux上运行。
gitlab
gitlab 可以帮你托管个人或者公共的免费软件开发项目。
【技多不压身的设计师才有高薪资！】 平面设计： 《超赞！设计师完全自学指南》 交互设计： 《交互设计师修炼指南！教你从零开始成为优秀交互设计师》 ui设计： 《超实用新手指南！零基础如何自学ui设计？》 前端开发 ： 《天猫高手来教你！零基础如何系统地学习前端开发？》 抠图技巧： 《从菜鸟到高手！photoshop抠图全方位攻略》 配色方案： 《色彩搭配速成！3个实用方法帮你全面搞定配色》 dpi指南： 《基础知识学起来！为设计师量身打造的dpi指南》 交互设计自学路径图： 《零基础入门！给非科班生的自学路径图之交互设计篇》
原文地址： webdesigndev
优设译文：@陈子木
本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。
【优设网 原创文章 投稿邮箱：2650232288@qq.com】