工作空闲时间，作为前端开发人员，还是希望利用好这段宝贵的时间多学习一些前端资源，了解当前前端知识体系，从整体上对当前行业有一个由浅入深的了解和掌握。后续还会慢慢更新好用的前端相关网站，加油！

1.CodePen（https://codepen.io）

CodePen支持在线查看和修改页面展示代码，分为页面效果块、html代码块、css代码块与js代码块。

 CodePen->Explore模块包括Picks，Popular，Topics三个类别，Picks包括丰富的js、css动态控制的样式效果及动画，Popular包括同样多种酷炫流行的动态交互可视化效果及组件，且Projects中包含许多酷炫的网页界面设计；Topics则更像一个Library，包括前端框架、js插件、多种可复用组件等资源。

2.CodePlayer(http://thecodeplayer.com/)

同样提供了许多丰富的CSS样式效果及动画特效，有意思的是可以在代码显示块完整的看到开发者的代码编写过程。

3.HTML5 Tricks(https://www.html5tricks.com/)

该网站以订阅推送的形式更新各种CSS特效，插件等资源，并直接提供在线演示及源码下载，但缺点是不提供搜索查询功能，随缘。

4.Phodal's Idea实战指南（http://ideabook.phodal.com/）

一本有用的电子书，目录以具体的项目为架构，每一章讲述了一个详细的项目的背景、构思及设计步骤，详细易懂。同时首页中还包括《GitHub 漫游指南》等相关的电子书资源。

5.实验楼（https://www.shiyanlou.com/courses/?course_type=all&tag=Web）

该网站包括但不限于多种丰富的前端项目课程，可以跟随教程在线实现项目构建及调试，随时查看设计效果，下载源码。当然很多是收费项目。

6.JS1K(https://js1k.com/)

一个1k以内js实现一个功能或特效的竞赛网站

7.Enjoy CSS(https://enjoycss.com/)

支持在线自己定制常用的CSS样式

8.frontendrescue（https://uptodate.frontendrescue.org/#find-the-best-sources）

包含各种前端开发最新资讯