MAT 125: Web Design 1: Fundamentals : DEMOS

All Demos in Order of Complexity

1. Exercise 1 : Basic HTML & Text Styles

• Demo 1a
• Demo 1b
• Demo 1c
• Demo 1d

2. Exercise 2 : Lists & CSS Styles

• Demo 2a
• Demo 2b
• Demo 2c
• Demo 2d
• Demo 2e

3. Exercise 3 : Images & Graphics

• Demo 3a
• Demo 3b
• Demo 3c
• Demo 3d
• Demo 3e
• Demo 3f

4. Exercise 4 : Linking

• Demo 4a
• Demo 4b
• Demo 4c
• Demo 4d
• Demo 4e

Project One: Simple Website

• Use Demos 1 - 4

5. Exercise 5 : Forms

• Demo 5a
• Demo 5b
• Demo 5c
• Demo 5d
• A Simple Form

6. Exercise 6 : Tables and IFrames

• Demo 6a
• Demo 6b
• Demo 6c
• Demo 6d
• Demo 6e - IFrames

7. Exercise 7 : Box Model & Simple Navigation

• Demo 7a: Box Model
• Demo 7b
• Demo 7c
• Demo 7d
• Demo 7e

8. Exercise 8 : Page Layout CSS DIVS

• Demo 8a
• Demo 8b
• Demo 8c
• Demo 8d
• Demo 8e Navigation List
• Demo 8f Navigation Bar
• Demo 8g Centered Navigation

Project Two : Business Website

• Use All Demos, But Focus 5-8

9. Exercise 9 : JavaScript

• Demo 9
• Popup Window
• Rollover Buttons
• DropDown Menu
• Slideshow
• Slideshow with Captions

MORE JavaScript

• Lightbox2.5- Javascript
• Vertical Slider- Javascript/JQuery
• Go Back Javascript Link

10. Exercise 10 : HTML5 & CSS3

• Demo 10
• Demo 10b HTML5 - CSS3 page layout
• Demo 10c Rounded Corners and Transparent Backgrounds
• Demo 10d DropDown Menu Using Shadows
• Demo 10e Using Text Columns

Project Three: Final Website

• Use All Demos

More Navigation + Drop Down Menus

• SImple CSS Navigation
• Centered Navigation
• Horizontal Drop Down
• Vertical DropDown
• Drop Down with More CSS3 Style

Extra Demos

• IDs & Classes
• More Navigation Samples
• Replace H1 tag with an image
• Center a Page in Internet Explorer 8.
• Absolute Positions