1: Introduction to The Web Standards Curriculum/Table of Contents

By Chris Mills

• Next article—The history of the Internet and the web, and the evolution of web standards
• Table of contents

Introduction

For a while now, I’ve had a dream. My work in the last 8 or 9 years has been heavily focused around education, whether I’ve been commissioning and editing technical books to help people create cool stuff with technology, training new employees at the various companies I’ve worked for, or editing and writing tutorial articles to help people use Opera’s software. I am passionate about the Web too, and a big believer in open web standards. I wanted to do my bit to help make the Web a better place, and I think this comes back to education, whether that’s teaching people how to collaborate and have more respect for one another, or teaching them how to make their web sites work across platforms and devices, and be accessible to people with disabilities. Web standards are key to the latter, so I decided to try putting my time and energy into something that would help increase the adoption of web standards on the Web today and in the future. It has been floating around my head for a while now, but it has finally come to fruition at Opera—many thanks to my wonderful employers for paying me to do this! One of my dreams has finally been realised.

So in this article I introduce to you the product of a lot of hard work over the last several months (by myself and a lot of other people)—the Web Standards Curriculum, a course designed to give anyone a solid grounding in web design/development, no matter who they are—it is completely free to use, accessible, and assumes no previous knowledge. I am mainly aiming this at universities, as I believe the standards of education in web standards to be somewhat lacking at many universities. I’ve heard tales of students being marked down for using web standards in their coursework, because the marking schemes are so outdated; I’ve also heard tales of employers despairing because when they interview university graduates for web–related positions, they find out that the graduates really don’t have a clue about real world web development. If you’re at a progressive university that does teach web standards in a reasonable fashion, then I tip my hat to you—get in touch!

In this article I’ll cover the following:

• Why web standards? Here I briefly discuss the advantages of using web standards, why they are not being adopted like they should, and how my course aims to tackle these issues
• How the course is structured. What it says on the tin; this section also talks about how educators should think about presenting the material to use it effectively in courses
• Who should use this course? When I say “anyone”, who do I mean, exactly?
• The table of contents. Skip to this bit if you’re fed up with my waffle and want to get straight to the learning.
• Acknowledgements
• Contact me

Why web standards?

The main reasons that adopting web standards in your web design/development work is such a good idea are expanded on in article 4, but I’ll go through them briefly here, to set the scene. Using web standards confers the following benefits:

1. Efficiency of code: As you’ll learn throughout the course, a lot of best practice web standards usage is all about reusing code—you can separate your HTML content from your stylistic (CSS) and behavioural (JavaScript) information, allowing your file sizes to be kept small, and code to be written only once, and then reused wherever it is needed.
2. Ease of maintenance: This follows closely on from the last point—if you can write HTML only once, and then apply styles and behaviour wherever they are needed using classes and functions, then if you need to change something at a later date, you can just make the change in one place and it propagates throughout the entire web site, rather than having to specify that change everywhere that it is needed!
3. Accessibility: The next two points are closely related—one of the big issues on the Web is making web sites accessible to everyone, no matter who they are, regardless of circumstance. This includes making web sites usable by people with disabilities such as blindness/visual impairment and motor impairment (ie, people who have restricted movement, and might not be able to use their hands properly, or at all). By using web standards and best practices, you’ll be able to make your web sites usable by this significant group of the web audience with no extra effort.
4. Device compatibility: by this, I mean ensuring that your web sites will work not only across different platforms—ie Windows, Mac, Linux—but also alternative browsing devices, which these days can include mobile phones, TVs and games consoles. These devices have limitations such as screen size, processing power, control mechanisms available and more, but the good news is that again, using web standards and best practices, you can pretty much guarantee that your web sites will work on most of these devices. There are more mobile phones in the world than PCs, a lot of which are Internet–capable, so can you or your clients afford to miss out on this market? For more on mobile web development, check out some of the dedicated mobile articles on dev.opera.com.
5. Web crawlers/search engines: By this, we are talking about what is termed search engine optimization—the practice of making your web sites as visible as possible to the so–called web crawlers that trawl the web and index web sites, and therefore giving you better search rankings on sites such as Google. There is a science to this (see SEO articles such as Intelligent site structure for better SEO! and Semantic HTML and Search Engine Optimization) but yet again, just by using web standards you will make your site a lot more visible on Google, Yahoo!, etc., which is good for business.

Even with all these advantages however, most sites on the Web still do not follow web standards, and many web developers working today still use bad, outdated practices. “Why?” You ask. There are a number of reasons for this—people will cite lack of education, company policy, not needing to learn standards because they are getting paid anyway, it’s too hard to learn, standards support in web browsers…let’s look at each one of these in more detail, and then look at the counter arguments, to try to get rid of any excuse for not adopting/learning standards.

1. Lack of education: There is an issue here, but this is one of the main reasons this course was created. A lot of universities don’t teach web standards in their web–related courses, and a lot of curriculums tend to contain outdated practices, and are hard to change due to bureaucracy. Books and training courses tend to be expensive. But wait! Now we’ve provided a course that’s free, and are running around universities etc to help make these changes for them, so there’s really now no excuse here.
2. Company policy: There is no doubt that some companies/institutions still have really old and outdated web sites. They may have policies that force their employees to use outdated browsers, but it is getting better, and now there is a free course available to easily show how to make changes, things should improve further. Upgrading a web site to modern standards encourages companies to upgrade the browsers that they use, as sites will not look as good in outdated browsers (although they should still work in older browsers). Companies should encourage their customers to upgrade as well. There is sound business reasoning as well—sites that use web standards, as explained above, will yield better search engine results and be accessible to people with disabilities and users of alternative devices—can companies afford to ignore this audience?
3. “I don’t need to learn them!”: I know some developers will sit there and say “but I’m using outdated practices and still getting paid—so why do I need to bother with this new stuff?” As explained above, it makes your code more efficient, easier to write, and easier to maintain. And it allows you to write modern code that is accessible and usable on alternative devices—isn’t that exciting? It will also make your skillset more future–proof, and make you capable of earning more. A lot of companies are requesting skills in web standards these days.
4. “It’s too hard to learn!”: Rubbish. After digesting some of this course, you’ll realize how easy it is to pick up the basics of using web standards, whether you’re new to web development/design, or an existing web person upgrading your skillset. It is about as hard as using the old, outdated bad methods, which isn’t very, and it confers so many advantages over the old ways.
5. Standards support in browsers: Standards support in browsers used to differ greatly, which made getting web sites to work across different browsers a nightmare. But those days are gone—modern browsers all have decent web standards support. Support is still sometimes needed for old browsers that don’t have such good standards support, but by using modern best practices, you can ensure that users of those browsers will still have a reasonable user experience.

So as you can see, there’s really not any excuse to not adopt web standards in your web development work. At least if you are coming to this course from the point of view of a beginner, you are starting off on the right foot and learning best practices from the start, rather than having to unlearn bad practices.

Course structure

The course is composed of several articles—there will be over 50 when the basic course is finalized—and each article is a few thousand words long. Each article focuses on a specific microtopic, and where appropriate, contains background on the topic, essential theory, practical examples and walkthrough tutorials to follow, and exercise questions to test your knowledge.

A logical way to teach the course is to work out how many lessons you’ve got available to teach it over, and divide it by the number of articles. For each lesson, get the students to read over the articles connected to that lesson before the lesson occurs. Then go through practical examples during the lesson, and get the students to do the exercise questions after each lesson. Logically, I think an hour should be enough time to go through the concepts contained in each article, as long as you get the students to read each article before the lessons are taught. There is perhaps about 50 hours of teaching time in this course, and 50 hours of background reading.

Obviously, you’ll have to think about the amount of time you teach the course over and exactly what to cover in each lesson, but experimentation is key.

Who should use this course?

This is a web standards course comprised of several articles, aimed at pretty much anyone who wants to learn web standards–based web design from scratch. It is intended to take the reader from nothing more than a basic familiarity with browsing the web, to being competent with CSS and HTML, and have basic knowledge of JavaScript and how it fits in to the puzzle. It should give you enough knowledge to start thinking about entering the job market with confidence (obviously experience can’t be taught).

Who is it aimed at? I want it to be usable by anyone who wants to learn web design “the right way”:

1. University/college students and teachers: I have mentioned this already—this is an ideal set of articles to either create your own course from and deliver it to students, or use parts of to supplement your own course. To any students already studying some kind of web–related course, you should use this material to supplement your knowledge, and lobby your teachers into considering it as well! I would recommend all teachers/lecturers to look over this material as well, to make sure the techniques covered in their courses are current best practices.
2. Pre–college/university age students: While this course has been mainly written with adults in mind, there is no reason why younger students can’t benefit from it—have a go and see how you get on.
3. Existing web designers and developers: There are a lot of existing web developers and designers out there who either aren’t using web standards and best practices, or could use an easily accessible reference to look things up in, or use to brush up their knowledge. To the former, I urge you to give this course a chance and see how easy and valuable web standards are to adopt. To the latter, I’m sure you will find this course useful in helping others, brushing up on your skills, looking up hard–to–recall facts, and finding ammunition to help convince bosses and clients that things such as accessibility make a lot of sense.
4. Educators inside companies: This is an ideal way to provide inexpensive training to employees.
5. Any other individuals: If you are an individual who just fancies learning something about web design and development, then again, this is an inexpensive way to get some help with your endeavors.

I am not expecting people to pay to use this course—it is released on a Creative Commons license, so freely available to anyone who wants to make use of it, as long as they give us the proper attribution.

Table of contents

The beginning

1. Introductory material, by Chris Mills—This is the one you’re reading. Hebrew translation | Hungarian translation | Italian translation | Japanese translation

TRANSLATIONS AVAILABLE! There are other translations of the web standards curriculum available too.

Introduction to the world of web standards

2. The history of the Internet and the web, and the evolution of web standards, by Mark Norman Francis. Hebrew translation | Hungarian translation | Italian translation | Japanese translation
3. How does the Internet work?, by Jonathan Lane. Hungarian translation | Japanese translation
4. The Web standards model—HTML, CSS and JavaScript, by Jonathan Lane. Hungarian translation | Japanese translation
5. Beautiful dream, but what’s the reality?, by Jonathan Lane. Hungarian translation | Japanese translation

Web Design Concepts

This section won’t go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.

6. Information Architecture—planning out a web site, by Jonathan Lane. Hungarian translation
7. What does a good web page need?, by Mark Norman Francis. Hungarian translation
8. Colour Theory, by Linda Goin. Hungarian translation
9. Building up a site wireframe, by Linda Goin. Hungarian translation
10. Colour schemes and design mockups, by Linda Goin. Hungarian translation
11. Typography on the web, by Paul Haine. Hungarian translation

HTML basics

12. The basics of HTML, by Mark Norman Francis. Hungarian translation
13. The HTML <head> element, by Christian Heilmann. Hungarian translation
14. Choosing the right doctype for your HTML documents, by Roger Johansson. Hungarian translation

The HTML body

15. Marking up textual content in HTML, by Mark Norman Francis. Hungarian translation
16. HTML Lists, by Ben Buchanan. Hungarian translation
17. Images in HTML, by Christian Heilmann. Hungarian translation
18. HTML links—let’s build a web! by Christian Heilmann. Hungarian translation
19. HTML Tables, by Jen Hanen. Hungarian translation
20. HTML Forms—the basics, by Jen Hanen. Hungarian translation
21. Lesser–known semantic elements, by Mark Norman Francis. Hungarian translation
22. Generic containers — the div and span elements, by Mark Norman Francis. Hungarian translation
23. Creating multiple pages with navigation menus, by Christian Heilmann.
24. Validating your HTML, by Mark Norman Francis.

Accessibility

25. Accessibility basics, by Tom Hughes-Croucher.
26. Accessibility testing, by Benjamin Hawkes-Lewis.

CSS

27. CSS basics, by Christian Heilmann.
28. Inheritance and Cascade, by Tommy Olsson.
29. Text styling with CSS, by Ben Henick.
30. The CSS layout model - boxes, borders, margins, padding, by Ben Henick.
31. CSS background images, by Nicole Sullivan.
32. Styling lists and links, by Ben Buchanan.
33. Styling tables, by Ben Buchanan.
34. Styling forms, by Ben Henick.
35. Floats and clearing, by Tommy Olsson.
36. CSS static and relative positioning, by Tommy Olsson.
37. CSS absolute and fixed positioning, by Tommy Olsson.

Advanced CSS study

38. Headers, footers, columns, and templates, by Ben Henick

JavaScript core skills

39. Programming - the real basics!, by Christian Heilmann
40. What can you do with JavaScript?, by Christian Heilmann
41. Your first look at JavaScript, by Christian Heilmann
42. JavaScript best practices, by Christian Heilmann
43. The principles of unobtrusive JavaScript, by PPK
44. JavaScript functions, by Mike West
45. Objects in JavaScript, by Mike West
46. Traversing the DOM, by Mike West
47. Creating and modifying HTML, by Stuart Langridge
48. Dynamic style - manipulating CSS with JavaScript, by Greg Schechter
49. Handling events with JavaScript, by Robert Nyman
50. JavaScript animation, by Stuart Langridge
51. Graceful degredation versus progressive enhancement, by Christian Heilmann

HTML5

1. Get familiar with HTML5!, by Chris Mills
2. New structural elements in HTML5, by Chris Mills
3. New form features in HTML5, by Patrick Lauke and Chris Mills
4. Introduction to HTML5 video, by Bruce Lawson Patrick Lauke
5. More accessible HTML5 video player, by Cristian Colceriu
6. HTML 5 canvas - the basics, by Mihai Sucan
7. Introducing Web Sockets, by Bruce Lawson and Mike Taylor
8. Running your web applications offline with HTML5 AppCache, by Shwetank Dixit
9. Web Storage: easier, more powerful client-side data storage by Shwetank Dixit
10. Web Workers rise up!, by Daniel Davis
11. How to use the W3C Geolocation API, by Shwetank Dixit

Mobile web development

1. Mobile 1: Introduction to the mobile web, by Brian Suda

Supplementary articles

Microformats

• Introduction to hCard, by Christopher Schmitt
• Introduction to hCard, Part two: Styling hCards, by Christopher Schmitt
• XFN encoding, extraction, and visualizations, by Brian Suda
• Styling XFN and rel-license links, by Christopher Schmitt
• Styling hReview Microformats, by Christopher Schmitt
• Styling and extracting hCalendar, by Christopher Schmitt
• Microformat Encoding and Visualization, by Brian Suda

Supplementary accessibility articles

• Introduction to WAI-ARIA, by Gez Lemon
• Creating accessible data tables, by Frank Palinkas
• Building Accessible Static Navigation with CSS, by Frank Palinkas

Miscellaneous

• Getting your content online, by Craig Grannell.
• More about the document <head>, by Chris Heilmann.
• Supplementary: Common HTML entities used for typography, by Ben Henick.
• The Opera Web Standards Curriculum glossary, by various authors. This is incomplete, and will be added to as time goes by.

Acknowledgements

The number of people who have helped me with this course are too numerous to mention in any great detail, but I have hopefully included everyone here. They are all great people, so check them out—go to their talks, buy their books, read their blogs, or do whatever else you can do to support them. I give to all of you my admiration and gratitude.

1. The authors: thank you so much to Ben Buchanan, Tom Hughes–Croucher, Mark Norman “Norm” Francis, Linda Goin, Paul Haine, Jen Hanen, Benjamin Hawkes–Lewis, Ben Henick, Christian Heilmann, Roger Johansson, Peter–Paul Koch, Jonathan Lane, Stuart Langridge, Robert Nyman, Tommy Olsson, Greg Schechter, Nicole Sullivan, and Mike West. Without you, this course would be nothing, literally.
2. The Opera crew: best wishes to Jan Standal, David Storey, the rest of my team, and everyone else at Opera for believing in this idea, and helping me to develop the plan.
3. The organizations: thanks to everyone at Yahoo (the authors, and Sophie Major for he, by Christian Heilmann. lping to do a lot of organization and promotion), the WaSP (particularly Gareth Rushgrove, Stephanie Troeth and Aarron Walter), the Britpack, the Geekup folks, and all the universities who showed an interest in looking at this course and helping to take it further.
4. The individuals: small mercies shall be granted to the following wonderful people—Craig Saila, Sara Dodd, John Allsopp, Roan Lavery, Bruce Lawson, Alan White. Sorry if I forgot anyone.
5. The readers: special hails to you for having an interest in creating web sites the right way, and taking time out to read this course!

Contact me

I am constantly looking to improve this course, and get it adopted by as many people as possible. If you have any suggestions for how the course could be improved, any general comments to share, or want to talk to me about adopting it somewhere, then get in touch. My e–mail is cmills [at] opera [dot] com. You can also post comments about each article in the series using the “Discuss this article“ link at the bottom of each one. You’ll need a my.opera account to participate in discussions.

• Next article—The history of the Internet and the web, and the evolution of web standards
• Table of contents

About the author

Chris Mills is a developer relations manager for Opera—he edits and publishes articles on dev.opera.com and labs.opera.com, liaises with the community to raise awareness of Opera and collect feedback, and evangelises about Opera software wherever he can. He is also the organiser and editor of the Web Standards Curriculum.

Outside of work, he is an extremely avid music fan, enjoying playing and listening to a wide variety of music, including metal, folk, punk, electronica, prog, and more. His main band at the moment is the mighty Conquest of Steel.

Chris Mills

Chris Mills is a web technologist, open standards evangelist and education agitator, currently working at Opera Software in the developer relations team. He spends most of his time writing articles about web standards for dev.opera.com and other publications (such as .net mag and A List Apart), giving talks at universities and industry conferences, and lobbying universities to improve their web education courses. He believes that education is the answer to everything, but in particular he is passionate about using education to improve the overall content quality, accessibility, usability and future-viability of the Web.

He is the creator of the Opera Web standards curriculum, contributor to the WaSP InterACT project, and coauthor of InterACT with web standards: A Holistic Approach to Web Design. In August 2011, he also accepted the position of co-chair of the newly-formed Web Education Community Group.

Outside work he is a heavy metal drummer, proud father of three and lover of good beer.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.