11 – The Box Model

May 4, 2020 | Lesson

The box model is an abstract concept that helps us construct layouts in a web page. The lesson plan is short, but the reading is long. Teachers may want to chunk some of the key components into smaller exercises.

Teacher Activities

  • Check Learning Journals
  • Pre-teach vocab (Border / Padding / Margin)

Student Activities

  • Participate in class discussion
  • Read The box model and take Outline Notes
  • Open VS Code
    • Download the starter code
    • Follow the steps to write your code
    • Show me your web page!*


Using your knowledge of the box model, code a playing card using HTML and CSS.

Ace of spades - Wikipedia
Ace of spades – Wikipedia

Django, Python, and Cloud9, Oh My!

November 28, 2018 | Uncategorized

Cloud9 has been my development environment of choice for a few years now. Originally, I was drawn to them as an educator because their workspace templates made it easy for my students to quickly spin up preconfigured environments for learning WordPress and Django. Cloud9 has recently been acquired by AWS, but I have not yet made the change to the new service features. For those of us using the legacy cloud9 workspaces, the templates have begun to show their age.

I use Cloud9 in my classroom and my students use the great Django tutorial provided by Mozilla’s Developer Network, “Learn web development.” This post illustrates how to setup a legacy Cloud9 blank workspace to follow that tutorial (Server-side website programming: Django Web Framework).

The blank workspace

Cloud 9 Django workspaces use Python 2.7 and 3.4 with Django 1.9. These old version are no longer supported so we must build our workspace from scratch. To create an updated Workpace for Django 2.x, I find it’s easier to start with a blank workspace and use virtualenv. Here are the steps I took to create a workspace for Django 2.1 with Python 3.6

  • Make a new workspace using the “Blank” template
  • Update apt-get (so we can install Python 3.6)
sudo apt-get update
  • Install Python 3.6
sudo apt-get install python3.6
  • Install virtualenv using pip3
sudo pip3 install virtualenv
  • Make a virtualenv for Python 3.6 (My virtualenv is named “venv” here)
virtualenv --python=python3.6 venv
  • Activate the virtualenv
source venv/bin/activate

Install Django

  • Install Django (This should install v2.1 at the time of this writing)
sudo -H pip3 install django
  • Create your Django project (My project is just called “webapp”)
django-admin startproject webapp

Create a custom Cloud9 runner

At this point, most tutorials I found have you start the server using the command line, but I wanted to be able to run my app using a cloud 9 runner so I could preview the results using the standard cloud 9 project url.

To create a custom runner to run this config (With the virtualenv):

  • From the top menu choose Run > Run With > New Runner
  • Use the editor to create your runner configuration. I started with the default Django runner code and added my “venv” activation path, and my project directory name (“webapp”)
    "cmd": [
        "source venv/bin/activate && cd webapp && python3 manage.py runserver $ip:$port"
    "working_dir": "$project_path",
    "info": "Your code is running at \\033[01;34m$url\\033[00m.\n\\033[01;31m"
  • Save the runner

Now you should be able to run your project using the cloud 9 runner. Your workspace should function similar to the old Django template, except now your terminal commands should be run using the activated virtualenv (and python3).

How do I reset my password?

March 14, 2017 | Help

In my WordPress Course, my students occasionally lock themselves out of their WordPress admin dashboard. Since they are developing themes in public workspaces, they usually do not configure email on these workspaces. Instead, we use phpMyAdmin to reset our passwords manually in the database. (Continue reading: How do I reset my password?)

Languages, Tools, and Fundamentals

February 26, 2017 | Teaching and learning

It’s easy for new students to become overwhelmed with the variety of resources, programming languages, and programming tools available today. Often a question beginners have is, “what programming language should I learn?” This could lead into a discussion about programming goals (games, websites, mobile apps), and sometimes tools (Unity, Cloud 9, App Inventor). For absolute beginners, I recommend putting that question aside and focusing on understanding the fundamental concepts we find in most languages. In my experience, this helps students remain flexible when it comes to languages and tools later on. (Continue reading: Languages, Tools, and Fundamentals)