Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Nick Pettit
Nick Pettit
Treehouse Teacher

Code Playground: Check Out a Project without Downloading the Code!

Hi everyone,

We've created a great new feature that we call the Code Playground. In a select number of Treehouse Projects and Deep Dives, we've added a new button below the video that allows you to try out the code immediately in the browser. This is slightly faster than downloading the code, loading it into a text editor, loading up a web browser, and so on. :)

This is available on most videos that teach front-end technologies like HTML and CSS. Here are two examples (click the "View Code Playground" button below the videos):

We're using CodePen to make this new feature possible. CodePen is a community of designer and developers that post "Pens" which are interactive snippets of HTML, CSS, and JavaScript. The cool part is, you can also see a live preview of the code as it would appear in a web browser. The preview window updates itself in real-time as you type in code and make changes. This is a great way to play with Treehouse examples and see how they work!

4 Answers

James Barnett
James Barnett
39,199 Points

@Nick -

To quote from my earlier thread on this feature:

I :heart: codepen

Also, this will make troubleshooting issues on forum when people have are having issues following along with the video forum so much easier.

31,206 Points

This is great! One thing that's helped me tremendously is just opening random sites with Chrome dev tools and playing with all the CSS rules. Codepen mirrors that "tinkering" experience, and I'm glad to see it being incorporated with projects here.

I've mentioned this in another thread, but it would be awesome if Treehouse used CodePen.io's Professor Mode feature to do some cool stuff like coding hangouts or a Treehouse Member more in-depth about (or 'demystifying') a topic like Vertical Rhythm (CSS), advanced applications of stuff like Angular.js (or Backbone.js) in a variety of angles, and so on as a result of all sorts of members watching.

Maybe even do what Codepen.io did the past 4 weeks which was a weekly competition to encourage members contributing in a helpful way about topics or common design/developer problems that can be solved in a variety of ways.

Yes Please!