Skip to Navigation | Skip to Content

MAT 165 - Web Design 2: Tools and Techniques

Menu

VIDEO TUTORIALS

Index of Video Tutorials (ARCHIVE)

The Technologies Empowering the Web

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

Coding in Dreamweaver

  1. Coding in Dreamweaver CC - Features, Emmet, Quick Keys (33:12)

Review of HTML, CSS, and Assignment #1

  1. Introduction to Assignment #1 (8:16)
  2. Content is King, Defining a Site, the HMTL Skeleton, External CSS (9:44)
  3. HTML Markup for Structure, Part 1 (16:04)
  4. HTML Markup for Structure, Part 2 (17:46)
  5. CSS for Presentation (26:16)

Publishing and FTP in Dreamweaver

  1. Site Management and FTP with Dreamweaver CC (16:26)

------

These are older videos (not required, but still useful sometimes)

Review of HTML, CSS, and Exercise 2 (ARCHIVE - NOT REQUIRED)

  1. Web basics, parts of a URL, and HyperText Markup Language (HMTL) (9:35)
  2. Basic HTML tags, the two-part structure, and the HTML skeleton (15:14)
  3. Coding in Notepad (or Text Edit) versus coding in Dreamweaver (14:39)
  4. Adding structure through headers, paragraphs, lists and more (19:32)
  5. HTML attributes and making links (8:45)
  6. Semantic markup, deprecated code, dirty code, and more (20:23)
  7. Adding CSS and understanding CSS selectors, properties, and values (12:03)
  8. Understanding and coding color on the Web (13:44)
  9. Types of CSS selectors (tags, classes, and ids) and CSS specificity (16:12)
  10. Styling links and more (18:56)

Publishing and FTP in Dreamweaver (ARCHIVE - NOT REQUIRED)

  1. Site Management and FTP using Dreamweaver CS5.5 (14:21)
  2. Site Management and FTP with Dreamweaver CC (16:26)

Introduction to the Web Typography Design Challege - Assignment #2 (Required)

  1. Introduction to the Web Typography CSS Design Challenge (5:20)

Crimes in Web Typography (Required)

  1. Case #1 : Contrast (8:25)
  2. Case #2 : Defaults (4:34)
  3. Case #3 : Poor Font Choices (15:11)
  4. Case #4 : A Matter of Measure (11:05)
  5. Case #5 : Visual Weight (9:12)
  6. Case #6 : Hierarchy and Spacing (17:12)
  7. Case #7 : Centering, ALL CAPS, and Special Characters (19:32)
  8. Case #8 : Visual Interest (Drop Caps, Graphic Elements, Text Shadows) (23:49)

Introduction to the HyperPoem Exercise

  1. Introduction to the HyperPoem Exercise and Dreamweaver (4:12)

Introduction to Working with Dreamweaver CC

  1. The Dreamweaver interface and workspace (24:20)
  2. Defining a site, creating pages, and adding content (13:52)

Applying Structure using Dreamweaver CC

  1. Adding structure and markup - headers, paragraphs, line breaks, HTML5 strcutural elements, divs, and more (14:49)
  2. Using special characters (12:58)

Formatting Your Page with CSS and Dreamweaver's Designer Panel

  1. Page properties (11:47)
  2. Creating and editing CSS styles - The CSS Designer Panel (34:42)
  3. CSS Styles in Practice on the HyperPoem Exercise - Including Working with Images, IDs, ViewPort Units, Drop Shadows, and more (37:39)

Web Fonts and Font Families in Dreamweaver CC

  1. Working with Web Fonts and Font Families (41:13)

------

These are older videos (not required, but still useful sometimes)

Introduction to Working with Dreamweaver (CS6) (ARCHIVE - NOT REQUIRED)

Note: These are for version CS6 - See the updates for CC2017 above.

  1. Defining a site, creating pages, and adding content (14:00)
  2. The Dreamweaver interface and workspace (23:32)

Applying Structure (CS6) (ARCHIVE - NOT REQUIRED)

Note: These are for version CS6 - See the updates for CC2017 above.

  1. Creating headers, paragraphs, line breaks, divs, and more (15:48)
  2. Using special characters (10:11)

Formatting Your Page with CSS (CS6) (ARCHIVE - NOT REQUIRED)

Note: These are for version CS6 - See the updates for CC2017 above.

  1. Page properties (18:50)
  2. Creating and editing CSS styles (14:28)
  3. CSS ctyles continued - classes, IDs and editing CSS using the properties inspector (19:19)

CSS and Typography (ARCHIVE - NOT REQUIRED)

  1. CSS properties for controlling typography (13:00)

Creating Links and Understanding Targets (Hyperpoem Exercise) (ARCHIVE - NOT REQUIRED)

  1. Creating links to external web pages and targeting browser windows (15:56)
  2. Relative links and understanding file paths (13:21)
  3. Styling links (12:15)
  4. Named anchors, IDs, and within-the-page links (11:31)

CSS Styles in Dreamweaver CS6 versus Dreamweaver CC (ARCHIVE - NOT REQUIRED)

  1. The CSS Styles Panel in Dreamweaver CS6 (9:30)
  2. The CSS Designer Panel in Dreamweaver CC (15:00)

Changes in Dreamweaver CC relating to Exercise #3 (ARCHIVE - NOT REQUIRED)

  1. Updates to Dreamweaver CC relating to Exercsie #3 (Inserting Content and Special Characters, Named Anchors, Live View, CSS Desinger Panel, etc) (32:37

 

Working with Links (Hyperpoem Exercise) - Updated for Dreamweaver CC

  1. Creating links and targeting browser windows (14:38)
  2. Relative links, understanding file paths, and named anchors, IDs, and within-the-page links (14:55)
  3. Email links, anti-spam JavaScript, and telephone links (13:31)
  4. Styling links, creating buttons, using transitions on hover (13:13)
  5. Scroll to target JavaScript for animating scrolling (10:56)

Optimizing Imagery for the Web Using Photoshop CC

  1. Image optimization - Introduction, image size and resolution (11:13)
  2. Image optimization - Image simplification (6:42)
  3. Image optimization - Compression and file formats (.jpg, .png, .gif, .svg) (25:45)

Working with Images in Dreamweaver

  1. Inserting Images into web pages and understanding ALT tags (9:28)
  2. Editing image attributes and properties (10:04)
  3. Integrating images and text (6:42)
  4. Image attributes and properties - Update for CS6 (4:00)
  5. CSS for images (borders, margins, and floats) (13:01)
  6. Images as buttons/links and image maps (9:42)

Background Imagery and CSS

  1. Working with background imagery (5:58)
  2. Creating and using patterns for tiling backgrounds (6:07)
  3. Working with gradient backgrounds (10:15)
  4. Gradient backgrounds using CSS and Dreamweaver CC (5:11)
  5. Large background images (17:48)
  6. Adding and positioning backgrounds within HTML elements (8:59)

Optimizing Imagery Using Photoshop (ARCHIVE - NOT REQUIRED)

  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)

Introduction to Adobe XD (from Adobe)

  1. Get to know Adobe XD (4:00)
  2. Layout and design your app or website (20:00)
  3. Create and preview interactive prototypes (8:00)
  4. Share prototypes for review (3:00)
  5. Start your designs with UI kits (5:00)

Overview of Exercise #4 and Adobe XD Workflows (from me)

  1. Overview and introduction to the Smart Fridge XD Exercise (12:34)
  2. Working with the interface, artboards, guides and grids (25:26)
  3. Working with shapes, fills, images, and masks (19:59)
  4. Working with paths, groups, symbols, and styles (19:33)
  5. Working with repeat-grid, images, and text (15:50)
  6. Creating and previewing interactive prototypes (7:58)
  7. Sharing prototypes and design specs and exporting artwork (12:20)

Introduction to the Midterm Project

  1. Introduction to midterm project guidelines and processes, including a discussion of possible workflows (style tiles v. comps) (23:06)

Information Architecture and the Midterm Project

  1. Anatomy of a website (7:03)
  2. Understanding information architecture (20:10)

Color Palettes and Resources

  1. Creating a color palette and using Photoshop swatches (23:43)
  2. Color resources and the Kuler Extension for Photoshop (9:30) * Note: Adobe has recently changed the name of Kuler to Adobe Color CC and the Kuler Extension in Photoshop is simply called "Adobe Color Themes"

Designing a Graphical User Interface (GUI) Using Photoshop: From Sketch to Finished Comp

  1. Graphic Development Using Photoshop - iPoint Logo (15:34)
  2. Graphic Development Using Photoshop - Menu Buttons (16:15)
  3. Graphic Development Using Photoshop - Interface, Part 1 (17:23)
  4. Graphic Development Using Photoshop - Interface, Part 2 (21:58)
  5. Graphic Development Using Photoshop - Interface, Part 3 (29:21)

Creating and Inserting Graphics Using Photoshop and Dreamweaver

  1. Creating Rollover Buttons (16:31) *Later in the class, I will demonstrate how to create graphic rollovers with pure CSS instead of JavaScript (as required in the midterm project), including using CSS sprites.
  2. Copying and pasting graphic content into Dreamweaver (6:48)
  3. Photoshop smart objects (17:16)

The CSS Box Model and CSS for Positioning and Layout

  1. CSS for Positioning - Introduction (7:25)
  2. Display Types - Block and Inline Boxes (12:14)
  3. The CSS Box Model (16:33)
  4. Understanding Document Flow - Static, Relative, Absolute, and Fixed Positioning Techniques (21:36)

Exploring Absolute Positioning for Layout

* Note: Working with AP Divs is different in Dreamweaver CC and these changes are detailed in the videos below on Working with AP Divs Dreamweaver CC.

  1. Introduction to working with AP Divs in Dreamweaver (10:15)*
  2. Layout with AP Divs (10:10)*
  3. Overflow and Visibility (12:24)
  4. Centering a Layout Horizontally (8:12)
  5. Centering a Layout Vertically (4:56)

Working with AP Divs in Dreamweaver CC

  1. Working with AP Divs in Dreamweaver CC - Part 1 (19:09)
  2. Layout with AP Divs in Dreamweaver CC - Part 2 (12:11)

Extensions (or 'Add Ons' ) in Dreamweaver*

* Note: This video is optional and only relevant to DW versions CS4 - CS6. Adobe has changed the way extensions work in DW CC. They now call them "Add Ons" and you can find them via the Window > Browse Add Ons menu option. Many of the older extensions for DW no longer work (such as the Lorem and More extension referenced in the video below).

  1. Managing Extensions and the Dreamweaver Exchange (8:59)

Working with Floats and Float-Based Layouts

  1. Working with Floats - Introduction, Adding and Clearing (7:52)
  2. Working with Floats - Exploring Deeper, With Margins (14:17)
  3. Working with Floats - Two-Column Layout (24:10)
  4. Working with Floats - Three-Column Layout and Faux Columns (16:29)

CSS Box Layouts - Exercise #5 Overview and Example

  1. Overview of Assignment #6 - CSS Box Layouts (33:52)
  2. Approaching Assignment #6 - Updates for Dreamweaver CC (26:01)

Introduction to CSS Flexbox

  1. CSS Flexbox - Part 1 - Introducing display: flex (9:39)
  2. CSS Flexbox - Part 2 - Container properites for direction, wrap, flow (8:23)
  3. CSS Flexbox - Part 3 - Container properties for spacing and alignment (14:17)
  4. CSS Flexbox - Part 4 - Item properties for order, sizing, alignment (22:11)

CSS Image Replacement

  1. CSS Image Replacement Technique (9:09)

CSS Buttons and Menus

  1. CSS for Creating the Ultimate Navigation Menu Button (15:48)
  2. Recreating the Nav Menu Button with CSS Designer Panel (15:23)
  3. HTML and CSS for Navigation Menu Design and Layout (21:23)
  4. RollOver Buttons Using Graphics (14:11)

CSS Sprites and the Sliding Door/Background Position Technique

  1. CSS Sprites - Creating a Sprite Sheet (9:04)
  2. CSS Sprites - Rollover Menu Using Sprites (18:13)

External vs. Internal CSS Styles, Moving Styles, Renaming Styles, Using Body IDs to Target Unique Styles in Individual Pages

  1. Managing Your CSS Styles, Internal vs. External CSS Stylesheets (22:19)

Implementing a CSS Layout - Start to Finish - Example 1

  1. Implementing A CSS Layout - Introduction - The pieces and the whole (7:52)
  2. Implementing A CSS Layout - Part 1 - Intro and HTML markup (11:06)
  3. Implementing A CSS Layout - Part 2 - Planning the layout and sketching a wireframe (4:44)
  4. Implementing A CSS Layout - Part 3 - Working with the header/logo and using Image Replacement techninques (5:25)
  5. Implementing A CSS Layout - Part 4 - Working with the container and centering your layout (5:57)
  6. Implementing A CSS Layout - Part 5 - Creating a CSS rollover menu (29:04)
  7. Implementing A CSS Layout - Part 6 - Implementing the layout using floats and margin (8:36)
  8. Implementing A CSS Layout - Part 7 - Styling the page id/section header and customizing CSS for individual pages by giving the body tag an id (17:54)
  9. Implementing A CSS Layout - Part 8 - Tiling a background image within a containing box to create the look of columns (8:05)
  10. Implementing A CSS Layout - Part 9 - Styling the footer (8:52)
  11. Implementing A CSS Layout - Part 10 - Styling the text (18:29)
  12. Implementing A CSS Layout - Part 11 - Creating a template with editable regions and attributes (17:22) * We will be cover Templates in greater detail in future videos

Designing a Graphical User Interface (GUI) Using Photoshop: From Sketch to Finished Comp
Note: These graphic development videos were posted earlier, but I include them again here as they complement the videos below and demonstrate the full process of going from a sketch/wireframe, to a PSD comp, to a finished HTML/CSS site.

  1. Graphic Development Using Photoshop - iPoint Logo (15:34)
  2. Graphic Development Using Photoshop - Menu Buttons (16:15)
  3. Graphic Development Using Photoshop - Interface, Part 1 (17:23)
  4. Graphic Development Using Photoshop - Interface, Part 2 (21:58)
  5. Graphic Development Using Photoshop - Interface, Part 3 (29:21)

Implementing a CSS Layout - PSD to HTML/CSS - Example 2

  1. PSD to HTML/CSS - Part 1 - SetUp, Site Defintion, External Styles (4:19)
  2. PSD to HTML/CSS - Part 2 - HTML Markup, Structuring Content (17:34)
  3. PSD to HTML/CSS - Part 3 - Sizing and Centering Using Containers (4:45)
  4. PSD to HTML/CSS - Part 4 - Slicing and Background Graphics (11:29)
  5. PSD to HTML/CSS - Part 5 - Logo/Image Replacment (11:09)
  6. PSD to HTML/CSS - Part 6 - Menu Using Sprites (31:32)
  7. PSD to HTML/CSS - Part 7 - Content Layout with Floats, Margin (17:12)
  8. PSD to HTML/CSS - Part 8 - Page ID, Body ID (20:35)
  9. PSD to HTML/CSS - Part 9 - Branding Images (22:01)
  10. PSD to HTML/CSS - Part 10 - Branding Text (34:48)
  11. PSD to HTML/CSS - Part 11 - Shadows (14:14)
  12. PSD to HTML/CSS - Part 12 - Text Styling (23:09)
  13. PSD to HTML/CSS - Part 13 - Footer (12:26)

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)

Finalizing the Design Before Making a Template: Validating Pages, Checking Pages, Cross-Browser Compatibility, and Bug Fixes

  1. Page validation, checking pages, reports, browser compatibility (12:13)
  2. Fixing bugs - The menu step down bug and using the :after pseudo class (17:24)
    * Note that this video makes reference to Adobe Browser Lab for cross-browser testing and Adobe has recently decided not to support browser lab any more, but Sauce Labs has a service that does allow cross-browser testing.

Working with Templates

  1. Defining a template and creating editable regions (16:44)
  2. Creating editable template attributes and updating template properties (15:37)
  3. Updating the template and making site-wide changes (10:32)

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)

Implementing a Responsive Design: From Comp to Code

  1. Responsive Design - Comp to Code - Part 1: Introduction, Using Photoshop and Artboards (14:35)
  2. Responsive Design - Comp to Code - Part 2: HTML5 Structure, Emmet (30:34)
  3. Responsive Design - Comp to Code - Part 3: Applying CSS, CSS Resets, Extracting Photoshop Image Assets (18:11)
  4. Responsive Design - Comp to Code - Part 4: More CSS, CSS Designer (24:29)
  5. Responsive Design - Comp to Code - Part 5: More CSS, the Code Navigator, and Media Queries (34:40)

Working with Tables

  1. Working with tables, inserting tables (10:18)
  2. Adding and deleting rows and columns, merging and splitting cells (12:34)
  3. Table and cell properties and sizing (24:17)
  4. Styling tables with CSS (15:22)
  5. Exploring table-based layouts (28:08)
  6. Importing tabular data (5:49)

Graphic, Web, and Media Design Principles

  1. Graphic, Web, and Media Design Principles, Tips, and Good Habits
    Note: This is an HTML5 slideshow requiring a modern browser (not old IE). If you don't have that then view this alternative.
  2. Collected Design Principles (of people, organizations, software, hardware) from Jeremy Keith at Adactio

Creating Web Pages with Photoshop (Old Exercise #5 Demos)

(Please note that the tutorials below incorrectly refer to the exercise as Exercise #3 and state that there is only 4 exercises in the class. I'm sorry if this causes confusion. The tutorials remain relevant, but the course content has been reorganized somewhat since these were recorded with the blogging exercise now listed as Exercise #1, etc. Thus, please keep in mind that this online class has 6 exercises and this is Exercise #5.)

  1. Photoshop Interface/Exercise - Introduction (3:51)

Building the Interface in Photoshop (Old Exercise #5 Demos)
These videos are optional, but useful if you are newer to PhotoShop.

  1. Photoshop Interface - Designing in Photoshop - Part 1 - Compositing, Working with Blend Modes, and Masks (17:13)
  2. Photoshop Interface - Designing in Photoshop - Part 2 - Adjustment Layers, Masks, Text, and Layer Styles (23:45)

Photoshop Slicing, Save for Web Options and Using Dreamweaver for RollOver Images and Centering (Exercise #5 Demos)

  1. Photoshop Interface - Slicing and Slice Options (14:35)
  2. Photoshop Interface - Saving for the Web and Editing in Dreamweaver (27:59)

New Web Design Features in PhotoShop CC

  1. Generating Image Assets (14:13)
  2. Copy CSS (10:00)
  3. Extract Assets (6:35) (this feature was deprecated in CC 2015 in favor of Export and right click "Export as" features providing similar options)

Photoshop Comp to Code with Extract (in the Cloud and in Dreamweaver)

  1. Extract in the Creative Cloud (6:09)
  2. Working with the Extract Panel in Dreamweaver CC (11:14)

JavaScript and Dreamweaver Behaviors

  1. Introduction to JavaScript and Dreamweaver Behaviors (13:11)
  2. JavaScript Behaviors - Swap Image Slideshow (17:41)
  3. JavaScript Behaviors - Show and Hide Divs (13:13)
  4. JavaScript Behaviors - Open Browser Window (7:10)
  5. JavaScript Behaviors - Effects, Change Property, and More (12:38)

The Spry Framework and Widgets (CS6 only)
Note: The Spry Framework has been removed from Dreamweaver CC in favor of jQuery UI widgets.

  1. Introduction to Spry and the Drop Down Menu Widget (14:05)
  2. Overview of Spry Widgets - Accordian, Tabbed Panels, Collapsible Panels, and Tooltips) (11:13)

jQuery UI Tools and Widgets (CC only)
Note: jQuery UI widgets are a new feature of Dreamweaver CC.

  1. Introduction to jQuery UI (9:50)
  2. Customizing jQuery UI Widgets (19:56)

Creating a CSS Drop Menu (enhanced with jQuery) - OPTIONAL
This is an example of a pure CSS drop menu that doesn't require JavaScript to function. It is generally preferred over and somewhat easier to customize than the Spry menu method detailed in the video above. These videos are optional if you are interested.

  1. CSS Drop Menu - Introduction (3:28)
  2. CSS Drop Menu - The HTML (8:32)
  3. CSS Drop Menu - The CSS (32:04)
  4. CSS Drop Menu - jQuery Enhancements (14:22)

Introduction to Animation on the Web (CSS, jQuery, and Flash) and Exercise #6

  1. Introduction to Exercise #6 (5:29)

CSS3 Animations using the Transition Property

  1. Animation with the CSS3 Transition Property (9:40)

An Overview of jQuery for Animation and Interactivity

  1. What is jQuery (4:54)
  2. A look at jQuery plugins (7:22)
  3. Getting and setting CSS attributes with jQuery (8:58)
  4. jQuery and interactive events (6:53)
  5. jQuery and animation (13:09)
  1. Scripting ajQuery Slideshow - Exercise #6 demo - Part 1 - Animation (27:11)
  2. Scripting a jQuery Slideshow - Exercise #6 demo - Part 2 - Interactivity (18:32)

An Overview of CSS3 Keyframe Animation

  1. CSS3 keyframe animation basics (37:07)
  2. Creating a pure CSS3 slideshow - Exercise #6 demo (23:52)

An Overview of Flash for Animation and Interactivity
Using CS6/AS2 mostly with some updates to CC/AS3 for the Exercise Demo in Video #5

  1. Step Animation in Flash (14:50)
  2. Tweened Animation in Flash (17:17)
  3. Buttons, Actions, and Interactivity in Flash (8:54)
  4. Creating a Flash Slideshow - Exercise #6 demo (29:50)
  5. Creating a Flash Slideshow - Scripting updates for AS3 and Flash CC (6:36)
  6. Publishing Flash and Integrating Flash Media into Dreamweaver (13:46)

Search Engine Optimization