Skip to Navigation | Skip to Content

MAT 125 - Web Design 1: Fundamentals

VIDEO TUTORIALS

Index of Video Tutorials

The Technologies Empowering the Web

  1. The Three Layers of Web Design: HTML, CSS, and JavaScript (7:39)

HTML Basics, HTML Tags, and the HTML Skeleton

  1. Web Basics (17:01)
  2. HTML - Introduction, Tags, Atrributes, and Elements (16:53)
  3. Anatomy of a Web page - HTML Skeleton (18:12)

Block Elements, Inline Elements, and Character References

  1. Exercise #1 - Exercise Overview and Webpage Basics (22:48)
  2. Exercise #1 - Block Elements (16:12)
  3. Exercise #1 - Inline Elements (18:21)
  4. Exercise #1 - Character References (11:16)

HTML Editor Options

  1. HTML Editors - Notepad, Dreamweaver, Komodo Edit (30:27)

CSS Basics

  1. Exercise #2 - Overview and Sample (15:58)
  2. CSS Basics - Introduction, Selectors, Properties, Values (12:21)

CSS Rules - Inline, Embedded, and External

  1. CSS Rules - Inline and Embedded Styles - Part 1 (21:03)
  2. CSS Rules - External Stylesheets - Part 2 (11:20)

CSS Selectors

  1. CSS Selectors - Element (12:46)
  2. CSS Selectors - Class (14:28)
  3. CSS Selectors - ID (16:40)
  4. CSS Selectors - Grouped, Compound, Contextual (18:51)

CSS for Typography and Color

  1. CSS for Typography (26:10)
  2. CSS, Font Families, and Web Fonts (23:51)
  3. CSS and Color (26:20)

HTML and CSS for Images

  1. HTML and Images (18:01)
  2. CSS and Images (18:50)
  3. Acquiring, Sizing, and Optimizing Images (18:29)

CSS for Layout and Centering of Exercise #2

  1. Exercise 2 - Layout and Centering (14:49)

Optimizing Imagery Using Photoshop

  1. Introduction to image optimization (3:17)
  2. Understanding image size and resolution (7:03)
  3. Cropping and straightening images (4:40)
  4. Optimizing images through image simplification (8:58)
  5. Save For Web and Devices and understanding the JPEG file format (23:01)
  6. Understanding the GIF file format (17:15)
  7. Understanding the PNG file format (10:28)

CSS Box Model

  1. The CSS Box Model - Block and Inline Boxes (13:52)
  2. The CSS Box Model - Margins and Padding (14:09)
  3. The CSS Box Model - Borders and Border Radius (21:49)
  4. The CSS Box Model - Sizing and Overflow (21:00)

Working with Background Images

  1. Background Images - Basics (9:07)
  2. Background Images - Repeat (9:59)
  3. Background Images - Position (7:51)
  4. Background Images - Size (8:53)
  5. Background Images - Attachment and Clip (8:00)
  6. Background Images - On HTML Elements (11:40)
  7. Background Images - Image Replacement Techniques (9:16)

Working with Links

  1. Exercise #4 Example and Overview (10:07)
  2. Working with Links - Anchor, Href, and Target (11:41)
  3. Working with Links - Absolute and Relative URLs (16:47)
  4. Working with Links - Fragments (11:05)
  5. Working with Links - Email and Telephone (8:36)
  6. Working with Links - Styling with Pseudo Classes (21:34)

Navigational Buttons and Menus

  1. Working with Links - Navigation Menu Button (16:24)
  2. Working with Links - Creating a Nav Menu with HTML Lists and CSS (26:43)
  3. Working with Links - Rollover Menus Using Image Replacement (14:51)

Page Layout - Document Flow, Basic Layouts, and Centering

  1. Page Layout - Understanding Document Flow and Margin Collapse (15:20)
  2. Page Layout - A Basic Layout and Centering (24:42)

Page Layout - Positioning (Static, Relative, Absolute, Fixed)

  1. Page Layout - Positioning - Static and Relative (13:40)
  2. Page Layout - Positioning - Absolute and Fixed (28:38)
  3. Page Layout - A Layout with Absolute Positioning - Part 1 (18:48)
  4. Page Layout - A Layout with Absolute Positioning - Part 2 (21:06)

Page Layout - Floats and Float-Based Layouts

  1. Page Layout - Float and Clear (16:40)
  2. Page Layout - Columns with Floats (21:44)
  3. Page Layout - A Multicolumn Layout with Floats (31:22)
  4. Page Layout - Converting the AP Div Layout to a Float-based Layout (14:18)

Exercise #4 - Interactive Mood Board Tutorials

  1. Interactive Mood Board - Part 1: The HTML (8:54)
  2. Interactive Mood Board - Part 2: The CSS (24:13)
  3. Interactive Mood Board - Part 3: The Content (41:56)

Project #1 - Animated Scrolling, Hamburger Menu, FullScreen Nav Overlay

  1. 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

  1. Project #1 - Introduction, Overview, and Sample (19:05)
  2. Project #1 - Step #1 - Theme and Color (6:04)
  3. Project #1 - Step #2 - Content, Structure, and HTML5 Markup (14:40)
  4. Project #1 - Step #3 - Head Content, CSS Resets, and External Styles (11:08)
  5. Project #1 - Step #4 - Containers and Centering (8:44)
  6. Project #1 - Step #5 - Page Layout (14:34)
  7. Project #1 - Step #6 - Header Styling and Image Replacement (16:30)
  8. Project #1 - Step #7 - Navigation Menu (19:49)
  9. Project #1 - Step #8 - Content Styling and Backgrounds (12:46)
  10. Project #1 - Step #9 - Content Styling and Typography (27:09)
  11. Project #1 - Step #10 - Footer Styling, A Template for New Pages (15:27)

Responsive Design and Mobile Optimization

  1. Introduction to Responsive Design (17:23)
  2. Media Queries - Part 1 - Introduction and Syntax (18:57)
  3. Media Queries - Part 2 - Layout, Box-Sizing, Within DW (17:50)
  4. Understanding Viewports, Screen Sizes, and Pixel Densities (20:39)
  5. Fluid Layouts - Part 1 - Overview, Moving from Fixed to Fluid Designs (11:08)
  6. Fluid Layouts - Part 2 - Coding Fluid Layouts (31:47)
  7. Flexible Images and Backgrounds (31:48)

Using RWD to Create a Responsive Website Header (Exercise #5)

  1. Creating a Responsive Website Header – Part 1 – Overview and HTML (10:32)
  2. Creating a Responsive Website Header – Part 2 – Core CSS (30:42)
  3. Creating a Responsive Website Header – Part 3 – Applying Media Queries (32:54)

Responsive Navigation - Creating a Hamburger Menu

  1. Responsive Nav - Part 1: Introduction, HTML, and CSS (14:18)
  2. Responsive Nav - Part 2: Toggling the Menu with jQuery (20:21)
  3. Responsive Nav - Part 3: Adding Animation and the Hamburger Icon (18:19)

An Overview of jQuery for Animation and Interactivity

  1. What is jQuery (4:54)
  2. Getting and setting CSS attributes with jQuery (8:58)
  3. jQuery and interactive events (6:53)
  4. jQuery and animation (13:09)
  5. Scripting A jQuery Slideshow - Part 1 (19:07)
  6. Scripting A jQuery Slideshow - Adding Interactivity - Part 2 (13:37)

 

> Go to Top