MAT 125: Web Design 1: Fundamentals : VIDEOS

All Videos in Order of Complexity

1. Exercise 1 : Basic HTML & Text Styles

• Basic HTML Tags
• Block Elements
• Using a Div and Some Inline Styles
• Comments, Break Tag & Horizontal Rules

Uploading Your Homework

• Uploading Homework using WinSCP
• Uploading Homework using FIleZilla for Mac or PC

2. Exercise 2 : Lists & CSS Styles

• Unordered Lists
• Ordered Lists
• Ordered & Document Lists
• CSS Document Styles
• More CSS Document & Inline styles

3. Exercise 3 : Images & Graphics

• Images 1 - Adding Images to an HTML Page
• Images 2 - Styling Image Positions with HTML
• Images 3 - Styling Image Positions with CSS
• Images 4 - Overall Background Tiling
• Images 5 - Horizontal Background Tiling
• Images 6 - Vertical Background Tiling
• Images 7 - Single Background Image

4. Exercise 4 : Linking

• Links Video One: Relative Links
• Links Video Two: Absolute Links
• Links Video Three: Email and Image Links
• Links Video Four - Jump Links Part One
• Links Video Four - Jump Links Part Two - Back to Top & Jump to Another Page
• Link to Jump Link HTML Pages

CSS External Style Sheets

• Adding CSS External Styles One
• Adding more External Styles Two
• You can Also Add Document & Inline Styles too

5. Exercise 5: Using a Wrapper Div for Containment

• Using a Div to Contain Content

6. Exercise 6 : Forms

• Form Video 1
• Form Video 2
• Form Video 3
• Form Video 4

7. Exercise 7 : Tables & IFrames

• Tables Video One
• Tables Video Two
• Tables Video Three: Cellspacing, Cellpadding, Alignment
• Tables Video Four: Colors and Images
• Tables Video Five: Colspan and Rowspan
• Tables Video Six: Adding CSS to Tables
• Tables Video Seven: More CSS & Tables
• Tables Video Eight: Using an IFrame

8A. Exercise 8A: Demo 8A on Page Layout

• Part 1 & 2: The Basic Explanation & Using the Header - Video One
• Part 3: Styling the NAV - Video Two
• Part 4: Styling the ASIDE & Secondary Navigation - Video Three
• Part 5: Styling the MAIN & FOOTER - Video Four

Exercise 8B Page Layout continued

• Using Brackets / Natural Flow Video One
• The Fixed Page - Video 2
• Fixed Styles Continued - Video 3
• More Styles for Fixed Page - Video 4
• Flexible Page- Video 5
• Max & Min Width Page - Video 6
• Working on Navigation - Video 7
• Sidebar Navigation - Video 8
• Sidebar Navigation Part 2 - Video 9
• The HTML Files for this set of Videos (slightly modified text)

9. Exercise 9 : Javascripts

• Rollover Buttons - Video One
• Rollover Buttons - Video Two

10. NEW Exercise 10 2018 : Getting Responsive

• Video One: Natural Flow
• Video Two: Adding CSS for a Fluid or Flexible Page
• Video Three: More CSS for the Flexible Page
• Video Four: Still More CSS for the Flexible Page
• Video Five: Even More CSS for the Flexible Page
• Video Six: Wrapping up the Flexible Page
• Video Seven: Wrapping up the Flexible Page - Start Responsive
• Video Eight: Responsive Styles for Tablet Sizes
• Video Nice: Responsive Styles for a Smaller Width Plus Ease
• Start of Ex10 Responsive Example

EXTRA Videos

Box Model: Working with Padding, Margin & Borders

• Simple Version Part One - Video One
• Page 1 continued - Video 2
• Page 2 Default Styles - Video 3
• Page 3 Removing the Default Styles- Video 4
• Page 4 Adding CSS Styles- Video 5
• Page 5 Adding Some Simple Navigation with CSS - Video 6
• Page 5 Finishing the Simple Navigation - Video 7

Updated 6.11.18