MAT 125: Exercise Video Lectures

Exercise 1: Basic HTML & Text Styles Videos

• Using Basic HTML Tags to Create Your HTML Skeleton or Framework
• Using H tags to Make Headlines from H1 to H6
• Using Attributes and Values
• Using the P tag for Paragraphs
• Using the DIV - a group tag
• Using HTML Style Tags - Em & Strong
• Using Empty Elements - the BR tag and the Comment Tag
• Creating Horizontal Rules using the HR tag

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
• Ex5.8 - Making your Artist Statement Pagep

Exercise 6: Tables & IFrames, Inserting a Form

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

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 (7.20.21)

• Ex8.1 - Overall Example Review & Natural Flow Page
• Ex8.2 - Adding the main CSS styles on the Fixed Page
• Ex8.3 - Making the page Flexible
• Ex8.4 - Adding the max-width
• Ex8.5 - Navigation using Unordered Lists
• Ex8.6 - Making Navigation in the Aside area
• Ex8.7 - Adding the Artist Statement Page

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

• Adding Responsive Slideshow
• The HTML Page with Slideshow