

Ask HN: A Syllabus for Modern Web Development? - ssn

How would you outline a one semester syllabus on Modern Web Development? Which are the key technologies, concepts and languages to include?
======
pamelafox
I would suggest checking out the WaSP interACT curriculum:
<http://interact.webstandards.org/curriculum/> It's a bit on the academic
side, but it does do a good job of listing the many different competencies
involved in web development, as it's easy to forget how much is involved.

I just helped in putting together a proposal for an advanced web dev course
for a university, and it involved: semantics, offline/storage, graphics/3d,
device access, multimedia, performance, cross-browser debugging/optimizing,
user experience (web apps/mobile), SEO, and analytics. That course is
frontend-focused and presumes previous experience with basic web dev
technologies (HTML/CSS/JS).

Also, if you need HTML/CSS teaching materials, I've put some here:
<http://www.teaching-materials.org/htmlcss/> (JavaScript materials coming
soon)

~~~
kapilkaisare
I would replace (x)html with html5 wherever mentioned though. Nice guide
overall.

------
Shakakai
This is the order I learned web development - I think it should be broadly
applicable:

1\. Static website dev - modern HTML(5) & CSS <http://www.http://htmldog.com/>

2\. Scripting HTML and CSS - Javascript (use standards based browsers only -
avoid JQuery/libraries at first) <http://javascript.crockford.com/>

3\. Intro Server side programming to template HTML pages - PHP (easy to grok
for beginners - combine previous lessons with some simple dynamic data)
<http://php.net/manual/en/introduction.php>

4\. Intro to SQL - MySQL (give them the basic CRUD commands and show them how
to hook those up with PHP) <http://code.google.com/edu/tools101/mysql.html>

5\. Cross browser Javascript with the help of JS Libraries - JQuery
<http://docs.jquery.com/Tutorials>

6\. Using XML/JSON Web Services - Last.FM API (its a simple REST interface -
avoid OAuth complexity) <http://www.last.fm/api>

If you covered all that in a semester, you would have some semi-competent
(there's always more to learn) web developers. Good luck!

------
guynamedloren
There's no better way to learn than by doing. Assuming we're talking about
basic web-development here for people with limited prior knowledge, I would
design the syllabus around a final goal of building a fully-functioning
website. Better yet: have a really specific goal. Maybe decide that the
website should be a one-page online store. This makes it easy to split the
syllabus up into smaller, manageable chunks and everyone will know what
they're shooting for, even if some pieces get a bit tricky. Also, this way
they only get the stuff they need. Let's be honest, nobody cares about the
theory behind web development.

I would start with registering a domain name, setting up hosting and DNS,
creating and modifying the index.html file. Then add a css file and run
through the basics of html and css standard practices. Limit the design to
basic colors and fonts at first. Just when they start to get the hang out it,
bust out a crash course in web design with Adobe Illustrator and make those
sites pretty. After that, utilize something like Paypal's webmaster tools to
set up an extremely simple shopping cart. If time allows, dedicate a session
to Jquery UI to spice up the sites even more. In the end, there will be some
really polished final products with plenty of new skills and lots of
invaluable experience.

That's what I'd do. Good luck!

~~~
wccrawford
I was going to say it slightly differently, but this is pretty much exactly
what I was going to suggest.

One of the main reasons is that it's a quickly moving target. Any technology
you learn today has to be questioned in a year. It may still be around, but
it'll probably be used at least a slightly differently.

So to learn web development, you need to learn to be flexible from the start.

------
collypops
I personally think that the topic is far too wide to provide a solid grounding
in just one semester. What I would advise is that you should find out the
common ways that that the students would use this knowledge, and explore the
concepts that relate to their work.

For example, I recently put together a 10 week course (1 hour per week) to
introduce HTML and CSS to the marketing/sales/editorial staff in my
department. I work for a prominent Australian news/media company, and we draw
inspiration for new site features and improvements from across the entire
department. We (the developers and product team) felt that the rest of the
department would feel more confident in suggesting ideas (or making judgements
about feasibility) if they knew what work goes into the
presentation/interaction side of our websites.

We spent the first 2 weeks introducing the web and giving a bit of back story,
and heavily enforcing the most up to date web standards. We then spent the
remainder of the course jumping between HTML and CSS, and eventually had the
team dreaming up ideas for widgets that we could add to the sites, and being
more creative with inline content in our stories (having fun in the HTML mode
of the WYSIWYG editor that they never got to see before).

So to wrap this up:

* engage your audience

* find out what they plan to use the skills for

* lay out coursework that works towards them achieving their personal challenges

You'll find them more attentive, more eager, and looking forward to whatever
the next semester contains.

------
atgm
What are the prerequisites for the course? Do they already know HTML? CSS?
Will there be other courses after this one?

Definitely teach about accessibility, standards compliance, and the necessity
of bending to the browsers your audience uses.

~~~
dmc
Web development, or web design?

Development could mean code ignoring the front-end design to the OP.

~~~
guynamedloren
I've always thought of development as a big picture kind of thing. Programming
is the back-end and design is the front-end, while development is a perfect
harmony somewhere inbetween.

------
sayemm
Philip Greenspun has two solid resources: \-
<http://philip.greenspun.com/seia/>? \- <http://philip.greenspun.com/panda/>

I would also guide myself by looking at the top languages on Github:
<https://github.com/languages>

Best way to start though is to work on a project on your own using the LAMP
stack (Linux, Apache, MySQL, PHP), that'll give you a good overview of all the
different pieces involved.

------
jschuur
Whatever curriculum you come up with, make sure that by the middle of the
semester, students have a working and public site, so that they can spend the
rest of the semester experiencing how actual end users use and respond to it
and you can discuss the process by which developers decide how to deal with
user feedback.

Basic product/project management techniques should also be covered, including
a brief intro to agile development.

------
ideamonk
Should also be aware of <http://w3fools.com/> before reading any w3schools.

------
fragholrok
I know I'm not the one that asked the question, but I've been looking for
these types of resources for a longtime. The w3fools one was especially eye
opening, and the topics at greenspun are very interesting too! I'm off to
learn, yeay!!! Thanks HN, you guys are awesome!

------
Jsarokin
Its not really a syllabus per se, but it shows the key technologies, concepts,
how to learn them etc.

[http://lifehacker.com/5401954/programmer-101-teach-
yourself-...](http://lifehacker.com/5401954/programmer-101-teach-yourself-how-
to-code)

------
ssn
I found Opera's Web Standards Curriculum from 2008. Going to take a look.

[http://dev.opera.com/articles/view/1-introduction-to-the-
web...](http://dev.opera.com/articles/view/1-introduction-to-the-web-
standards-cur/)

Also found this monograph -- Teach the Web -- where several experts were
interviewed about how to teach web professionals.

<http://teachtheweb.com/monograph.php>

