Ask HN: How would you teach web development to college students?

I've be working with a few other students to create HackBU [1], an organization at Binghamton University designed to teach web development and create a “hacker” culture.

We have 300+ people signed up and only 1/3 are CS majors. The plan is to hold weekly workshops with 45 minutes of lecturing and 2 hours of “office hours.” We’ll be organizing trips to hackathons and eventually host our own 24-hour hackathon at the end of the semester.

So, HN, how would you structure such a program if you were planning it?

Or, what would you like to see as a student?

[1] http://hackbu.org/

Sounds pretty cool. You might want to look at MIT's winter term (one month) web programming competition/class for some inspiration: http://6.470.scripts.mit.edu/2014/.

They do a mixture of lectures, office hours, and guest speakers, and culminate with a final submission for prizes. Not everyone has to enter the competition and there is also a rookie flight and an experienced dev flight so everyone can participate. Gathering corporate/start-up sponsors to get prizes for a contest seems to be a good way to spur interest and motivate people to learn (at least it was for me).

So, this is web development in general, not specifically CS software engineering, or electrical engineering, right?

Some thoughts, mostly motivated by experience of both what I'd wish I'd known and also in mentoring at Rails Girls and similar community events:

~

Spend some time to explain how the modern web works. Go to "http://www.example.com" and talk about the series of requests that are made (socket, IP, DNS, HTTP server, these things). Pull up a debug console and show the traffic. Talk in broad strokes about page parsing, layout, whatever, but give a high-level idea of how all the pieces fit together. Do this first, so everything later kind of has a framework to fit into.

(This is similar to how you start with logic gates and build up to ALUs and eventually coomputers in good computer engineering/science curricula.)

~

Next, talk about stacks and gross areas of division, but keep it simple: this is the front-end (the browser), displaying a page and maybe running a script; this is the backend, the web server which decides what pages to send; this is the database, which stores data. It won't be helpful to go into more recent developments like single-page apps or Meteor or Websockets or whatever just yet.

~

Then, you can kind of split into two or three ways:

You can talk about server technologies, like PHP or Rails or Node or whatever, or just dumb file serving with Nginx or Apache or Sinatra or whatever the Python equivalent is these days.

You can talk about HTML/CSS, and talk about how we style HTML content and organize pages into divs. Show off a grid system, show floating, show the box model and padding and margins and all that stuff. Show basic form usage.

You can talk about client-side scripting, about attaching event listeners and using jQuery or vanilla JS to play with the DOM. Show off some simple code letting people mark stuff on a Google Map (API is well-documented and pretty easy to use and is tangible). Maybe let people play with something like Three.js or Kinetic.js.

~

Last, talk about things like using Github and SSH to log into a server. Talk about where to find help (man pages, Stack Overflow, lmgtfy, etc.) Basically, solve IT problems last if you can avoid it--learning how to sysadmin (even just for local development) is annoying and tedious, and will distract from the previous, more interesting and enjoyable topics.

~

Hope that helps.

EDIT:

Make sure that students are actually doing stuff for everything after the fundamentals lecture: write a static homepage, write a pong game, write a simple message board, etc.

Doing is learning here.

I'd probably structure it a lot like a bootcamp. Check out Flatiron, gSchool, or Dev Bootcamp's curriculum for some good ideas. To summarize, though, typically it's a few weeks of learning a high-level language (Python or Ruby). From there, it's typically a solid couple of months of learning the corresponding framework (Django or Rails). All the while, sprinkling in some JS and CSS magic.

They're usually able to churn out some pretty decent full-stack programmers after 3 months, or so (granted they meet a lot more frequently than 3 hours per week). You'll have to be super diligent about giving them assignments, but the nice thing is that there are so many resources around Ruby and Python... Codecademy, Treehouse, Rails for Zombies, etc.

Come back and let us know how it worked out!

> Perhaps you could set up teams that could compete with each other through a series of programming challenges? You could find a local business who would sponsor a prize, or a restaurant that would offer a dinner for the winning team.

I like this idea. Through my experience in several student orgs, it seems that the best way to get people to stay involved is competition and prizes. Personally, I would much rather see students be self driven, but there's a hump of "oh I'm too busy to do this" (or something of the sort) that most students need to get over before taking a huge interest in it.