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
• Demo 1e

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
• Demo 3g

4. Exercise 4 : Linking

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

5. Exercise 5 : Adding Some Design

• Demo 5a
• Demo 5b
• Demo 5c
• Demo 5d

Project One: Simple Website

• Use Demos 1 - 4

6. Exercise 6 : Forms

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

7. Exercise 7 : Tables and IFrames

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

8. Exercise 8 : Simple Page Layout & Simple Navigation

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

9. Exercise 9 : Page Layout- Fixed to Flexible. Nav with lists

• Demo 9a About Divs
• Demo 9b Natural Flow
• Demo 9c Fixed Page
• Demo 9d Flexible Page
• Demo 9e Max-Width Page
• Demo 9f Navigation Bar
• Demo 9e Centered Navigation
• Demo 9f Sidebar Navigation

ExCr. Extra Credit Exercise : JavaScript

• Demos for Extra Credit
• Popup Window
• Rollover Buttons
• DropDown Menu
• New Slideshow
• Responsive Slideshow

MORE JavaScript

• Lightbox14- Javascript
• Vertical Slider- Javascript/JQuery
• Vertical Slider Version 2
• Go Back Javascript Link

10. Exercise 10 : Working Towards Simple Responsive Design

• Demo 10A: Natural Flow
• Demo 10B Flexible Page Layout
• Demo 10C Maximum Width Page Layout
• Demo 10DSimple Responsive Page Layout

Some HTML5 & CSS3 Special Effects

• Some Extra CSS Demos
• HTML5 - CSS3 page layout
• Rounded Corners and Transparent Backgrounds
• DropDown Menu Using Shadows DropDown Menu Using Shadows
• Using Text Columns 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

Box Model Demos: Padding, Margin, Borders & Simple Navigation

• Box Model A
• Box Model B
• Box Model C
• Box Model D
• Box Model E
• Box Model F

Extra Demos

• IDs & Classes
• More Navigation Samples
• Replace H1 tag with an image
• Center a Page in Internet Explorer 8.
• Absolute Positions
• Scrolling Divs
• Simple Responsive Design Demo