Difference between revisions of "Web Standards Curriculum"

From W3C Wiki
Jump to: navigation, search
Line 20: Line 20:
 
# [[How does the Internet work]]? by Jonathan Lane. [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]
 
# [[How does the Internet work]]? by Jonathan Lane. [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]
 
# [[The web standards model - HTML CSS and JavaScript]] by Jonathan Lane. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]
 
# [[The web standards model - HTML CSS and JavaScript]] by Jonathan Lane. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]
# [[Beautiful dream, but what's the reality]]? by Jonathan Lane. [http://dev.opera.com/articles/view/5-webes-szabvanyok-szep-alom/ Hungarian translation] | [http://dev.opera.com/articles/view/5-web-standards-beautiful-dream-bu-ja/ Japanese translation]
+
# [[Beautiful dream, but what's the reality]]? by [[Jonathan Lane]]. [http://dev.opera.com/articles/view/5-webes-szabvanyok-szep-alom/ Hungarian translation] | [http://dev.opera.com/articles/view/5-web-standards-beautiful-dream-bu-ja/ Japanese translation]
  
 
=== Web Design Concepts ===
 
=== Web Design Concepts ===
Line 26: Line 26:
 
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.
 
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.
  
# [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site Information Architecture - planning out a web site], by Jonathan Lane. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation]
+
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]], by [[Jonathan Lane]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation]
# [http://www.w3.org/wiki/What_does_a_good_web_page_need What does a good web page need?], by Mark Norman Francis. [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation]
+
# [[What_does_a_good_web_page_need|What does a good web page need?]], by [[Mark Norman Francis]]. [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation]
# [http://www.w3.org/wiki/Colour_theory Colour Theory], by Linda Goin. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation]
+
# [[Colour_theory|Colour Theory]], by Linda Goin. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation]
# [http://www.w3.org/wiki/Building_up_a_site_wireframe Building up a site wireframe], by Linda Goin. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation]
+
# [[Building up a site wireframe]], by [[Linda Goin]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation]
# [http://www.w3.org/wiki/Colour_schemes_and_design_mockups Colour schemes and design mockups], by Linda Goin. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation]
+
# [[Colour schemes and design mockups]], by [[Linda Goin]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation]
# [http://www.w3.org/wiki/Typography_on_the_Web Typography on the web], by Paul Haine. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation]
+
# [[Typography on the web]], by [[Paul Haine]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation]
  
 
=== HTML basics ===
 
=== HTML basics ===
  
# [http://www.w3.org/wiki/The_basics_of_HTML The basics of HTML], by Mark Norman Francis. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation]
+
# [[The basics of HTML]], by [[Mark Norman Francis]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation]
# [http://www.w3.org/wiki/The_HTML_head_element The HTML <head> element], by Christian Heilmann. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation]
+
# [[The_HTML_head_element|The HTML <head> element]], by [[Christian Heilmann]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation]
# [http://www.w3.org/wiki/Choosing_the_right_doctype_for_your_HTML_documents Choosing the right doctype for your HTML documents], by Roger Johansson. [http://dev.opera.com/articles/view/14-megfelelo-doctype-valasztasa/ Hungarian translation]
+
# [[Choosing the right doctype for your HTML documents]], by [[Roger Johansson]]. [http://dev.opera.com/articles/view/14-megfelelo-doctype-valasztasa/ Hungarian translation]
  
 
=== The HTML body ===
 
=== The HTML body ===
  
# [http://www.w3.org/wiki/Marking_up_textual_content_in_HTML Marking up textual content in HTML], by Mark Norman Francis. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation]
+
# [[Marking up textual content in HTML]], by [[Mark Norman Francis]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation]
# [http://www.w3.org/wiki/HTML_lists HTML Lists], by Ben Buchanan. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation]
+
# [[HTML Lists]], by [[Ben Buchanan]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation]
# [http://www.w3.org/wiki/Images_in_HTML Images in HTML], by Christian Heilmann. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation]
+
# [[Images in HTML]], by [[Christian Heilmann]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation]
# [http://www.w3.org/wiki/HTML_links_-_lets_build_a_web HTML links — let's build a web!] by Christian Heilmann. [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation]
+
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] by [[Christian Heilmann]]. [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation]
# [http://www.w3.org/wiki/HTML_tables HTML Tables], by Jen Hanen. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation]
+
# [[HTML Tables]], by [[Jen Hanen]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation]
# [http://www.w3.org/wiki/HTML_forms_-_the_basics HTML Forms — the basics], by Jen Hanen. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation]
+
# [[HTML Forms — the basics]], by [[Jen Hanen]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation]
# [http://www.w3.org/wiki/Lesser_-_known_semantic_elements Lesser-known semantic elements], by Mark Norman Francis. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation]
+
# [[Lesser-known semantic elements]], by [[Mark Norman Francis]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation]
# [http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements Generic containers — the div and span elements], by Mark Norman Francis. [http://dev.opera.com/articles/view/22-altalanos-tarolok/ Hungarian translation]
+
# [[Generic containers — the div and span elements]], by [[Mark Norman Francis]]. [http://dev.opera.com/articles/view/22-altalanos-tarolok/ Hungarian translation]
# [http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus Creating multiple pages with navigation menus], by Christian Heilmann.
+
# [[Creating multiple pages with navigation menus]], by [[Christian Heilmann]].
# [http://www.w3.org/wiki/Validating_your_HTML Validating your HTML], by Mark Norman Francis.
+
# [[Validating your HTML]], by [[Mark Norman Francis]].
  
 
=== Accessibility ===
 
=== Accessibility ===
  
# [http://www.w3.org/wiki/Accessibility_basics Accessibility basics], by Tom Hughes-Croucher.
+
# [[Accessibility basics]], by [[Tom Hughes-Croucher]].
# [http://www.w3.org/wiki/Accessibility_testing Accessibility testing], by Benjamin Hawkes-Lewis.
+
# [[Accessibility testing]], by [[Benjamin Hawkes-Lewis]].
  
 
=== CSS ===
 
=== CSS ===
  
# [http://dev.opera.com/articles/view/27-css-basics/ CSS basics], by Christian Heilmann.
+
# [[CSS basics]], by [[Christian Heilmann]].
# [http://www.w3.org/wiki/Inheritance_and_cascade Inheritance and Cascade], by Tommy Olsson.
+
# [[Inheritance and Cascade]], by [[Tommy Olsson]].
# [http://www.w3.org/wiki/Text_styling_with_CSS Text styling with CSS], by Ben Henick.
+
# [[Text styling with CSS]], by [[Ben Henick]].
# [http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding The CSS layout model - boxes, borders, margins, padding], by Ben Henick.
+
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]], by [[Ben Henick]].
# [http://www.w3.org/wiki/CSS_background_images CSS background images], by Nicole Sullivan.
+
# [[CSS background images]], by [[Nicole Sullivan]].
# [http://www.w3.org/wiki/Styling_lists_and_links Styling lists and links], by Ben Buchanan.
+
# [Styling lists and links]], by [[Ben Buchanan]].
# [http://www.w3.org/wiki/Styling_tables Styling tables], by Ben Buchanan.
+
# [[Styling tables]], by [[Ben Buchanan]].
# [http://www.w3.org/wiki/Styling_forms Styling forms], by Ben Henick.
+
# [[Styling forms]], by [[Ben Henick]].
# [http://www.w3.org/wiki/Floats_and_clearing Floats and clearing], by Tommy Olsson.
+
# [[Floats and clearing]], by [[Tommy Olsson]].
# [http://www.w3.org/wiki/CSS_static_and_relative_positioning CSS static and relative positioning], by Tommy Olsson.
+
# [[CSS static and relative positioning]], by [[Tommy Olsson]].
# [http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning CSS absolute and fixed positioning], by Tommy Olsson.
+
# [[CSS absolute and fixed positioning]], by [[Tommy Olsson]].
  
 
=== Advanced CSS study ===
 
=== Advanced CSS study ===
  
# [http://www.w3.org/wiki/Headers_footers_columns_and_templates Headers, footers, columns, and templates], by Ben Henick
+
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]], by [[Ben Henick]]
  
 
=== JavaScript core skills ===
 
=== JavaScript core skills ===
  
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann
+
# [[Programming_-_the_real_basics|Programming - the real basics!]], by [[Christian Heilmann]]
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann
+
# [[What can you do with JavaScript]]?, by [[Christian Heilmann]]
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann
+
# [[Your first look at JavaScript]], by [[Christian Heilmann]]
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann
+
# [[JavaScript best practices]], by [[Christian Heilmann]]
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK
+
# [[The principles of unobtrusive JavaScript]], by [[PPK]]
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West
+
# [[JavaScript functions]], by [[Mike West]]
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West
+
# [[Objects in JavaScript]], by [[Mike West]]
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West
+
# [[Traversing the DOM]], by [[Mike West]]
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge
+
# [[Creating and modifying HTML]], by [[Stuart Langridge]]
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter
+
# [[Dynamic style - manipulating CSS with JavaScript]], by [[Greg Schechter]]
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman
+
# [[Handling events with JavaScript]], by [[Robert Nyman]]
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge
+
# [[JavaScript animation]], by [[Stuart Langridge]]
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement Graceful degredation versus progressive enhancement], by Christian Heilmann
+
# [[Graceful degredation versus progressive enhancement]], by [[Christian Heilmann]]
  
 
=== Mobile web development ===
 
=== Mobile web development ===
  
# [http://www.w3.org/wiki/Introduction_to_mobile_web Mobile 1: Introduction to mobile web], by Brian Suda
+
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]], by [[Brian Suda]]
  
 
=== Supplementary articles ===
 
=== Supplementary articles ===
  
* [http://www.w3.org/wiki/Getting_your_content_online Getting your content online], by Craig Grannell.
+
* [[Getting your content online]], by [[Craig Grannell]].
* [http://www.w3.org/wiki/More_about_the_document_head More about the document <head>], by Chris Heilmann.
+
* [[More_about_the_document_head|More about the document <head>]], by [[Chris Heilmann]].
* [http://www.w3.org/wiki/Common_HTML_entities_used_for_typography Common HTML entities used for typography], by Ben Henick.
+
* [[Common HTML entities used for typography]], by [[Ben Henick]].
 
* [http://www.w3.org/wiki/The_web_standards_curriculum_glossary The Opera Web Standards Curriculum glossary], by various authors. This is incomplete, and will be added to as time goes by.
 
* [http://www.w3.org/wiki/The_web_standards_curriculum_glossary The Opera Web Standards Curriculum glossary], by various authors. This is incomplete, and will be added to as time goes by.
  
=== PROPOSED UPDATES AND ADDITIONS TO WEB STANDARDS CURRICULUM ===
+
=== Proposed Updates and Additions to Web Standards Curriculum ===
  
* [http://www.w3.org/wiki/WSC_proposed_updates Web standards curriculum on W3C Wiki: plan for updates 2011]
+
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]
  
  
 
[[Category:Tutorials]]
 
[[Category:Tutorials]]

Revision as of 22:17, 13 July 2011

Web Standards Curriculum table of contents

Introduction

What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.

Note: This material was originally published as part of the Opera Web Standards Curriculum, available as Introductory material, written by Chris Mills. Like the original, it is published under the Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

Note #2: Many of the links below currently point to the dev.opera versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.

Table of contents

The beginning

Introduction to the Web Standards Curriculum by Chris Mills. Hebrew translation | Hungarian translation | Italian translation | Japanese translation

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.

Accessibility

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

CSS

  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

Mobile web development

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

Supplementary articles

Proposed Updates and Additions to Web Standards Curriculum