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

EXTRA DEMO: Using a DIV to Contain Content

• Loose Content Page
• Contained Content Page

Extra Demo: Using Google Fonts

• EXTRA: Adding Google Fonts

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 : Padding, Margin, Borders & Simple Navigation

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

8. Exercise 8 : Page Layout CSS DIVS

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

9. Exercise 9 : JavaScript

• Demo 9
• 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 10: Natural Flow
• Demo 10b Fixed Page Layout
• Demo 10c Flexible Page Layout
• Demo 10d Maximum Width Page Layout
• Demo 10e Simple Responsive Page Layout
• Simple Hamburger Navigation - Coming Soon

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

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