
Ask HN: How would you teach web development to college students? - danoc
I&#x27;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.<p>We have 300+ people signed up and only 1&#x2F;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.<p>So, HN, how would you structure such a program if you were planning it?<p>Or, what would you like to see as a student?<p>[1] http:&#x2F;&#x2F;hackbu.org&#x2F;
======
TheBiv
Speaking of what I would love to do as a college student, I think it would be
awesome if a professor was doing something as a challenge against me.

Meaning, I think a lot of time students are told to learn by the professor
explaining some of the most basal subjects that we all take for granted
anyways (like server architecture, HTTP, etc) and not getting to the juicy
cool stuff that we can all do with the web.

What my thought would be is that at the beginning of the semester, the
professor took a few days and built a website she thought that the website
should exist (it doesn't matter what the website was, just that it was created
by them in a matter of days).

Then the entire course was the professor taking the students through all of
the design decisions that she made and along the way taught the students how
to be a hacker and how to build things on the web.

The challenge would come in the fact that the professor would have a running
track of how many users/views the site had and as it grew, the professor could
talk about the design optimizations and server architecture in a way that the
students would normally experience it.

~~~
dkuntz2
While a cool idea, this places a lot of overhead on a professor who most
likely already has a bunch of other stuff they need to get done (even at tiny
liberal arts colleges).

Expanding on your idea, collectively, or in small groups, students could build
that website. From the idea stage to the production stage.

~~~
TheBiv
I do completely agree that there is a lot of overhead on the professor, but I
tend to believe that any professor that would like this idea would be able to
rationalize spending a weekend to be able to explain what she created all
semester. I can't imagine a cooler lesson plan than detailing your design
decisions as you made them.

~~~
dkuntz2
Presuming it takes a weekend to solve some sort of problem that at least some
other people have. Presuming they're not only a couple weeks ahead of their
students in the course's material.

------
kendalk
I have been wanting to set up a similar program at another university. With
300+ students you have something good going. Your idea of organizing trips to
hackathons is marvelous.

What language are you hoping to get them started on? Python? Scheme? I have
been wanting to start with Scheme... but that is because I read PG's essay and
got bitten by the bug.

Keeping the lecture time down to 45 minutes sounds wise. Students are already
swamped with class hours so keeping the weekend time burden down is probably
the right move.

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.

Be sure to post updates on your group's website. Other people, like myself,
are wanting to do the same thing at other schools and would be encouraged to
hear about your progress. Your website could also link to the students' work
on Github once they are ready to step into their first real projects.

Your program sounds exciting! Keep us up to date.

~~~
andrewjkerr
> 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.

~~~
danoc
Good point.

I replied to kendalk and mentioned that forming teams and having competitions
might be overwhelming in the beginning, but maybe it makes sense to two
individual semester semester-long prizes for a CS major and non-CS major that
build the coolest product.

~~~
kendalk
In addition to having a prize for a CS major and a non-CS major, you could
have one that is specifically for a new beginner to programming. Some students
have been hacking since they were in junior high but have a different major. I
started with a Commodore VIC-20 and BASIC but I wasn't a CS major in college.

------
j45
I don't think web development is the hard thing to teach as much as problem
solving well.

I would have them build anything and everything with the caveat that no matter
how good they were (or weren't) the quality of their code would suck looking
back in 5 years and to start with bad code, and incrementally add concepts
like switches, functions, etc., much like very young coders did at age 10-15
when building anything, in any way was cool beyond belief. Solving problems
better and better is the fuel of continuing to learn to develop better for me,
but we all have to start somewhere.

Therefore start solving interesting problems. And keep solving them until you
get better at it.

~~~
reuven
> I don't think web development is the hard thing to teach as much as problem
> solving well.

True, but there's a lot to be said for having first-time programmers (and
especially college students) do Web development. It's a familiar environment,
which means that they'll know that they're doing something relevant and
practical, rather than abstract. They'll be excited to see that they can
create Web sites and applications, just like "real" programmers with more
experience.

Part of the fun of programming is the immediate feedback that you get from
your work. Nowadays, making that immediate feedback happen in a Web browser
strikes me as a smart way to go if you're going to get them hooked.

~~~
j45
I don't disagree with what you've said in any way.

Programming is simply clear step by step thinking to make something happen.
Focusing too much on the syntax and strategies in the beginning can be a
distraction from the raw and immediate feedback from your work.

------
ernestipark
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/](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).

~~~
danoc
Great, thanks! I've been looking at David Malan's CS50 web programming
lectures at Harvard and found them useful as well.

[https://cs50.harvard.edu/lectures/9/m](https://cs50.harvard.edu/lectures/9/m)

------
brianchu
I would focus on JavaScript. No CoffeeScript [1]. Start with basic HTML and
CSS on the frontend; nothing fancy with HTML/CSS yet, just a couple of
workshops. Then basics of JavaScript. Then jQuery (leave the DOM for another
day). Then you can consider branching out into _select_ (can't cover them all)
advanced topics like D3.js, HTML5 canvas, SVG, WebGL (using three.js).

You may find that that's all you can cover in a semester. If not, I think it's
important to also cover the server-side. Start with jQuery AJAX calls against
an already created RESTful API to teach the basic request-response HTTP model.
Then have students implement the API (no database needed) in Node.js. If you
still have time (I doubt it), introduce the concepts of databases with MongoDB
[2].

Python and Ruby are great ecosystems, but if you still have to teach JS, I
feel like it's a bit hard on beginners to juggle multiple languages. Also, I'm
divided on the utility of teaching a huge framework like RoR/Django vs. a
lighter framework like Sinatra, Flask, or Express.js (node).

[1] You want to minimize cognitive overhead, especially with 2/3 non-CS-
majors. And since anyone learning CoffeeScript needs to know JS, you might as
well start with JS.

[2] MongoDB is a lot quicker for hacks than SQL.

------
pasbesoin
First make it work, then make it pretty.

Solve problems that matter to them.

Get to useful, first. ( _Their_ definition, not yours.) Then dig and build
further.

I've experienced too much pedagogy that takes weeks or months to get to
anything that really interests the student.

There is also too much that is "plug and chug", where one never learns more
than how to follow a list and assemble components, without understanding them
nor the platform on which they run.

My preference would be to engage them with something of interest, and then let
that interest motivate the journey further into the details and the context.

If this doesn't interest them, they are probably in the wrong class. (Even if
they "need" this for their "career".)

P.S. It's much more motivating to teach someone who is interested in and
excited by what they are accomplishing. I mention this with respect to keeping
"a few other students" \-- as well as yourself -- engaged in your project.

So... make it engaging for your audience, and thereby make it engaging for
yourselves.

Good luck.

------
wengzilla
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!

~~~
danoc
Thanks!

My main concern is that 2/3 of the people signed up don't have any programming
experience, so it will be hard to keep it interesting for CS majors and slow
enough for everyone else.

We were thinking of starting off with HTML/CSS since it's not taught in
classes then progressing to a server-side language + framework.

I've recommended all of the non-CS majors to go through the JavaScript
Codecademy lessons over break to learn the programming fundamentals so they
can keep up when we dive into Ruby and RoR (or some other language/framework).

~~~
wengzilla
Not sure this is a legitimate concern though... The experienced CS majors will
be able to blaze through HTML/CSS just as they would be able to blaze through
Ruby. I also think they'll find themselves sufficiently occupied helping their
classmates and/or implementing more challenging projects.

It's fine to start with HTML, but recognize that it's a markup language, not a
programming language. Aside from that, you'll be able to cover most of the
HTML/CSS within the span of a week (hopefully faster with the CS majors).

------
collyw
Having been a back end developer for years, and more recently moving to
Django, I think teaching a good framework is a good way to go.

For me I can often see multiple (often hacky) approaches to getting something
done, but looking through the docs, it seems that the Django developers have
made the decisions for me, and they probably have more experience than me.

Looking back through my old code, I did a lot of things manually (reversing
URLs) when I read a bit more in the docs, I see the Django developers have put
something in to do that already. Usually a lot more cleanly than my solution.

------
BU_student
Hi, I'm a non-CS major at BU on a throwaway account. Don't worry, you're not
alone.

We can SSH onto an Ubuntu server named HARVEY to test Linux versions mySQL,
PERL, PHP, Python, Ruby and display our own web pages.

[http://harvey2.binghamton.edu/](http://harvey2.binghamton.edu/)

We also have access to an FTP site for software like Mathematica, Maple, and
Matlab, and there is another page for access to a bunch of VMs that have
certain software packages on them. Look at ssl.binghamton.edu.

~~~
danoc
Thanks! I'm aware of Harvey but is there anyway to configure a domain name?
Feel free to reach out at daniel@danoc.me.

------
mercnet
As a student I would love to learn how to secure a website on frontend and
backend. Too many tutorials skip this part, like which algorithms to use for
hashing passwords. It sounds simple, but every month some major site has a
breach and we find out passwords were stored plain-text.

------
pikachu_is_cool
This was the video that I watched 6 years ago that got me into web dev and
eventually actual programming:
[http://www.youtube.com/watch?v=GwQMnpUsj8I](http://www.youtube.com/watch?v=GwQMnpUsj8I)

~~~
danoc
Great, thanks! I'll take a look.

------
dreamdu5t
I would tell them to build a website with XYZ features. A very simple page.
Tell them to use Google if they don't know how to do something.

------
SkyMarshal
First I would ditch any notion of teaching back end programming and focus on
front-end only [0]. The things you can do with, and are required to learn and
master to be good with, HTML/CSS/Javascript are so extensive and deep that
alone could be overwhelming to people new to web development. So, first and
foremost just focus the course on frontend technologies (and feel free to use
things like Coffeescript or Clojurescript instead of Javascript, they probably
make better teaching languages than the wtf-laden JS).

Also, if 2/3 are non-CS majors, you're going to need to teach basic problem-
solving and analytical thinking skills. Teach and reinforce the basic problem
solving process of taking a complex problem (or programming objective) and
breaking down into its component parts, solving each, finding multiple
solutions if possible, then building it back into a whole again. Set
expectations of multiple possible answers, of hacking at the problem till you
start grokking it, etc. It's not about getting that one right answer, it's
about getting something that works then continually improving it. Learning
programming carries a lot of frustration which can be very off-putting and
demoralizing, so ingraining the expectations, problem-solving skills, and
habits needed to overcome that is crucial (and also a super general life
skill).

Look into using platforms designed for teaching like Processing [1] and its JS
version Processing.js [2]. Also see if you can find teaching-oriented stuff
around D3.js and/or Canvas. Programming visualizations is one of the more fun
and rewarding pure front-end web activities students can do, plus makes for
nice portfolio sites, and there's a legit job market for it.

Finally, consider adopting Salman Kahn's approach of the "inverted classroom"
\- have the students watch video lectures or read the texts for homework, and
spend every second of classtime programming with teacher/expert supervision
and guidance. The old days of sitting in a classroom being lectured at and
then having to go home and do the actual practice on your own without
immediate feedback are a total anachronism now, imho.

[0]: Though I might make an exception for Scheme per the essay "A Scheme
Story" linked at the end of PG's essay "Beating the Averages"
([http://paulgraham.com/avg.html](http://paulgraham.com/avg.html)).

[1]: [http://processing.org/](http://processing.org/)

[2]: [http://processingjs.org/](http://processingjs.org/)

[3]: [http://d3js.org](http://d3js.org)

[4]:
[http://updates.html5rocks.com/tag/canvas](http://updates.html5rocks.com/tag/canvas)

~~~
hkmurakami
I totally back the inverted classroom approach. Coming prepared to the class
will make an enormous difference in how well the students who aren't familiar
with the subjects will be able to keep up. It attenuates the individual
variation in learning speed and allows students to take as much time as they
need in private to understand the material.

------
angersock
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"](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.

~~~
dkuntz2
I don't know that explaining all of how the web works initially would catch
the interest of the 2/3s of the people who aren't CS majors. A lot of people
would probably get bored really quickly and stop showing up.

~~~
angersock
OP wanted suggestions for how to teach it--was just relaying what I thought
would be useful.

A simple "How to set up your own website" would be a good opener, and you
could get Blue Host (over in Provo) to probably sponsor hosting.

~~~
dkuntz2
Right, suggestions on how to teach it, when most of the audience doesn't have
a technical background...

As for "How to setup your own website", I think that shouldn't be the _first_
thing, but close to the first thing. I think making simple HTML pages (and
maybe a tiny bit of CSS) would be better first.

Also, I don't know if Binghamton has hosting for students, but some colleges
do. It might be worth asking, even if it's not generally available, you have a
sizable number of students, and you're doing something the University might
like and think looks nice publicly.

------
mkramlich
I recommend doing some Googling and book spelunking through all the existing
mass of stuff that exists from which one can learn web development. Adapt,
apply, repeat. This is also a good strategy/pattern that can be learned for
other topics/fields as well.

