注：以下网站合集和市面各种200+个工具的不负责任罗列不一样，每个网站都是笔者亲测实用非常有必要学习/使用的。
【行业新知类】
HTML和CSS入门
谷歌在Udecity开设的中文视频课程，设计师培养Web开发思维/前端入门必备！现在设计师不学点网页知识，大概会被时代抛弃的吧？和国内很多按部就班的慕课不同，谷歌的课程设计灵活——集中精力一天就能知道个大概。
响应式网站设计基础
谷歌在Udecity开设的中文视频课程，响应式设计入门与进阶必备（需先了解《HTML和CSS入门》）——如果你足够聪明，一下午就能学完。
众成翻译
实时收录并翻译国外各种前沿的Web开发知识，Web设计师&开发者与时俱进的好去处——因为有很多作者是自发翻译的，行业资讯更新速度极快，而且内容优质。
SmashingMagazine[英文]
数英网
iH5互动大师
哇呸网
H5doo
Sizmek
【H5网站&特效篇】
PIXID
世界HTML5优秀网站合集（PC端为主），尤其是日系风格的网站，经常看会发现很多宝藏。
Codepen[英文]
各种拽酷炫狂的网页特效实例与源码，勾搭世界一流网页设计师和开发者的宝地——见识一下，绝不会后悔。
HTML5SHOWCASE[英文]
世界HTML5优秀网站合集（PC端为主），分类齐全，尤其是Web应用——如果你还不知道PWA（渐进式应用）这个最近这么火的概念，可以先去pwa.rocks逛逛。
Codrops[英文]
各种网页特效实例（以PC端为主）、免费设计素材，设计师的创作灵感、程序员的动效参考——更新有点慢，但篇篇精华。
SiteInspire[英文]
世界HTML5优秀网站合集（PC端为主），收录很多视觉效果不错的网站，更新及时。
TRESENSA[英文]
【Web设计&开发篇】
优秀网页设计联盟
MediaQueries
ISUX
腾讯ISUX（社交用户体验设计）团队，包含各种网页设计、Web开发的解决方法、用户体验优化技巧，以HTML5网页、APP应用为主。
设计达人
集大成者的设计博客，包含网页设计、产品设计、交互设计、前端开发等信息——涉猎较广，富含各种新鲜知识。
Web基本原则--设计&界面[中英混合]
谷歌Web开发设计规范，从响应式设计、用户体验、输入框、动画等方面说明HTML5网页开发的最佳解决方案。
Materialdesign中文版
谷歌Material设计规范，设计师必看！从动效、样式、布局等多个方面定义了世界一流的Web跨平台设计方案——原质化设计。
MobileDesignInspiration[英文]
iPhone、Android、iPad等移动网页设计实例，很多网页动效设计值得参考——由于收录于tumblr网站，查看需翻~墙。
SimilarWeb[英文]
世界顶尖网站排名，可以按类别、国别查看，参考行业顶尖网站设计非常实用。
【实用云端工具篇】
搜百度盘
Befunky
快速编辑、导出图片的在线工具，分为编辑器、照片拼贴、设计师三种模式，支持剪裁、系统字体、滤镜等功能，网页设计师偷懒、设计小白装逼必备……
百度脑图
思维导图在线制作工具，可导出成图片——做思维导图的很多，其实一个就够了。
BROWSERSHOTS[英文]
一键对比网站在近百个浏览器的显示效果，可以自定义屏幕大小、系统类别、颜色显示、是否支持Flash等性能，H5网页测试必备。
CanIuse[英文]
一键测试各大浏览器具体性能上对HTML5的支持，Web开发必备。
智图
图片压缩、提高网页性能必备，相比业内知名的Tinypng的好处是可以实时预览不同图片质量的差别。
【资源下载篇】
365psd
各种免费、付费PSD、矢量图资源下载。
绘艺素材
各种各样的音效试听与下载，用来为H5页面动态变化听觉上增色必备。
爱思资源
jQuery之家
各种jQuery、HTML5、CSS3的插件库下载，分门别类，可供网页设计师参考动效设计或使用源码。
jQuery插件库
各种网页特效实例（以jQurey为主）预览和源码下载——经常更新，还附带一定讲解。
Emojipedia[英文]
高清图标大全，分不同设备显示的各种Emoji表情，支持打包下载。