David’s Web Development Blog

I keep hearing about these off-the-wall classes such as the new “Game Theory in Starcraft” at UC Berkeley, but where are the really useful cutting edge classes that teach you about useful things such as frontend web development?

Sure, there are tons of classes for hardcore C++, Java, and maybe even PHP, but there’s nothing that really trains people with the latest web standards (frontend developing).  And when there is a web course offered, it likely teaches outdated standards such as font tags, table layouts, and such.

You might say that HTML/CSS is quite easy to learn.  Sure, that’s true to some degree, but there’s more to it than simply making a webpage look good.  You can get away with making a webpage look and act halfway decent, show it to your employer and get paid, and that’s great if that’s all you care about.  However, probably unbeknownst to you, your webpages are sub-par and show poor craftsmanship, resulting in poor SEO, poor accessibility (closely tied to SEO), poor load times, and most likely cross-browser compatibility issues.  You owe it to yourself and your visitors to give them something more.

Perhaps some of the cause of this lack of education is due to employers not knowing the difference.  If you build your website layout using HTML tables, what does your employer care, as long as the website looks good?  Unless they were a former web developer, they are not likely to know much about web standards.  They will likely know about SEO, however, since their interest is closely tied to profit, and SEO is closely tied to profit…

Anyhow, back to the lack of frontend web courses in colleges.  This got me thinking about what a 16-week semester would look like for a class that I’ll call “Frontend Web Development”.  (bit of a brainstorm here, feel free to add topics that should be covered in the comments).

• Week 1: Introduction, a bit about the history of web development, frontend versus backend development, the benefits of having a good frontend (making the case).  Explaining that this isn’t a design class, but it’s helpful to know some basic elements of design for create good-looking webpages.
• Week 2: HTML: semantic HTML for content (one of three FE components), basic markup of a page (doctype, page header and meta content, heading tags, paragraph tags, anchor/link tags, span, em, strong, image tags).  Difference between block and inline elements.  Lists.
• Week 3:HTML: SEO and accessibility concerns, tables (inappropriate and appropriate use example), div tags.  Transition into CSS.  Start building layouts with div elements and basic CSS (float, clear).  Intro to Firebug (just before getting deep into CSS).
• Week 4: CSS: CSS for styling, selectors, basic CSS properties (color, border, margin/padding), knowing when to add extra HTML markup for styling
• Week 5:CSS: selector specificity and conflicts (and using Firebug to debug).  Cross-browser compatibility: testing in A-grade browsers, common CSS hacks
• Week 6: CSS: backgrounds, sprites
• Week 7: More practice with CSS
• Week 8: Mid-semester: Putting it all together: make a webpage utilizing everything we’ve learned so far.
• Week 9: Javascript (the interaction leg): discussion of its importance in web 2.0 applications.  Basics of JS syntax, but not much emphasis here (this isn’t a basic programming class).  Discussion of the DOM.
• Week 10: Javascript: briefly - native DOM manipulations.  Cross-browsers issues, and transition into the need for JS frameworks such as jQuery or YUI.  Show some demos of what they can do (jQuery’s documentation is especially nice, but YUI also has good examples).
• Week 11: More practice with JS if needed.  Transition into setting up a developer environment (WAMP for Windows, MAMP for Mac?).  These don’t require much understanding.  Show where to put documents.
• Week 12: PHP (is this getting too ambitious?): basic syntax and examples.  Again, nothing major here.  It’s just an introduction, so we can do some basic stuff and get the students started.  Demonstrate the use of HTML form elements to pass data between pages.  $_GET, $_POST, etc.  Cookies?
• Week 13: Using PHP functions to load an RSS stream and display it on the page.  Using PHP for XHR in Javascript.  Use JS to fetch RSS streams from the PHP script.  Explain why the PHP intermediary is needed.
• Week 14: Optimization of your website: using the best image type, placing script tags at the bottom of the document, lazy loading techniques, etc.  Start building a project that uses HTML, CSS, JS, PHP.
• Week 15: Continue work on project.
• Week 16: Finish up the project.

Is this too ambitious?  This is more or less the curriculum of the Yahoo! Juku program, and they accomplish this in about the same amount of time.

By the end of the couse, the students should have been exposed to enough material to be able to find more if they were interested, or to at least know the basics about web standards and frontend engineering.

What say you?  Is this too much to cover?  Did I leave out any important concepts (most likely!)?