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

[danoc]

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/

[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.

[danoc]

I do like the idea but I'm worried that people would lose interest if we spent too much time on code I wrote.

I think there is value in that though and might incorporate some personal projects and existing into the lecture.

[TheBiv]

I think that is a valid concern, but I think it's straightforward to mitigate it by saying "I can't remember why I did it that way?" But here let's spend this class day taking suggestions of how we could improve it and what I was trying to solve with this bit of code. Which would teach them how to problemsoolve as a group.

I think at the very least, it would allow you a personal, concrete story bc so much of what was lost on me in the beginning were things like "why would I ever use .map instead of .each" in ruby, when that is a terrible question for a newbie to ask. I think a better question would be something like "what's the best way in this case to iterate through a list in ruby"

[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.

[danoc]

Thanks Kendal!

I think we'll probably have them start on Ruby since we have a few students that can teach it and have experience in RoR.

> Perhaps you could set up teams that could compete with each other through a series of programming challenges?

I like the idea but I think students might find this to be too much in the beginning. Especially when CS majors are competing with non-CS majors.

Maybe a better option is to promote the Binghamton hackathon from early on and offer prizes/competition for the groups that entered without experience.

> You could find a local business who would sponsor a prize, or a restaurant that would offer a dinner for the winning team.

I definitely want to keep it as local as possible and even have a few community members signed up.

> Be sure to post updates on your group's website.

I'd recommend following the progress on Twitter and GitHub:

- https://twitter.com/HackBinghamton

- https://github.com/HackBinghamton

Thanks for all the advice and feel free to reach out by email (it's on my profile).

[kendalk]

> I definitely want to keep it as local as possible and even have a few community members signed up.

You might gain some local sponsors by offering to put their company logo on your website. See the bottom of the page of http://clojure-conj.org for the Clojure Conj conference. There are "Platinum," "Gold," and "Supporting" sponsors listed.

Put a Sponsors page on your website and make it easy for businesses to sign up. You could even have a donate button.

[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.

[danoc]

> 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

Great point!

I had a similar experience growing up, but I think a lot of people that want to learn quickly give up.

What do you think we can do to keep people excited about it? I was talking to a few friends at UMich and they suggested we have them build their own personal websites so they have something tangible they can show their friends.

[j45]

I thought about it a little, I'd probably not let them program much in the beginning and simply create results that they can keep hacking on through a high level tool.

To that effect, I'd probably recommend at this time appery.io .. to make mobile web based apps, which also bring in data.

Appery introduces enough about building apps, as well as the data and logic flow in a browser that people can learn one language (javascript) to see what's possible and branch out from there.

What do you think? Feel free to get in touch.

[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/.

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

[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/

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 [e-mail].

[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

[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).

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

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

[3]: http://d3js.org

[4]: 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" 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.

[danoc]

This is incredibly helpful. Thanks!

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

We really just want to encourage people to get together and build stuff, but the weekly lessons will teach web development.

It'd be great to expand to other areas (especially hardware) in the future.

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

I totally agree, but how can we do that? My best guess is to have 30-45 mins of lectures then encourage them to spend the next 1.5 hours using the lecture material to work on creating a personal website.

[angersock]

See my other reply--you can probably get Bluehost (Provo lol) to sponsor some server time or little VPSes for people to play with.

I think the idea of lecture + lab is exactly the right way to play this.

[danoc]

I'd love to teach Git and Github but I think that'll a bit complicated for the non-CS majors.

And I like the web hosting idea. Who are the non-evil web hosts and registrar's nowadays?

Do you think we should just go with one and encourage them to FTP everything?

[angersock]

dkuntz has the right idea--if BU IT can hook you guys up with a box that'd be ideal:

https://it.byu.edu/byu/help.do?&sysparm_document_key=kb_know...

My alma mater gave everyone Unix accounts with public www folders by default, but I don't know if that's the case for you guys.

Tell the kids to use FTP, SCP, or whatever is easiest--test it out yourself and get it working. FTP can be quite easy, but make sure you can walk them through whatever workflow you decide on.

[dkuntz2]

Also, you might have better luck talking to the administration over the IT guys. My experience with IT guys has been "the policy must be followed... Unless someone higher up says otherwise".

[dkuntz2]

See if you could get your university to give you some web space and FTP access. It'd be the cheapest route.

[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.

[danoc]

I think can definitely be done if it's taught quickly. Much of that can be condensed into 10 minutes then taught again when people are starting to get the hang of things.

[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.