MAT 125: Exercise Video Lectures

All Videos in Order of Complexity

Exercise 1: Basic HTML & Text Styles Videos

Exercise 2: Using Three Types of Lists & Adding Simple CSS Document and Inline Styles

  • Ex2.V1 - Reviewing the HTML Skeleton
  • Ex2 V2 - Using the UL - Unordered List
  • Ex2 V3 - Unordered Lists with the Type Attribute
  • Ex2 V4 - Using OL - Ordered Lists
  • Ex2 V5 - Ordered Lists with Attributes + nest Unordered List
  • Ex2 V5B - Nested Ordered List
  • Ex2 V6 - The DL or Definition List
  • Ex2 V7 - Copying a Page, Starting CSS Document Styles
  • Ex2 V8 - Using Some Simple CSS Document Styles
  • Ex2 V9 - More CSS Doc Styles & Inline Styles
  • Ex2 V10 - More CSS Inline Styles
  • Ex2 V11 - Page 3 & 4 Adding CSS Styles
  • Ex2 V12 - Making Simple Page Links

Exercise 3: Adding Images on your HTML Page and CSS Background Image Use

  • Ex3.1 - Adding an Image in HTML
  • Ex3.2 - Adding images into text
  • Ex3.3 - Using Images with text
  • Ex3.4 - Image Alignment with CSS Float
  • Ex3.5 - Overall Background Tiling
  • Ex3.6 - Horizontal Tiling
  • Ex3.7 - Vertical Tiling
  • Ex3.8 - Using a Single Background Image
  • Ex3.9 - Responsive Image Use

Exercise 4: Linking Things Together

  • Ex4.1 - Creating Relative Links
  • Ex4.2 - Adding a little CSS style to my Ex4 Index Page
  • Ex4.3 - Using Absolute Links
  • Ex4.4 - Adding an Email Link
  • Ex4.5 - Using Images for Linking Content
  • Ex4.6 - Document or Jump Links
  • Ex4.7 - Linking an External Style Sheet

Exercise 5: Adding Some Design

  • Ex5.1 - Making Index Page using Brackets
  • Ex5.2 - Adding Content to the Index Page
  • Ex5.3 - Some Basic Styling on the Index Page
  • Ex5.4 - Review a bit & Add 2nd Design Page
  • Ex5.5 - Trying Out Google Fonts
  • Ex5.6 - More Google Font Work
  • Ex5.7 - Back to CSS styling, Wrapping It Up

Exercise 6: Tables & IFrames, Inserting a Form

  • Ex7.1 - Making our First Simple HTML table
  • Ex7.2 - More Simple Table Pieces TH & Caption
  • Ex7.3 - Using Cellpadding & cellspacing, Align, VAlign
  • Ex7.4 - Adding Images in a TD Cell or Background
  • Ex7.5 - Rowspan and Colspan
  • Ex7.6 - Tables With CSS Styles
  • Ex7.7 - Making a Table Full of Content
  • Ex7.8 - Using an IFrame

Exercise 7: Simple Page Layout

  • Ex7.1 - Natural Flow Page
  • Ex7.2 - Pg2 - Adding CSS Styles Part 1
  • Ex7.3 - Pg2 CSS Styles Part 2
  • Ex7.4 - Page3 Simple Navigation

Exercise 8: Making Pages Flexible

  • Ex8.1 - Collecting Our Content - Natural Flow Page
  • Ex8.2 - Fixed Page & CSS part 1
  • Ex8.3 - Fixed Page CSS Part 2
  • Ex8.4 - Flexible Page
  • Ex8.5 - Max-Width page
  • Ex8.6 - Navigation using Unordered Lists
  • Ex8.7 - Centered Nav and Sub-Navigation in the Aside

Exercise 9: Making Responsive Pages

  • Ex9.1 - Collecting Our Content - Natural Flow Page and Overview of Exercise
  • Ex9.2 - CSS Styles on Flexible Page Pt1
  • Ex9.3 - CSS style for Flexible Page Pt2
  • Ex9.4 - CSS Styles (design) for Flexible Page Pt3
  • Ex9.5 - CSS Styles for Flexible Page Pt4
  • Ex9.6 - Flexible Page Navigation
  • Ex9.7 - Responsive Page Pt1
  • Ex9.8 - Responsive Page Pt2

Exercise 10: Making CSS Flex-Box Pages

  • Ex10.1 - Collecting Our Content - Natural Flow Page and Overview of Exercise
  • Ex10.2 - Adding some Basic CSS Styles Pt1
  • Ex10.3 - Adding More Basic CSS Styles Pt2
  • Ex10.4 - Adding the Flex-Box Styles for a Flexible Page

Various Other Videos