Example web pages — HTML & CSS

1. A basic starting structure for a web page.
2. Underground Airways Example
   • Text and html tags no style elements
   • Embedded styles
   • External styles
3. Picture gallery example
4. Cascade example
5. Multi-column page layouts
   1. Two column page layout with the page header in the right column
   2. Two column page layout with the page header across the top of both columns
   3. A web page that displays a page with sections containing from 1 to 4 columns
   4. The BlueRobot Layout Resevoir
           Examples for 2- and 3-column layouts. Examples show interesting style sheets.
6. Drop down sub-menu creation
   1. Creating one-level sub-menu with CSS simplistic styles here.
   2. Creating multi-level sub-menus with CSS here.
   3. The Line25 tutorial for the previous example is here
   4. Creating one-level sub-menu with JavaScript is here.
7. An example form that posts to a script that displays all posted information in a table.
8. Examples of advanced work done with CSS is here.

JavaScript examples

1. Calculator web pages
   1. A simple calculator to do two number arithmetic
   2. A calculator found on the internet
2. Spaceling CSS & JavaScript example
   1. spaceling_text.html — text only; not easy to read
   2. spaceling_html.html — Structural layer: text with added HTML tags; can read the page but it does not look presentable
   3. spaceling.html — the complete page; CSS makes the page look good
   4. spaceling.css — the stye sheet
   5. spaceling.js — the JavaScript that makes the page dynamic
3. Example creating object literals is here.
4. Choice statements
   1. Using if statements here.
   2. Using switch statements here.
   3. Planning a night out here.
5. Loop statements — Recommended
   1. Using while statements here.
   2. Using do-while statements here.
   3. Planning a night out here.
   4. Multiplication table here.
   5. String comparison here.
6. Loop statements — Not recommended, avoid using.
   1. Using for statements version 1, incorrect algorithm, and correct but bad design algorithm here.
   2. Using for statements version 2,correct but bad design algorithm, and properly designed algorithm here.
   3. Using for-in statements here.
7. Handling errors try, catch and throw here.
8. String comparison here.
9. Regular expressions here.
10. Check a phone number with a regular expression here.
11. Using the canvas element
    • Draw a line on a canvas here..
    • Rectangle moves across the canvas here.
    • An analog clock here.
12. Using JavaScript's prototypal inheritance
13. Examples using the Document Object Model
    • An example web page showing a list of the upper level nodes in its HTML element structure.
    • Get display stats: by clicking a button, the computer screen height, width and colour depth is displayed as a new paragraph at the end of the existing content
    • Adding and removing items from a todo list
    • Examples showing how mouse events invoke JavaScript functions tha change HTML elements
      • Example 1 Uses JavaScript to create every element to be displayed
      • Example 2 Uses JavaScript to create a DIV element and changes the innerHTML with a single string.
      • Example 3 Uses jQuery to create the HTML elements to be displayed
      • Event handler assigns a mouse event to an HTML element.
    • Creating and writing to a new window
    • Access properties for CSS stylesheets example
    • Working with style sheets
    • Reading files has a browse button where you can select a file to display. A text file is displayed in red, showing how styles can be changed. An image file is displayed in a newly created img element. All other files replace the file-text display area with an error message.

jQuery examples

1. Drop down menu with jQuery control is here. Example from Chapter 7 of JavaScript & jQuery: the Missing Manual
2. Drop down menu with jQuery control is here. A variation of the previous example with different styling that moves to different page locations depending upon the menu choice
3. Slide-in dashboard is here.
4. Image fadein/fadeout transition here.
5. Multilevel push menu is here. Click in menu items just creates a log in the main panel
6. Working Multilevel push menu is here. A variation of the previous menu, where the menu items now change the content of the main panel in are demonstrated similar mouse events to the examples given previously, the basic claculator demonstrated earlier, and a canvas drawings of lines or circles can be done.