Ask HN: A Syllabus for Modern Web Development?

I would suggest checking out the WaSP interACT curriculum: <a href="http://interact.webstandards.org/curriculum/" rel="nofollow">http://interact.webstandards.org/curriculum/</a> 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.<p>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).<p>Also, if you need HTML/CSS teaching materials, I've put some here: <a href="http://www.teaching-materials.org/htmlcss/" rel="nofollow">http://www.teaching-materials.org/htmlcss/</a> (JavaScript materials coming soon)

This is the order I learned web development - I think it should be broadly applicable:<p>1. Static website dev - modern HTML(5) &#38; CSS <a href="http://www.http://htmldog.com/" rel="nofollow">http://www.http://htmldog.com/</a><p>2. Scripting HTML and CSS - Javascript (use standards based browsers only - avoid JQuery/libraries at first) <a href="http://javascript.crockford.com/" rel="nofollow">http://javascript.crockford.com/</a><p>3. Intro Server side programming to template HTML pages - PHP (easy to grok for beginners - combine previous lessons with some simple dynamic data) <a href="http://php.net/manual/en/introduction.php" rel="nofollow">http://php.net/manual/en/introduction.php</a><p>4. Intro to SQL - MySQL (give them the basic CRUD commands and show them how to hook those up with PHP) <a href="http://code.google.com/edu/tools101/mysql.html" rel="nofollow">http://code.google.com/edu/tools101/mysql.html</a><p>5. Cross browser Javascript with the help of JS Libraries - JQuery <a href="http://docs.jquery.com/Tutorials" rel="nofollow">http://docs.jquery.com/Tutorials</a><p>6. Using XML/JSON Web Services - Last.FM API (its a simple REST interface - avoid OAuth complexity) <a href="http://www.last.fm/api" rel="nofollow">http://www.last.fm/api</a><p>If you covered all that in a semester, you would have some semi-competent (there's always more to learn) web developers. Good luck!

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.<p>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.<p>That's what I'd do. Good luck!

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.<p>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.<p>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).<p>So to wrap this up:<p>* engage your audience<p>* find out what they plan to use the skills for<p>* lay out coursework that works towards them achieving their personal challenges<p>You'll find them more attentive, more eager, and looking forward to whatever the next semester contains.

What are the prerequisites for the course? Do they already know HTML? CSS? Will there be other courses after this one?<p>Definitely teach about accessibility, standards compliance, and the necessity of bending to the browsers your audience uses.

Philip Greenspun has two solid resources: - <a href="http://philip.greenspun.com/seia/" rel="nofollow">http://philip.greenspun.com/seia/</a>? - <a href="http://philip.greenspun.com/panda/" rel="nofollow">http://philip.greenspun.com/panda/</a><p>I would also guide myself by looking at the top languages on Github: <a href="https://github.com/languages" rel="nofollow">https://github.com/languages</a><p>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.

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.<p>Basic product/project management techniques should also be covered, including a brief intro to agile development.

Should also be aware of <a href="http://w3fools.com/" rel="nofollow">http://w3fools.com/</a> before reading any w3schools.

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!

Its not really a syllabus per se, but it shows the key technologies, concepts, how to learn them etc.<p><a href="http://lifehacker.com/5401954/programmer-101-teach-yourself-how-to-code" rel="nofollow">http://lifehacker.com/5401954/programmer-101-teach-yourself-...</a>

I found Opera's Web Standards Curriculum from 2008. Going to take a look.<p><a href="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/" rel="nofollow">http://dev.opera.com/articles/view/1-introduction-to-the-web...</a><p>Also found this monograph -- Teach the Web -- where several experts were interviewed about how to teach web professionals.<p><a href="http://teachtheweb.com/monograph.php" rel="nofollow">http://teachtheweb.com/monograph.php</a>