Change the future

Wednesday 9 a.m.–12:20 p.m.

Going from web pages to web apps with Python

Karen Rustad, Asheesh Laroia

Audience level:
Web Frameworks


This tutorial teaches basic web development for people who have some experience writing HTML, CSS, and front-end Javascript, but have little or no experience building an end-to-end web application.

Together we will build a basic social bookmarking application using Django!


In this tutorial, we will explain topics and provide commands for you to run on your own computer. You will leave with a working web app! (We also provide snapshots so if you can't get one step working, you can skip past the problem and figure it out later.)

This is a tutorial on web programming, so we will go beyond just Django and discuss third-party Django apps and other real-world web development tools. We'll also be emphasizing areas of Django that particularly affect designers, such as static files, template inheritance, and AJAX.

Things you should know already

  • HTML familiarity
  • Basic Python proficiency
  • Basic or better Javascript proficiency

Pre-requisites that we will help with

We expect you to have git, Python, and a few other elements ready on your laptop before the tutorial. We will publish a laptop setup guide that steps you through:

  • Installing Python, git, pip, virtualenv, and a reasonable text editor
  • Setting up your env with Django, South, and django-debug-toolbar
  • Basic command line knowledge (cd, ls, etc)
  • Basic git knowledge
  • Setting up your git repo for the tutorial

Update: See updated tutorial preparation instructions at Going from web pages to web apps with Python

Things you do not need to know already:

  • Django :)
  • What an ORM is
  • Anything database related


Part 1: Starting the project

  • What we're building today -- a simple social bookmarking application

  • Activate your env

  • Start your project

  • Set up your settings and database

  • Projects vs. apps distinction

  • Set up tests, watch them fail

  • Start your first app

Part 2: An app with no style

  • M-V-C separation

  • Writing our URLs

  • Handling those URLs with placeholder views

  • Introduction to databases and the ORM, or: finally, something we couldn't've done with plain HTML/CSS/JS!

  • Creating a basic model, in

  • Creating tables (carefully, with South)

Part 3: Creating bookmarks and displaying them

  • Add data to your app via the command line

  • Database migrations and South, part 2

  • Views with actual data

Part 4: Setting up to design

  • Users and authentication

  • Django templates 101

  • CRUD with forms

  • Static files

Part 5: Actually designing in Django

  • Improving our CSS

  • Adding and updating bookmarks with JSON and asynchronous Javascript

Part 6: Sharing with the web

  • Surfing to classmates' "runserver" instances

  • Deployment on Heroku

  • Brief discussion of other deployment options

Exercises for the reader / overflow time

  • Writing your own tests

  • Write your own styles / JS frontend behavior

  • Handling user-uploaded media

  • Accessing a Django-powered API (Tastypie)