One of the things that really sets Code School apart from other learning resources is the interactive challenge experience.

You can learn a lot from books and blog posts and videos, but nothing compares to the immersive experience you get from working through an interactive challenge in a live coding environment.

Experiencing Code

For our new beginner Django course, Try Django, we really wanted users to see and experience the results of the code they’re writing as they progress through the challenges. The Preview section in our challenges is where this all comes together, and it really helps to get an idea of exactly what you’d see when you build a real Django application.

How We Build Previews

Several things have to come together for the Preview section to render the results of the code we’re writing in the challenges. Here are the three primary components to keep in mind as you read through the following sections:

• Course Platform
• Try Django Course
• Django Code Executor

The Code School Course Platform allows us to implement several different types of challenges that you’ll see in the new Django course (interactive console, multiple choice, fill-in-the-blank, etc.); but, for the purposes of this blog post, we’re talking specifically about Editor challenges that display a result.

Most of the action initially takes place in the Challenge Editor area. You type your code here, submit it, and it produces a corresponding result below in the Preview area.

Submitting Code

When you submit your code in the challenges, it gets sent from the Course Platform to our Django Code Executor.

The code executor starts out with a fully working Django template application. If you have Python and Django installed on your local machine, you’d be able to type the command below to create a Django project (you can learn more about how to do all this if you take the course!), and it would be similar to what we use in the code executor.

Every time you submit code from the files in the Challenge Editor, the code executor uses the name and content from those files to write to the existing files in that Django template application:

Then, we can read the code you’re submitting to the challenge to write tests and process the results. For instance, some challenges involve editing the main/templates/home.html file, which we can access with something like this:

Docker

Docker is what makes everything that we talked about above possible. With a tool like Docker, we can quickly set up a contained environment for each user. That way, when you’re working on a challenge, you have your own Docker container running your own Django application.

Docker uses something called a Dockerfile that is basically a long list of commands that are run to set up an isolated environment. For this course, we use the Dockerfile to set up a Python environment with Django installed, and then process all your code within that environment.

If you’re interested in learning more about Docker, you can get a quick introduction from the Docker website, our previous Docker blog post, and our Docker screencast series.

Displaying Results

Once your code has been submitted and processed by the Django Code Executor, we’re ready to send it back to our Course Platform. To do this, we simply make an HTTP request from the platform to the executor.

For example, in the Your First URL challenge, we update Django’s urls.py file so we can make an HTTP GET request to http://localhost:8000/home and receive an HTTP response with the Welcome Home Travelers! text.

In the challenge, we point the Preview section at that HTTP response generated from the Code Executor, and render the results in an iframe element.

We can also check that your code is producing the correct results by writing Django tests that look something like this:

And everything we’ve talked about has to happen in about a second, so you can continually submit new code in the challenges and see the results.

Learn, Practice, Build

Creators need an immediate connection to what they’re creating. When you’re making something, if you make a change or if you make a decision, you need to see the effect of that immediately. — Bret Victor

This is all so important because it’s empowering to see that a little bit of code is all you need to create something amazing.

Here at Code School, we really want to see you succeed. In the world of the web, we’re all standing on the shoulders of giants, and we reap the benefits of our shared experience. We’re just beginning to scratch the surface of engaging web experiences, and that’s why there’s so much room for you to jump in and start building something awesome!

The first step is to Learn as much as you can with our course content. Then, Practice with our interactive challenges and try getting things set up locally so you can test it out on your own. Next, check out our Watch Us Build series to follow along building a real application. Lastly, use everything you’ve learned to Build something amazing. Keep learning, and reach out for help in places like the Code School Forums and Stack Overflow when you have questions and need help!

Resources

• Bret Victor: Inventing on Principle
• Code School Django Forums
• Code School Python Path
• Docker
• Getting Started with Django
• Try Django Course
• Watch Us Build Series