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

By Chris Mills

11th October 2012: Material moved to webplatform.org

The Opera web standards curriculum has now been moved to the docs section of the W3C webplatform.org site. Go there to find updated versions of these docs, and much more besides!

12th April 2012: This article is obsolete

The web standards curriculum has been donated to the W3C web education community group, to become part of a much bigger educational resource. It is constantly being updated so that it remains current with modern web design practices and technologies. To find the most up-to-date web standards curriculum, visit the web education community group Wiki. Please make changes to this Wiki yourself, or suggest changes to Chris Mills, who is also the chair of the web education community group.


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?

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.

OK, so we keep talking about these bad practices in hushed tones, like they’re the secret plans to the Death Star or something. We are not going to cover these practices in any detail in this course, as we don’t believe we should; we think you should just be sent along the correct path to begin with. You are however probably wondering what they are, so let’s just talk about them briefly.

In the old days, people used to do things like laying out their web sites inside giant tables, using the different table cells to position their graphics, text etc (not what tables were intended for, adds superfluous markup to the page). They used to use invisible images called spacer GIFs to fine tune positioning of page elements (not what images are intended for, add superfluous markup and images to the page). They used to write JavaScript that generated menus etc on the fly (no good for people with JavaScript disabled in their browsers, or people with visual impairments using screenreaders, which get confused by such JavaScript) or worked on only one browser (what about people using other browsers?). They used to insert styling information directly into the HTML using <font> elements (terrible for maintenance, and adds superfluous markup to the page). And many other crimes against web development. The worst thing is that I say “in the old days” above, but the fact is that a lot of people are still doing things like this!

Web development is a messy skill at the best of times, but bad practices like these just make it harder. Using web standards and best practices, as outlined in this course, is the best way to go.

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

  1. 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
  2. How does the Internet work?, by Jonathan Lane. Hungarian translation | Japanese translation
  3. The Web standards model—HTML, CSS and JavaScript, by Jonathan Lane. Hungarian translation | Japanese translation
  4. 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.

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

HTML basics

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

The HTML body

  1. Marking up textual content in HTML, by Mark Norman Francis. Hungarian translation
  2. HTML Lists, by Ben Buchanan. Hungarian translation
  3. Images in HTML, by Christian Heilmann. Hungarian translation
  4. HTML links—let’s build a web! by Christian Heilmann. Hungarian translation
  5. HTML Tables, by Jen Hanen. Hungarian translation
  6. HTML Forms—the basics, by Jen Hanen. Hungarian translation
  7. Lesser–known semantic elements, by Mark Norman Francis. Hungarian translation
  8. Generic containers — the div and span elements, by Mark Norman Francis. Hungarian translation
  9. Creating multiple pages with navigation menus, by Christian Heilmann.
  10. Validating your HTML, by Mark Norman Francis.


  1. Accessibility basics, by Tom Hughes-Croucher.
  2. Accessibility testing, by Benjamin Hawkes-Lewis.


  1. CSS basics, by Christian Heilmann.
  2. Inheritance and Cascade, by Tommy Olsson.
  3. Text styling with CSS, by Ben Henick.
  4. The CSS layout model - boxes, borders, margins, padding, by Ben Henick.
  5. CSS background images, by Nicole Sullivan.
  6. Styling lists and links, by Ben Buchanan.
  7. Styling tables, by Ben Buchanan.
  8. Styling forms, by Ben Henick.
  9. Floats and clearing, by Tommy Olsson.
  10. CSS static and relative positioning, by Tommy Olsson.
  11. CSS absolute and fixed positioning, by Tommy Olsson.

Advanced CSS study

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

JavaScript core skills

  1. Programming - the real basics!, by Christian Heilmann
  2. What can you do with JavaScript?, by Christian Heilmann
  3. Your first look at JavaScript, by Christian Heilmann
  4. JavaScript best practices, by Christian Heilmann
  5. The principles of unobtrusive JavaScript, by PPK
  6. JavaScript functions, by Mike West
  7. Objects in JavaScript, by Mike West
  8. Traversing the DOM, by Mike West
  9. Creating and modifying HTML, by Stuart Langridge
  10. Dynamic style - manipulating CSS with JavaScript, by Greg Schechter
  11. Handling events with JavaScript, by Robert Nyman
  12. JavaScript animation, by Stuart Langridge
  13. Graceful degredation versus progressive enhancement, by Christian Heilmann


  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


Supplementary accessibility articles



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.

About the author

Picture of the article author Chris Mills

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


The forum archive of this article is still available on My Opera.

  • photo

    Robin Awal

    Friday, March 30, 2012

    it would have been more nice if we could download in pdf formats too.
  • photo


    Wednesday, July 11, 2012

    Thank you all for sharing your knowledge..Really a great source for beginners and professionals too.But could you do something about getting this page displayed in google search.There are many like me who would love to learn from your article.There are many useless tutorials i find in google search but not this..I got this link through MDN.Many will benefit from this.
  • photo

    Emmanuel Madubuike

    Monday, January 7, 2013

    Chris, I FEEL your passion for Internet and web standard development. I also FEEL your stuff and pulse per professionalism running through the preambles and the course contents of the Opera STANDARD Curriculum. Your willingness to spread knowledge FREE is striking. I really wish I can have a mentor and instructor like you here to deal with directly as I embark on this journey...
    Talking about "journey", in 2011 I saw the need to upgrade/add to my skills for future and present job relevance. As a graduated in Mass Communication since 1997 practiced Marketing from my first job in 1999 to that year[2011] when I decided to explore opportunities for further self development in the are of Internet and e-marketing considering my experience on one hand, and natural interest in Internet and designing with computers on the other hand. Then I decided to train in Web Designing. I bought a fairly used laptop and enrolled in Aflon, a digital institution that advertised for web design training here in Abuja Nigeria. Sadly after committing money and a few unsatisfactory lessons, my computer crashed. All efforts to fix it failed so frustrated I stopped the course premature. I took up another job as a Secretary in JBN Nigeria but for over one year the dream of becoming a Web Designer remains green with me every passing day. I continued to search the Internet with my mobile phone on possible quality free training on the Internet. My search paid off when I found the Opera Standard Curriculum link. I had to save to buy this time a new laptop for the training in earnest. I have just bought one. My aspiration is to become a self-trained Web Designer following your guide/instruction by end of 2013, but I am worried that you said that the curriculum has been moved to W3C webplatform.org. Will the program, vision and standard remain the same? What is the relationship between Opera as a brand and W3C. Are they not going to turn the training into financial exploitative tool against Creative Commons license and your free knowledge intentions?
    Now the big one, can't Opera introduce something in Nigeria, a country that has a lot in common with India in terms of size,population and market per your products and services needs? I am sure governments here and many private schools will be much interested in partnering with you in this regard.
  • photo


    Saturday, February 2, 2013

    @Emmanuel Madubuike, remain focused in ur learning. By the end of this year, trust me, you wil be able to develop websites with advanced features. Just study every article in HTML, CSS and JAVASCRIPT chapters and every other information on this dev.opera.

    Concerning your question about this article moving to W3C. It may interest you to know that W3C tutorials are as free as the ones here. And they have tutorials on other web technologies like PHP, XML, and AJAX. W3C is the mother of web standard and development. You can also visit their website and learn their simplified tutorials.
  • photo

    Jane Derleenka

    Friday, March 8, 2013

    Folks, I was wondering, why dont you moderate comments????
  • photo


    Wednesday, December 18, 2013

    This is cool post and i enjoy to read this post. your blog is fantastic and you have good staff in your blog. nice sharing keep it up.
    Privilegeserver Hosting
  • photo


    Wednesday, December 18, 2013

    I'm really happy to find this site and did enjoy reading useful articles posted here. The ideas of the author was awesome, thanks for the share.
    carbon monoxide detector
  • photo


    Wednesday, December 18, 2013

    That is the precise blog for anybody who needs to search out out about this topic. You realize a lot its almost arduous to argue with you (not that I actually would need...HaHa). You undoubtedly put a brand new spin on a topic thats been written about for years. Great stuff, simply great! -
    dewalt air compressor
  • photo


    Wednesday, December 18, 2013

    Thank you for the sensible critique. Me & my neighbour were preparing to do some research about that. We got a good book on that matter from our local library and most books where not as influensive as your information.
    kohler faucets
  • photo


    Wednesday, December 18, 2013

    Excellent read, Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work.
    how to get big penis
  • photo


    Wednesday, December 18, 2013

    You're in point of fact a just right webmaster. The website loading speed is amazing. It kind of feels that you're doing any distinctive trick. Moreover, The contents are masterpiece. you have done a fantastic activity on this subject! –
    Gunnar Andreassen
  • photo


    Wednesday, December 18, 2013

    You're in point of fact a just right webmaster. The website loading speed is amazing. It kind of feels that you're doing any distinctive trick. Moreover, The contents are masterpiece. you have done a fantastic activity on this subject! –
    Gunnar Andreassen
  • photo


    Wednesday, December 18, 2013

    I did enjoy reading articles posted on this site. They are impressive and has a lot of useful information.
    Click this link
  • photo


    Wednesday, December 18, 2013

    I really enjoy simply reading all of your weblogs. Simply wanted to inform you that you have people like me who appreciate your work. Definitely a great post. Hats off to you! The information that you have provided is very helpful.
    manicure table
  • photo


    Wednesday, December 18, 2013

    I just got to this amazing site not long ago. I was actually captured with the piece of resources you have got here. Big thumbs up for making such wonderful blog page!
    coupon chip
  • photo


    Wednesday, December 18, 2013

    I really enjoy simply reading all of your weblogs. Simply wanted to inform you that you have people like me who appreciate your work. Definitely a great post. Hats off to you! The information that you have provided is very helpful.
  • photo


    Wednesday, December 18, 2013

    I am very happy to read this article .. thanks for giving us go through info.Fantastic nice. I appreciate this post.
    Radio Online Streaming
  • photo


    Wednesday, December 18, 2013

    This is also a very good post which I really enjoyed reading. It is not everyday that I have the possibility to see something like this..
  • photo


    Wednesday, December 18, 2013

    A very awesome blog post. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. I was exactly searching for. Thanks for such post and please keep it up. Great work.
    miniclip action games
  • photo


    Wednesday, December 18, 2013

    You're in point of fact a just right webmaster. The website loading speed is amazing. It kind of feels that you're doing any distinctive trick. Moreover, The contents are masterpiece. you have done a fantastic activity on this subject! –
No new comments accepted.