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

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.

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.

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.

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

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.

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.

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!

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.

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.

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.

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

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.

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

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