Bringing students’ websites to the web

Feature Spotlight

One of the most enjoyable parts of programming is sharing something you’ve created with other people. Whether it’s a small text program, a website, a wearable device or an app — everyone enjoys showing off what they’ve made. Recently we’ve been thinking about how we can bring this experience to Grok.

It starts with a liberating new feature for all our HTML & CSS courses and competitions: Publish. Publishing allows students to click once, wait a few seconds, and then get a live URL for their website. It’s a small interaction with a big impact.

Note: The tools discussed in this article are intended for a High School audience.

Publish with one click

When a student is working on a problem and they’ve decided they want to share it, all they have to do is click Publish and we’ll take their code and send it to Heroku. Just like this:

Once you’ve published it, you can share it around like any other hyperlink. Here’s the website in the animation above.

This is a great first step for students to see their code not only as school work, but as a real thing that they’ve made. It’s also an opportunity for students to interact with the professional tools that help host modern web applications.

If you’ve ever wanted to show off a student’s work in the newsletter, help them show their peers what they’ve done or send them home with something to impress their parents — you’re probably just as excited as we are. You can try it out yourself now by reading through our more detailed documentation.

Under the hood

To publish a website from Grok students need to create an account with Heroku. Deciding on this was not a simple matter, we wanted students to be able to get multiple benefits from whichever service we chose. So we had a few requirements:

• Something professional, that’s used in the real world.
• Hosts HTML & CSS and anything else a student might want.
• Provides a student-friendly way to deploy code, independently of Grok.

Heroku nails the first and second points, just check out their list of customers. The last one is what impressed us, Heroku allows students to publish their websites using Dropbox. Students can edit their HTML & CSS on their own computer, then click the deploy button inside Heroku to push it live.

The same system works if they’re writing something more complex with Python, Ruby, JavaScript or any other language. For more experienced students Heroku also supports uploading builds through git remote integration or via GitHub. If you’re interested in the details of how Heroku works there’s much more information about Heroku on their “What is Heroku?” page.

Note: Before asking students to sign up to Heroku make sure you read over their Terms of Service. Importantly Heroku does not allow accounts by children under the age of 13. Grok Learning is not affiliated with or otherwise sponsored by Heroku or Salesforce.

Bonus: Unplugged activity

Introducing your class to publishing their websites is also a great time to introduce them to client-server relationships and how web servers work. This activity is a good way to get started with the Australian Digital Technologies curriculum point ACTDIK023 and refresh ACTDIK014. If you’re a bit fuzzy on HTTP I quite like this overview and this more in-depth article, though it’s not important to know HTTP backwards and forwards.

The point of this lesson is to get students thinking about clients and servers in a way that engages what they know, then develops new knowledge. This activity follows a Productive Failure lesson design so try not to focus on misunderstandings until the final consolidation stage.

1. Talk broadly about how different types of client-server systems might work. The apps they use on their phone, multiplayer games and even systems like train gates.

2. Discuss what kinds of things the web browser and web server might send to each other. Try some of these prompts:
— How does the server know which web page the client wants?
— What parts make up a whole web page? Is it just HTML?
— How does the client get things like images, or CSS stylesheets?

3. In small groups get students to draw a diagram of how a web server might work. By trying to come up with a solution themselves students are activating their prior knowledge and thinking critically.

4. Have the students present their ideas and discuss interesting aspects of those ideas as a group. The point here isn’t to be right or wrong, but to explore possibilities.

5. Wrap up the exercise by consolidating the students ideas with your own explanations. The foundational points are a web request (to the server) and a web response (from the server). From here you can expand to requesting images, stylesheets and scripts. At this point it’ll be a good idea to clear up any common misunderstandings.

Over the next few weeks look out for pages published by students competing in our Web.Comp. If you decide to have a go with your own students, we’d love to hear about how you use it in the classroom.