Index of Video Tutorials
The Technologies Empowering the Web
HTML Basics, HTML Tags, and the HTML Skeleton
- Web Basics (17:01)
- HTML - Introduction, Tags, Atrributes, and Elements (16:53)
- Anatomy of a Web page - HTML Skeleton (18:12)
Block Elements, Inline Elements, and Character References
- Exercise #1 - Exercise Overview and Webpage Basics (22:48)
- Exercise #1 - Block Elements (16:12)
- Exercise #1 - Inline Elements (18:21)
- Exercise #1 - Character References (11:16)
HTML Editor Options
CSS Basics
- Exercise #2 - Overview and Sample (15:58)
- CSS Basics - Introduction, Selectors, Properties, Values (12:21)
CSS Rules - Inline, Embedded, and External
- CSS Rules - Inline and Embedded Styles - Part 1 (21:03)
- CSS Rules - External Stylesheets - Part 2 (11:20)
CSS Selectors
- CSS Selectors - Element (12:46)
- CSS Selectors - Class (14:28)
- CSS Selectors - ID (16:40)
- CSS Selectors - Grouped, Compound, Contextual (18:51)
CSS for Typography and Color
- CSS for Typography (26:10)
- CSS, Font Families, and Web Fonts (23:51)
- CSS and Color (26:20)
HTML and CSS for Images
- HTML and Images (18:01)
- CSS and Images (18:50)
- Acquiring, Sizing, and Optimizing Images (18:29)
CSS for Layout and Centering of Exercise #2
Optimizing Imagery Using Photoshop
- Introduction to image optimization (3:17)
- Understanding image size and resolution (7:03)
- Cropping and straightening images (4:40)
- Optimizing images through image simplification (8:58)
- Save For Web and Devices and understanding the JPEG file format (23:01)
- Understanding the GIF file format (17:15)
- Understanding the PNG file format (10:28)
CSS Box Model
- The CSS Box Model - Block and Inline Boxes (13:52)
- The CSS Box Model - Margins and Padding (14:09)
- The CSS Box Model - Borders and Border Radius (21:49)
- The CSS Box Model - Sizing and Overflow (21:00)
Working with Background Images
- Background Images - Basics (9:07)
- Background Images - Repeat (9:59)
- Background Images - Position (7:51)
- Background Images - Size (8:53)
- Background Images - Attachment and Clip (8:00)
- Background Images - On HTML Elements (11:40)
- Background Images - Image Replacement Techniques (9:16)
Working with Links
- Exercise #4 Example and Overview (10:07)
- Working with Links - Anchor, Href, and Target (11:41)
- Working with Links - Absolute and Relative URLs (16:47)
- Working with Links - Fragments (11:05)
- Working with Links - Email and Telephone (8:36)
- Working with Links - Styling with Pseudo Classes (21:34)
Navigational Buttons and Menus
- Working with Links - Navigation Menu Button (16:24)
- Working with Links - Creating a Nav Menu with HTML Lists and CSS (26:43)
- Working with Links - Rollover Menus Using Image Replacement (14:51)
Page Layout - Document Flow, Basic Layouts, and Centering
- Page Layout - Understanding Document Flow and Margin Collapse (15:20)
- Page Layout - A Basic Layout and Centering (24:42)
Page Layout - Positioning (Static, Relative, Absolute, Fixed)
- Page Layout - Positioning - Static and Relative (13:40)
- Page Layout - Positioning - Absolute and Fixed (28:38)
- Page Layout - A Layout with Absolute Positioning - Part 1 (18:48)
- Page Layout - A Layout with Absolute Positioning - Part 2 (21:06)
Page Layout - Floats and Float-Based Layouts
- Page Layout - Float and Clear (16:40)
- Page Layout - Columns with Floats (21:44)
- Page Layout - A Multicolumn Layout with Floats (31:22)
- Page Layout - Converting the AP Div Layout to a Float-based Layout (14:18)
Exercise #4 - Interactive Mood Board Tutorials
- Interactive Mood Board - Part 1: The HTML (8:54)
- Interactive Mood Board - Part 2: The CSS (24:13)
- Interactive Mood Board - Part 3: The Content (41:56)
Project #1 - Animated Scrolling, Hamburger Menu, FullScreen Nav Overlay
- Scrolling, Creating a Hamburger Menu Button, + More (39:29)
This video reviews working with JavaScript and jQuery to animate the scrolling of the page and also create a Hamburger Menu Button that Adds or Removes a Full Screen Navigation Menu
Project #2 Workflow and Step-by-Step Tutorials
- Project #1 - Introduction, Overview, and Sample (19:05)
- Project #1 - Step #1 - Theme and Color (6:04)
- Project #1 - Step #2 - Content, Structure, and HTML5 Markup (14:40)
- Project #1 - Step #3 - Head Content, CSS Resets, and External Styles (11:08)
- Project #1 - Step #4 - Containers and Centering (8:44)
- Project #1 - Step #5 - Page Layout (14:34)
- Project #1 - Step #6 - Header Styling and Image Replacement (16:30)
- Project #1 - Step #7 - Navigation Menu (19:49)
- Project #1 - Step #8 - Content Styling and Backgrounds (12:46)
- Project #1 - Step #9 - Content Styling and Typography (27:09)
- Project #1 - Step #10 - Footer Styling, A Template for New Pages (15:27)
Responsive Design and Mobile Optimization
- Introduction to Responsive Design (17:23)
- Media Queries - Part 1 - Introduction and Syntax (18:57)
- Media Queries - Part 2 - Layout, Box-Sizing, Within DW (17:50)
- Understanding Viewports, Screen Sizes, and Pixel Densities (20:39)
- Fluid Layouts - Part 1 - Overview, Moving from Fixed to Fluid Designs (11:08)
- Fluid Layouts - Part 2 - Coding Fluid Layouts (31:47)
- Flexible Images and Backgrounds (31:48)
Using RWD to Create a Responsive Website Header (Exercise #5)
- Creating a Responsive Website Header – Part 1 – Overview and HTML (10:32)
- Creating a Responsive Website Header – Part 2 – Core CSS (30:42)
- Creating a Responsive Website Header – Part 3 – Applying Media Queries (32:54)
Responsive Navigation - Creating a Hamburger Menu
- Responsive Nav - Part 1: Introduction, HTML, and CSS (14:18)
- Responsive Nav - Part 2: Toggling the Menu with jQuery (20:21)
- Responsive Nav - Part 3: Adding Animation and the Hamburger Icon (18:19)
An Overview of jQuery for Animation and Interactivity
- What is jQuery (4:54)
- Getting and setting CSS attributes with jQuery (8:58)
- jQuery and interactive events (6:53)
- jQuery and animation (13:09)
- Scripting A jQuery Slideshow - Part 1 (19:07)
- Scripting A jQuery Slideshow - Adding Interactivity - Part 2 (13:37)