World’s #1 Online Bootcamp

9/10 of our learners achieve their learning objectives after successful course completion*

Process Advisorsimage

Course Overview

Key Features

  • 25 complete Web Design courses
  • Storyboarding, wireframing & responsive design
  • HTML/HTML5, CSS/CSS3, floating layouts and SASS
  • Photoshop CC & Dreamweaver CS6 for web
  • Course Completion Certificate

Training Options

Self-Paced Learning

$ 399

  • Lifetime access to high-quality self-paced e-learning content curated by industry experts
  • 24x7 learner assistance and support

Corporate Training

Customized to your team's needs

  • Blended learning delivery model (self-paced eLearning and/or instructor-led options)
  • Flexible pricing options
  • Enterprise grade Learning Management System (LMS)
  • Enterprise dashboards for individuals and teams
  • 24x7 learner assistance and support

Course Curriculum

Course Content

  • Fundamentals of CSS3

    Preview

    • Fundamentals Of CSS3

      34:58Preview
      • 1.1 Course Materials
        00:26
      • 1.2 What Is CSS3?
        02:33
      • 1.3 Border Radius
        02:41
      • 1.4 Border Image
        09:08
      • 1.5 Box Shadow
        03:36
      • 1.6 Background Size
        06:39
      • 1.7 Text Shadow
        01:47
      • 1.8 Custom Fonts
        04:33
      • 1.9 Rotate
        01:45
      • 1.10 Resize
        01:50

  • Building Websites with Dreamweaver CS6

    Preview

    • Module 01 - Welcome to Building Website with Deamweaver CS6

      02:59Preview
      • 1.1 Welcome to Dreamweaver CS6
        01:09
      • 1.2 A Look at What We'll build
        01:50

    • Module 02 - Let's Gets Started with Dreamweaver CS6

      42:16Preview
      • 2.1 A Look At the Welcome Screen
        05:14
      • 2.2 Creating New Documents
        06:40
      • 2.3 Dreamweaver's Different Views
        05:35
      • 2.4 Touring the Dreamweaver Interface
        06:53
      • 2.5 Customizing the Interface
        05:09
      • 2.6 Exploring Dreamweaver Workspaces
        04:30
      • 2.7 Creating Custom Workspace
        05:11
      • 2.8 Using the Tag Selector
        03:04

    • Module 03 - Working With Websites and Browsers

      25:04
      • 3.1 Defining a New Site
        05:33
      • 3.2 Getting Organized in the Files Panel
        05:38
      • 3.3 Saving Files Into Your Local Site
        03:16
      • 3.4 Understanding Index Files
        03:53
      • 3.5 Previewing Your Work in A web Browser
        06:44

    • Module 04 - Starting With Nothing Building Web Layout From Scratch

      01:30:25Preview
      • 4.1 Getting The Layout, Part1
        07:37
      • 4.2 Getting The Layout, Part2
        03:02
      • 4.3 Understanding How The Layout Works
        07:17
      • 4.4 Inserting The Main Menu
        04:00
      • 4.5 Creating The Main Content Area
        04:48
      • 4.6 Hand Coding Layout Containers
        06:40
      • 4.7 A More Economical Approach To Layout
        10:25
      • 4.8 Using Float and Clear
        08:33
      • 4.9 Prevewing the Layout and Centering
        12:17
      • 4.10 Nesting Layout Objects
        08:57
      • 4.11 Spacing Apart the Layout
        08:43
      • 4.12 Final Touches
        08:06

    • Module 05 - Text and CSS and Menus and More

      01:13:15Preview
      • 5.1 Inserting Text into the Layout
        04:51
      • 5.2 Adjusting the Layout For Text, Part1
        07:57
      • 5.3 Adjusting the Layout For Text, Part2
        05:43
      • 5.4 Inserting Structural Headings
        04:49
      • 5.5 Redefining HTMLs Top-Level Heading with CSS
        09:05
      • 5.6 Touring the CSS Rule Definition Dialog Box
        08:15
      • 5.7 Redefining Headings and Paragraphs
        06:06
      • 5.8 Working More Efficently with CSS
        04:45
      • 5.9 Creating A CSS Class Rule
        05:06
      • 5.10 Alternative Ways of Working with Class Rules
        04:52
      • 5.12 Using A List to build a Menu Part1
        03:59
      • 5.13 Using A List to build a Menu Part2
        07:47

    • Module 06 - And Now, Inserting Graphics

      51:09Preview
      • 6.1 Inserting An Image
        05:46
      • 6.2 Resizing Images with Dreamweaver and Photoshop
        08:06
      • 6.3 Controlling Graphics with CSS
        07:37
      • 6.4 Setting a Graphical Background
        05:04
      • 6.5 Inserting the FeatureBox Images
        08:41
      • 6.6 Setting up the FeatureBox Titles
        08:27
      • 6.7 Inserting the Layout's Logo From Illustrator
        07:28

    • Module 07 - Going Further with CSS Using Externals StyleSheets

      26:39Preview
      • 7.1 Understanding Style Sheet Types
        08:07
      • 7.2 Organizing Your Style Sheet
        03:04
      • 7.3 Moving Styles to an External Style Sheet
        06:02
      • 7.4 Working With an External Stye Sheet
        06:08
      • 7.5 Creating New Rule Externally
        03:18

    • Module 08 - Site Rollout From A Single Page to A Multi-Page Site

      20:02Preview
      • 8.1 Getting Ready For Site Rollout
        03:32
      • 8.2 Creating Dummy Site Pages
        03:15
      • 8.3 Setting Up the Internal Hyperlink Structure
        03:13
      • 8.4 Creating the Site's Pages
        03:50
      • 8.5 Previewing and Testing the Site
        02:54
      • 8.6 A Final Thought on SiteRollout
        03:18

    • Module 09 - Inserting Additional Page Elements

      49:49
      • 9.1 Adjusting the Site's Hyperlink Formatting
        06:33
      • 9.2 Inserting A Simple Slideshow
        07:38
      • 9.3 Inserting And Formatting Tables
        09:39
      • 9.4 Inserting A Google Map
        05:53
      • 9.5 Formating A Customer Testimonial Page
        04:55
      • 9.6 Setting Up A Contact Us Page
        05:53
      • 9.7 Finalizing The Site
        09:18

    • Module 10 - Going Live Uploading the Completed Site

      21:34Preview
      • 10.1 Setting the Remote Site info
        05:36
      • 10.2 Uploading the Local Site to the Remote Server
        01:36
      • 10.3 Testing the Live Site
        01:48
      • 10.4 Making the Edits and updating the Live Site
        05:03
      • 10.5 Testing and Debugging for Other Browsers
        07:31

    • Module 11 - Now Go Forth and Create

      00:41
      • 11.1 Where to go From Here
        00:41

  • Website Wireframing with HTML5 and CSS3

    Preview

    • Chapter 0 - Introduction

      12:51Preview
      • 0.1 Introduction
        04:03
      • 0.2 Why Using Photoshop May Not Be The Best Choice
        03:07
      • 0.3 Using HTML and CSS For Fast Wireframe Compositing
        02:54
      • 0.4 A Look At What We ll Build In This Course
        01:23
      • 0.5 Bonus Lesson How To Turn Any Web Page Into A Wireframe
        01:24

    • Chapter 1 - Getting Started

      46:27Preview
      • 1.1 Getting Started
        04:45
      • 1.2 Building The Structural CSS Rules Part 1
        07:43
      • 1.3 Building The Structural CSS Rules Part 2
        02:53
      • 1.4 Connecting Up The HTML To The CSS
        05:20
      • 1.5 Centering Layout Elements
        05:37
      • 1.6 Setting Up Inner Layout Containers
        07:19
      • 1.7 Inserting Additional Inner Containers
        03:35
      • 1.8 Spacing Apart The Layout
        09:15

    • Chapter 2 - Wireframing The Header In Greater Detail

      20:26
      • 2.1 Wireframing The Header In Greater Detail
        04:37
      • 2.2 Building The Logo Container
        03:55
      • 2.3 Setting Up The Main Navigation Menu
        05:54
      • 2.4 Creating A Call - To - Action Button
        06:00

    • Chapter 3 - Building The Rest Of The Layout

      40:25Preview
      • 3.1 Building The Rest Of The Layout
        04:41
      • 3.2 Getting Started With The Hero Content
        04:02
      • 3.3 Finishing Up The Hero Section
        05:36
      • 3.4 Inserting The Feature Headers
        03:35
      • 3.5 Building The Feature Boxes
        05:59
      • 3.6 Wireframing The Organize Section
        05:42
      • 3.7 Speeding Things Up For The Share Section
        04:27
      • 3.8 Finishing - Up The Wireframing
        06:23

    • Chapter 4 - Finishing Touches

      44:58Preview
      • 4.1 Finishing Touches
        03:49
      • 4.2 Adding A Logo Placeholder With Text
        03:51
      • 4.3 Inserting The Remaining Image Placeholders
        03:23
      • 4.4 Inserting A Background Placeholder
        05:10
      • 4.5 Adding Subtle Interactivity
        06:01
      • 4.6 Adding Button Interactivity
        11:43
      • 4.7 Finishing Touches
        04:57
      • 4.8 Sharing The Wireframe For Review
        06:04

    • Chapter 5 - Wrapping Up

      00:21
      • 5.1 Wrapping Up
        00:21

  • Storyboarding Layout and Design

    Preview

    • Module 1 - Introduction

      00:39Preview
      • 1.1 Introduction
        00:39

    • Module 2 - Working With The Camera

      25:24Preview
      • 2.1 Camera Distances
        05:04
      • 2.2 Horizontal
        02:46
      • 2.3 Vertical
        06:58
      • 2.4 Setup and Transitions
        06:16
      • 2.5 Framing Guidelines
        04:20

    • Module 3 - Flow

      52:48Preview
      • 3.1 Layout Golden Ratio
        07:08
      • 3.2 Flow Explained
        09:45
      • 3.3 Painter Example
        05:50
      • 3.4 Primavera Example
        03:09
      • 3.5 St Matthew Example
        05:31
      • 3.6 Comic Book Storyboards
        15:56
      • 3.7 Aspect Ratio
        05:29

    • Module 4 - Advanced Storyboarding

      16:29
      • 4.1 Framing The Shot
        03:32
      • 4.2 Borders
        08:29
      • 4.3 Framing Rules
        04:28

  • Scratch-Building WordPress Themes with Photoshop

    Preview

    • Chapter 1 - Introduction

      11:20Preview
      • 1.1 Installing Scratching WordPress Themes
        01:51
      • 1.2 Understanding WordPress And WordPress Themes
        02:24
      • 1.3 The Workflow Process
        03:06
      • 1.4 Viewing The Finished Site
        03:59

    • Chapter 2 - Setting Up Photoshop For Web Layout

      50:13Preview
      • 2.1 Setting Up Photoshop
        05:57
      • 2.2 Arranging The Workspace
        09:43
      • 2.3 Setting Panel Options
        06:52
      • 2.4 Customizing Menus And Keyboard Shortcuts
        08:53
      • 2.5 Saving Photoshops Workspace
        03:10
      • 2.6 Photoshop Color Management For Web Design
        05:27
      • 2.7 Common Photoshop Productivity Techniques
        05:55
      • 2.8 A Few Final Photoshop Settings
        04:16

    • Chapter 3 - Getting Set Up For User Interface Design

      52:47Preview
      • 3.1 Understanding Monitor Resolution
        04:03
      • 3.2 Fixed Versus Flexible Web Layouts
        04:17
      • 3.3 Introducing The 960 Grid System
        08:59
      • 3.4 Available Column Widths In The 960 Grid System
        04:15
      • 3.5 Building A Custom Grid System (Free Lesson)
        14:01
      • 3.6 Using Photoshops Grid For Layout
        03:18
      • 3.7 Understanding The Golden Ratio
        04:58
      • 3.8 The Main Areas Of A WordPress Blog
        04:06
      • 3.9 Roughing Out The Design
        04:50

    • Chapter 4 - Developing A Wireframe UI In Photoshop

      01:12:26Preview
      • 4.1 Buildg A Wireframe Layout Using Photoshop
        05:53
      • 4.2 Creating The First Wireframe Object
        06:05
      • 4.3 Continuing To Wireframe Objects
        07:24
      • 4.4 Deleting Wireframe Objects
        02:12
      • 4.5 Faster Methods For Creating Wireframe Objects
        10:32
      • 4.6 Building Up The Wireframe
        10:06
      • 4.7 Adding In Horizontal Rules
        04:01
      • 4.8 Wireframing Additional Objects, Plus Some Extra Techniques
        09:13
      • 4.9 Continuing The Wireframe Development
        06:34
      • 4.10 Placing Objects For Loop Post Thumbnails
        05:01
      • 4.11 Roughing In A Photo Gallery
        05:25

    • Chapter 5 - Finishing Up The Wireframe

      01:01:42Preview
      • 5.1 Wireframing The Text
        09:44
      • 5.2 Creating More Wireframe Text
        09:11
      • 5.3 Adding In Additional Text Objects
        07:55
      • 5.4 Finishing Up The Text Wireframing
        03:33
      • 5.5 Getting The Layers Panel Organized
        09:28
      • 5.6 Additional Layer Group Techniques
        06:36
      • 5.7 Adding Text Labels To The Wireframe
        07:36
      • 5.8 Exporting The Wireframe For Review
        07:39

    • Chapter 6 - From Wireframe To Design

      01:55:02Preview
      • 6.1 Applying Design To The Wireframe
        03:18
      • 6.2 Determining The Designs Message
        04:50
      • 6.3 Choosing A Typeface Hierarchy
        13:54
      • 6.4 Choosing Colour Combinations
        12:25
      • 6.5 Saving Out Custom Photoshop Color Palettes (Free Lesson)
        03:26
      • 6.6 Sourcing Photography And Textures
        08:05
      • 6.7 Creating The Site Logo (And Using Smart Objects)
        08:47
      • 6.8 Introducing Layer Style Special Effects
        07:06
      • 6.9 Finishing Up The Header
        03:12
      • 6.10 Building The Menu
        08:18
      • 6.11 Developing The Slideshow And Body Background
        04:11
      • 6.12 Formatting The New Additions Area
        17:52
      • 6.13 Blog Loop Formatting
        03:07
      • 6.14 Developing The Sidebar
        06:24
      • 6.15 Finishing Up With The Footer And Saving Out Custom Styles
        10:07

    • Chapter 7 - Applying Photography And Textures

      30:30
      • 7.1 Applying Texture To The Header
        08:06
      • 7.2 Including Additional Textures
        04:37
      • 7.3 Adding A Photo To The Slideshow
        04:02
      • 7.4 Inserting Photography For The New Additions Area
        04:55
      • 7.5 Adding Post Thumbnails In The Loop
        05:30
      • 7.6 Inserting Thumbnails In The Photo Gallery
        03:20

    • Chapter 8 - Preparing A Blank WordPress Theme For Design

      01:09:26Preview
      • 8.1 Tools Of The Trade
        04:13
      • 8.2 Understanding Template Hierarchy
        06:08
      • 8.3 A Look At Geoffs Setup
        01:44
      • 8.4 Applying A Blank WordPress Theme
        06:00
      • 8.5 Reviewing And Adjusting The Style Sheets
        05:14
      • 8.6 Creating The First Div And CSS Rule
        05:28
      • 8.7 Roughing In The Layout
        09:09
      • 8.8 Further Roughing In The Layout
        12:38
      • 8.9 Adding The Photoshop Colour Palette To The Themes Style Sheet
        06:45
      • 8.10 Creating Our Sites Page Structure And Main Navigation Menu
        08:36
      • 8.11 Creating Sample Posts For The Loop
        03:31

    • Chapter 9 - Building The WordPress Theme From Complete Scratch

      03:06:36Preview
      • 9.1 Extracting The Header Texture From The Layout
        09:47
      • 9.2 Inserting The Header Graphic Into The Theme
        03:30
      • 9.3 Extracting The Logo From Photoshop And Inserting It Into The Theme
        08:56
      • 9.4 Rebuilding The Navigation Menu Using CSS
        20:00
      • 9.5 Building Up The Main Content Area
        06:23
      • 9.6 Roughing In The Inner Containers
        18:38
      • 9.7 Inserting The Positioning Statement
        04:59
      • 9.8 Creating Button Formatting With CSS
        20:03
      • 9.9 Building And Formatting The New Additions Area - Part 1
        05:53
      • 9.10 Building And Formatting The New Additions Area - Part 2
        12:14
      • 9.11 Font Replacement With Google Fonts API
        10:20
      • 9.12 Consolidating Font Usage And Organizing Typography
        21:12
      • 9.13 One Giant Leap For Theme Design
        09:48
      • 9.14 Formatting The Loop
        09:54
      • 9.15 Adding Post Thumbnails To The Loop
        21:20
      • 9.16 Getting The Sidebar Started
        03:39

    • Chapter 10 - Pushing The Theme Design Further

      02:28:53Preview
      • 10.1 Footer Development
        06:17
      • 10.2 Formatting Hyperlinks
        05:54
      • 10.3 Limiting The Number Of Posts Appearing On The Home Page
        06:38
      • 10.4 Inserting Custom Loop Pagination
        09:05
      • 10.5 Inserting The Slideshow
        16:25
      • 10.6 A Better Way For Building WordPress Menus
        08:10
      • 10.7 Building And Formatting WordPress Subpages
        08:27
      • 10.8 Applying Formatting To Post Pages
        07:16
      • 10.9 Completely Customizing The Comments Area
        18:55
      • 10.10 Adding A Ribbon Graphic To The Comment Area
        15:49
      • 10.11 Customizing Category And Search Results Pages (Free Lesson)
        08:07
      • 10.12 Adding A Search Field To The Header
        08:23
      • 10.13 Building A Lightbox Photo Gallery
        16:11
      • 10.14 Finishing Touches
        03:34
      • 10.15 Addressing Browser Compatibility Issues
        09:42

    • Chapter 11 - Wrapping Things Up

      05:39
      • 11.1 Final Site Checklist
        01:57
      • 11.2 Thanks For Watching That Was Fun
        03:42

  • Running A Web Design Business

    Preview

    • Section 1 - Introduction

      12:06Preview
      • 1.1 Introduction
        12:06

    • Section 2 - Starting Out

      45:30Preview
      • 2.1 Running A Business
        10:03
      • 2.2 Starting A Web Design Business
        18:21
      • 2.3 Getting Work
        17:06

    • Section 3 - Clients

      31:01Preview
      • 3.1 Dealing With Clients
        10:53
      • 3.2 How To Change The Client s Mind
        02:59
      • 3.3 Meeting Clients
        05:14
      • 3.4 Client Issues
        11:55

    • Section 4 - Work

      55:38
      • 4.1 Handling Client Requests
        03:40
      • 4.2 What To Say To The Client
        06:43
      • 4.3 How To Sell A Website To A Client
        15:24
      • 4.4 How To Sell Print Design To A Client
        04:18
      • 4.5 How To Sell A Logo To A Client
        05:17
      • 4.6 Specialisation And Diversification
        20:16

    • Section 5 - Money

      26:37Preview
      • 5.1 How Much Do I Charge The Client Edited
        08:04
      • 5.2 Doing The Accounts
        12:13
      • 5.3 More Money Advice
        06:20

    • Section 6 - Web Designers Business Survey

      42:28Preview
      • 6.1 Meet The Designers Edited
        15:06
      • 6.2 What Designers Do How They Make Money And Where They Find Clients
        14:04
      • 6.3 How Web Designers Get Paid
        13:18

  • Responsive Design with Dreamweaver CS6

    Preview

    • Chapter 0 - Gettin Warmed Up

      04:00Preview
      • 0.1 Gettin Warmed Up
        01:35
      • 0.2 Previewing The Completed Layout (Free Lesson)
        02:25

    • Chapter 1 - Let s Get Started With Fluid Grid Layouts

      01:21:21Preview
      • 1.1 Let s Get Started With Fluid Grid Layouts
        04:14
      • 1.2 Creating A New Fluid Grid Layout
        06:14
      • 1.3 Touring Through The Layout
        06:19
      • 1.4 Looking At Other Device Views
        06:09
      • 1.5 Building The Fluid Grid Layout s Basic Structure
        07:19
      • 1.6 Adjusting Layout Objects
        10:42
      • 1.7 Touring And Understanding The External Style Sheet
        10:29
      • 1.8 Building The Raw Structure For Mobile
        06:18
      • 1.9 Adjusting The Structure For Tablet And Desktop
        08:15
      • 1.10 Inserting Nested Divs In The Layout
        03:06
      • 1.11 Previewing Your Work
        07:31
      • 1.12 Adjusting The External Style Sheet
        04:45

    • Chapter 2 - Building The Mobile Device Layout

      01:24:55Preview
      • 2.1 Building The Mobile Device Layout
        04:02
      • 2.2 Inserting The Logo
        09:49
      • 2.3 Inserting And Formatting The Menu Items
        07:26
      • 2.4 Roughing In The Slideshow
        02:01
      • 2.5 Building The Positioning Statement Area
        08:09
      • 2.6 Getting The New Additions Area Built
        09:42
      • 2.7 Constructing The Feature Boxes
        14:31
      • 2.8 Finishing Up The Feature Boxes
        04:00
      • 2.9 Adjusting The Mobile Layout To Scale Part 1
        05:32
      • 2.10 Adjusting The Mobile Layout To Scale Part 2
        07:00
      • 2.11 Formatting The Footer
        06:15
      • 2.12 Finishing Up The Mobile Device Layout
        06:28

    • Chapter 3 - Building Out The Tablet Device Design

      45:37Preview
      • 3.1 Building Out The Tablet Device Design
        06:17
      • 3.2 Adjusting The Tablet Layout s Logo (Free Lesson)
        05:11
      • 3.3 Configuring Layout Objects To Inherit From The Mobile Style Sheet
        03:16
      • 3.4 Adjusting The Positioning Statement And New Additions Areas
        03:51
      • 3.5 Setting Up The Tablet Device s Feature Boxes Part 1
        05:32
      • 3.6 Setting Up The Tablet Device s Feature Boxes Part 2
        07:58
      • 3.7 Let s Cheat Here s How To Fix Scaling Graphic Margin
        04:03
      • 3.8 Fixing The Mobile View
        05:47
      • 3.9 Finishing Touches For The Tablet Layout
        03:42

    • Chapter 4 - Building The Desktop Layout

      20:46Preview
      • 4.1 Building The Desktop Layout
        03:44
      • 4.2 Adjusting The Desktop Layout s Logo
        01:54
      • 4.3 Applying Deskto - Only Formatting To The Menu
        03:21
      • 4.4 Tweaking The Slideshow Positioning
        00:55
      • 4.5 Fixing The Positioning Statement And Feature Boxes
        08:01
      • 4.6 Final Desktop Layout Adjustments (Free Lesson)
        02:51

    • Chapter 5 - Finishing Up With Some Final Adjustments

      10:39
      • 5.1 Finishing Up With Some Final Adjustments
        04:54
      • 5.2 Hiding Layout Content Between Devices
        05:16
      • 5.3 Wrapping Up Fluid Grid Layouts
        00:29

  • Photoshop CC for the Web

    Preview

    • Chapter 1 - Getting Started

      30:57Preview
      • 1.1 Getting Started
        01:11
      • 1.2 Understanding Raster And Vector
        03:42
      • 1.3 Setting Up Photoshop For The Web
        09:40
      • 1.4 Common Photoshop Productivity Techniques
        09:29
      • 1.5 Understanding Colour Spaces
        06:55

    • Chapter 2 - Preparing Your Images For The Web

      01:11:45Preview
      • 2.1 Preparing Your Images For The Web
        09:50
      • 2.2 Why Resolution Doesn t Matter On The Web
        15:42
      • 2.3 Techniques For Resizing Images
        11:23
      • 2.4 Web Graphics Roundup
        07:40
      • 2.5 Saving Images As A GIF
        08:19
      • 2.6 Saving A Transparent GIF
        03:13
      • 2.7 Saving Images As JPEGs
        05:33
      • 2.8 Saving Images As PNGs
        04:01
      • 2.9 Saving Images In The SVG Format
        06:04

    • Chapter 3 - A Closer Look At Image Optimization

      55:39Preview
      • 3.1 A Closer Look At Image Optimization
        07:50
      • 3.2 Optimizing Images As GIFs
        07:00
      • 3.3 Creating Animated GIFs
        06:24
      • 3.4 Optimizing Images As JPEGs
        04:40
      • 3.5 Saving As Both PNG 8 And PNG 24
        03:24
      • 3.6 Creating Alpha Transparency With PNGs
        03:37
      • 3.7 A Final Note On Image Optimization
        01:34
      • 3.8 Preparing Images For Retina Displays
        04:44
      • 3.9 Saving An Optimization Preset
        03:39
      • 3.10 Creating A Droplet
        07:00
      • 3.11 Batch Processing A Large Number Of Images
        02:48
      • 3.12 Using Photoshop s Image Processor Command
        02:59

    • Chapter 4 - Photoshop Web Styling Techniques

      30:02
      • 4.1 Photoshop Web Styling Techniques
        10:40
      • 4.2 Building A Website Header
        10:41
      • 4.3 Building A Navigation Menu
        08:41

    • Chapter 5 - Using The Photoshop Asset Generator

      18:11Preview
      • 5.1 Using The Photoshop Asset Generator
        08:04
      • 5.2 Going Further With The Asset Generator
        07:46
      • 5.3 Final Notes When Using Generator
        02:21

    • Chapter 6 - Wrapping Up

      02:08
      • 6.1 Wrapping Up
        02:08

  • Introduction to Web Design

    Preview

    • Section 1 - Introduction To The Course

      02:34Preview
      • 1.1 Introduction To Web Design
        02:34

    • Section 2 - Basics Of Web Design

      46:03Preview
      • 2.1 Diffrence Between HTML And CSS
        08:12
      • 2.2 First Html File
        07:04
      • 2.3 Introduction To Document Layout
        06:52
      • 2.4 Linking In A Stylesheet
        07:40
      • 2.5 Styling Your First Element
        16:15

    • Section 3 - Web Design Fundamentals

      02:12:44Preview
      • 3.1 Box Model
        14:21
      • 3.2 Introduction To Developer Tools
        14:23
      • 3.3 Understanding Display Types
        09:59
      • 3.4 Project - Create A CSS Button
        21:15
      • 3.5 Using CSS Selectors
        23:10
      • 3.6 Styling Links
        04:49
      • 3.7 Using Floats
        15:21
      • 3.8 Using Clearfix
        05:40
      • 3.9 Working With Images
        14:50
      • 3.10 Validating HTML And CSS
        08:56

    • Section 4 - Webfonts

      24:33
      • 4.1 Introduction - Webfonts
        16:43
      • 4.2 Webfonts, Google Fonts And API
        07:50

    • Section 5 - Cascading Style Sheets

      30:43Preview
      • 5.1 Using CSS And Applying To Document
        07:47
      • 5.2 Vendor Prefixes
        09:56
      • 5.3 Create A Color Changing Profile Image
        13:00

    • Section 6 - Introduction To Grid Structures

      45:26Preview
      • 6.1 Grid System Framework
        12:59
      • 6.2 Choosing A Grid Framework
        09:11
      • 6.3 Grids And Responsive Design
        23:16

    • Section 7 - Forms And Icons

      01:01:07
      • 7.1 Styling Forms
        28:00
      • 7.2 Using Font Icons
        13:56
      • 7.3 Understanding Sprite Sheets
        19:11

    • Section 8 - Project - Create A Comment List

      15:00
      • 8.1 Building A Comment List
        15:00

    • Section 9 - Positioning And Resources

      24:30
      • 9.1 CSS Positioning
        18:53
      • 9.2 CSS Resources
        05:37

    • Section 10 - Final Project - Design A Real Website

      01:00:53Preview
      • 10.1 Design A Real Website
        04:58
      • 10.2 Adding Our Graphics
        08:32
      • 10.3 Building Our Site
        43:28
      • 10.4 Validating Our Site
        03:55

  • Introduction to SASS

    Preview

    • Introduction to SASS

      41:17Preview
      • 1.1 Installing Sass
        00:58
      • 1.2 Compiling
        05:38
      • 1.3 Project Overview
        01:37
      • 1.4 Directory Structure
        04:55
      • 1.5 Variables
        07:51
      • 1.6 Inheritence
        07:15
      • 1.7 Nesting
        02:33
      • 1.8 Functions
        04:56
      • 1.9 Mixins
        05:34

  • HTML5 and CSS3 Site Design

    Preview

    • Chapter 0 - Introduction

      03:12Preview
      • 0.1 Introduction
        00:57
      • 0.2 A Look At What Well Build
        02:15

    • Chapter 1 - Let Get Started

      25:33Preview
      • 1.1 Lets Get Started
        03:25
      • 1.2 In The Beginning HTML Fundamentals
        11:18
      • 1.3 Understanding What CSS Is All About
        06:34
      • 1.4 Viewing A Page Background Code
        04:16

    • Chapter 2 - Getting Your Files Organized

      16:01Preview
      • 2.1 Getting Your Files Organized
        06:43
      • 2.2 Creating A Page And Understanding Index Files
        05:41
      • 2.3 Setting Up An External Style Sheet
        03:37

    • Chapter 3 - Let Build A Web Layout From Scratch

      01:27:45Preview
      • 3.1 Lets Build A Web Layout From Scratch
        06:54
      • 3.2 Connecting The External Style Sheet And Testing
        08:14
      • 3.3 Inserting And Formatting The Site Header
        07:36
      • 3.4 Finishing Up The Basic Layout
        04:48
      • 3.5 Debugging For Internet Explorer
        03:25
      • 3.6 Understanding How The Layout Works
        05:49
      • 3.7 Using Divs For Page Layout
        07:14
      • 3.8 A More Economical Approach To Layout And CSS
        07:50
      • 3.9 Using Float And Clear
        05:54
      • 3.10 Centering The Layout
        09:01
      • 3.11 Nesting Layout Objects
        07:03
      • 3.12 Spacing Apart The Layout
        09:11
      • 3.13 Final Touches
        04:46

    • Chapter 4 - Inserting And Formatting Text

      01:17:29Preview
      • 4.1 Inserting And Formatting Text
        04:16
      • 4.2 Setting Up Paragraphs And Headings
        04:36
      • 4.3 Adjusting The Layout For Text Part 1
        07:35
      • 4.4 Adjusting The Layout For Text Part 2
        05:19
      • 4.5 Formatting HTML Headings With CSS
        06:48
      • 4.6 Formatting Paragraphs
        04:09
      • 4.7 Using Class Rules To Format Text
        05:22
      • 4.8 More Formatting With Class Rules
        09:07
      • 4.9 Working More Efficiently With CSS
        06:52
      • 4.10 Inserting And Formatting Lists
        06:40
      • 4.11 Using A List To Build The Main Navigation Menu
        10:15
      • 4.12 Setting Up The Footer Navigation
        06:30

    • Chapter 5 - Now It Time For Some Graphics

      42:18
      • 5.1 Now It Time For Some Graphics
        06:28
      • 5.2 Resizing Images With Your Graphics Editor
        04:51
      • 5.3 Controlling Graphics With CSS
        07:06
      • 5.4 Inserting The FeatureBox Images(Free Lesson)
        07:10
      • 5.5 Adjusting The FeatureBox Layout
        02:57
      • 5.6 Setting Up The FeatureBox Titles
        06:18
      • 5.7 Illustrator, Photoshop, HTML, And CSS Workflow
        07:28

    • Chapter 6 - Site Rollout

      26:21Preview
      • 6.1 Site Rollout
        03:37
      • 6.2 How To Not Roll Out A Website
        07:07
      • 6.3 Roll Out 1 - Setting Internal Hyperlinks
        04:36
      • 6.4 Roll Out 2 - Creating The Site Pages
        01:33
      • 6.5 Previewing And Testing The Site
        04:03
      • 6.6 A Final Thought On Site Rollout
        05:25

    • Chapter 7 - Inserting Additional Page Elements

      01:02:46Preview
      • 7.1 Inserting Additional Page Elements
        06:58
      • 7.2 Inserting A Simple Slideshow
        08:29
      • 7.3 Inserting And Formatting Tables
        08:15
      • 7.4 Inserting A Google Map
        07:51
      • 7.5 Formatting A Customer Testimonial Page
        07:07
      • 7.6 Setting Up A Contact Us Page
        06:44
      • 7.7 Finalizing The Site
        11:55
      • 7.8 Organizing The CSS File
        05:27

    • Chapter 8 - Going Live Uploading The Completed Site

      25:26
      • 8.1 Uploading The Completed Site
        03:52
      • 8.2 Uploading The Local Site To The Remote Server
        02:25
      • 8.3 Testing The Live Site
        02:04
      • 8.4 Making Edits And Updating The Live Site
        06:49
      • 8.5 Testing And Debugging For Other Browsers
        09:53
      • 8.6 Conclusion
        00:23

  • HTML and CSS for Beginning Web Developers

    Preview

    • Module 1 - Introduction To HTML

      08:44Preview
      • 1.1 The Basics Of HTML
        02:55
      • 1.2 What Is HTML
        02:59
      • 1.3 Getting The Browser
        00:42
      • 1.4 Getting The Editor
        00:49
      • 1.5 Setting Up The Editor
        01:19

    • Module 2 - HTML Basics

      18:11Preview
      • 2.1 Structure Hello World
        04:36
      • 2.2 The DOM
        02:10
      • 2.3 Customizing The Editor
        01:32
      • 2.4 Self Closing Tags - Environment
        01:21
      • 2.5 Validation
        06:10
      • 2.6 Comments
        02:22

    • Module 3 - Block Level Elements

      08:42
      • 3.1 Block Level Elements
        08:42

    • Module 4 - Line Breaks And Spacing

      04:50
      • 4.1 Line Breaks And Spacing
        04:50

    • Module 5 - Inline Elements

      22:58Preview
      • 5.1 Span Text Modifiers
        02:37
      • 5.2 Anchors
        10:25
      • 5.3 Exercise - Linking To The Top Of The Page
        04:46
      • 5.4 Images
        05:10

    • Module 6 - Tables And Forms

      01:19:56Preview
      • 6.1 Tables
        04:49
      • 6.2 The Basics Of Forms
        09:54
      • 6.3 HTML5 Input Attributes
        15:44
      • 6.4 New HTML5 Inputs
        08:53
      • 6.5 Action Attribute
        03:40
      • 6.6 GET vs POST
        03:13
      • 6.7 Using An Image For The Submi Button
        04:06
      • 6.8 Exercise - Hote Booking Form
        18:45
      • 6.9 Placeholder Vs. Value
        02:31
      • 6.10 Radio Buttons, Checkboxes, Selsct Elemnets And Text Areas
        08:21

    • Module 7 - Sematic HTML5 Elements

      14:35Preview
      • 7.1 New Elements
        03:39
      • 7.2 What Are Semantic Elements
        03:14
      • 7.3 Semantics Elements In Practice
        04:32
      • 7.4 Meter And Progress Elements
        03:10

    • Module 8 - Multimedia

      07:43
      • 8.1 Audio
        04:15
      • 8.2 Video
        03:28

  • Fundamentals of HTML

    Preview

    • Fundamentals Of HTML

      01:20:54Preview
      • 1.1 Course Materials
        00:25
      • 1.2 What Is HTML
        01:14
      • 1.3 Editors
        02:08
      • 1.4 Elements
        03:26
      • 1.5 Block Elements
        02:36
      • 1.6 Attributes
        05:02
      • 1.7 Line Breaks
        01:42
      • 1.8 Headers And Paragraphs
        04:45
      • 1.9 Links
        04:15
      • 1.10 Images
        04:27
      • 1.11 Formatting (Part 1)
        02:29
      • 1.12 Formatting (Part 2)
        05:16
      • 1.13 The Style Attribute
        07:42
      • 1.14 Comments
        02:44
      • 1.15 The Div Element
        02:02
      • 1.16 Lists
        04:37
      • 1.17 Tables (Part 1)
        05:57
      • 1.18 Tables (Part 2)
        06:14
      • 1.19 Forms
        10:59
      • 2.20 IFrames
        02:54

  • Advanced CSS

    Preview

    • Advanced CSS

      01:15:41Preview
      • 1.1 Course Material
        00:25
      • 1.2 Grouping And Nesting
        06:13
      • 1.3 Maximum And Minimum Dimensions
        04:21
      • 1.4 Positions
        04:44
      • 1.5 Relative And Z - Index
        05:22
      • 1.6 Floating
        03:35
      • 1.7 Clear
        03:20
      • 1.8 Pseudos(Part 1)
        06:13
      • 1.9 Pseudos(Part 2)
        06:38
      • 1.10 Alignment
        05:05
      • 1.11 Sprites
        09:35
      • 1.12 Opacity
        03:37
      • 1.13 Media Types
        04:29
      • 1.14 Attribute Selectors
        03:46
      • 1.15 Browser Prefixes
        05:13
      • 1.16 Important
        03:05

  • Fundamentals of CSS

    Preview

    • Fundamentals Of CSS

      01:33:05Preview
      • 1.1 Course Material
        00:25
      • 1.2 What Is CSS
        02:59
      • 1.3 Syntax
        01:57
      • 1.4 Using Style Sheets
        04:45
      • 1.5 External Style Sheets
        01:57
      • 1.6 ID s And Classes
        05:02
      • 1.7 Styling Elements
        02:01
      • 1.8 Comments
        01:17
      • 1.9 Background Colors
        00:57
      • 1.10 Background Image
        07:49
      • 1.11 Text Color
        01:30
      • 1.12 Text Formatting
        07:23
      • 1.13 Font Properties
        07:06
      • 1.14 Text Properties
        04:39
      • 1.15 Links
        07:39
      • 1.16 Lists
        06:29
      • 1.17 Width And Height
        05:14
      • 1.18 Borders
        08:07
      • 1.19 Margin And Padding
        04:39
      • 1.20 Cursor
        02:55
      • 1.21 Display
        05:49
      • 1.22 Overflow
        02:26

  • Designing A Website in Photoshop

    Preview

    • Section 1 - Introduction

      02:09Preview
      • 1.1 Introduction
        02:09

    • Section 2 - Desiging The Logo

      12:12Preview
      • 2.1 Desiging The Logo In Adobe Illustrator - Part 1
        05:56
      • 2.2 Designing The Logo In Adobe Illustrator - Part 2
        06:16

    • Section 3 - The First Design Visual

      41:36Preview
      • 3.1 Desigining In Photoshop And GIMP
        09:28
      • 3.2 Designing The Header And Top Navigation Bar
        13:13
      • 3.3 Designing The Heading Main Image And Body Text In Photoshop
        04:34
      • 3.4 Designing The Sidebar And Footer In Photoshop
        07:47
      • 3.5 Final Tweaks Of The First Design Visual In Photoshop And GIMP
        06:34

    • Section 4 - Client Feedback

      06:13
      • 4.1 The First Design Visual
        06:13

    • Section 5 - Actioning The Clients Feedback

      16:06
      • 5.1 Amnedments In Photoshop - Part 1
        08:20
      • 5.2 Amnedments In Photoshop - Part 2
        07:46

    • Section 6 - Presenting The VIisuals To The Client

      24:07Preview
      • 6.1 How To Present A Visuals Of The Website To The Client
        06:59
      • 6.2 How The Website Responds To A Tablet In Photoshop
        07:28
      • 6.3 Showing How The Website Responds To A Smartphone In Photoshop
        09:40

    • Section 7 - Bouns Video

      09:07
      • 7.1 More Tips On Desigining Websites In Photoshop
        09:07

    • Section 8 - Conclusion

      04:18
      • 8.1 What Have We Learned
        04:18

  • CSS Floating Layouts

    Preview

    • Chapter 0 - Welcome To CSS Floating Layouts

      03:29Preview
      • 0.1 How To Build CSS Floating Layout
        00:46
      • 0.2 A Note About Set Up
        02:43

    • Chapter 1 - CSS Float Fundamentals

      39:55Preview
      • 1.1 Basic Floating
        10:29
      • 1.2 Using Floats On Multiple Items
        07:08
      • 1.3 Introducing Clear
        04:38
      • 1.4 A Practical Example Creating A Thumbnail Gallery With Float And Clear
        17:40

    • Chapter 2 - Building A Flexible Layout

      26:00Preview
      • 2.1 Creating Layouts Using Floats
        04:59
      • 2.2 Setting Properties And Testing The Layout
        07:30
      • 2.3 Inserting The Header
        04:20
      • 2.4 Inserting The Footer And Finalizing
        06:09
      • 2.5 Understanding How The Layout Works
        03:02

    • Chapter 3 - Building A Combination Flexible Fixed Layout

      28:57Preview
      • 3.1 Creating A Combination Flexible Fixed Layout
        05:06
      • 3.2 Adding In Some Dummy Content
        02:13
      • 3.3 Setting Properties Part 1
        07:00
      • 3.4 Setting Properties Part 2
        07:32
      • 3.5 Final Layout Options
        07:06

    • Chapter 4 - Building A Fixed Layout

      28:05Preview
      • 4.1 Creating A Fixed Layout
        03:40
      • 4.2 Setting Properties Part 1
        04:21
      • 4.3 Setting Properties Part 2
        12:16
      • 4.4 Final Layout Options
        07:48

    • Chapter 5 - Bonus Videos

      28:58Preview
      • 5.1 Building Dreamweaver CS3 CS4 Essentials Layouts Using Floats Part 1
        08:15
      • 5.2 Building Dreamweaver CS3 CS4 Essentials Layouts Using Floats Part 2
        08:57
      • 5.3 Creating Floating Layouts In Dreamweaver
        11:46

    • Chapter 6 - Conclusion

      01:59Preview
      • 6.1 Conclusion
        01:59

  • CSS and CSS3 Programming For Absolute Beginners

    Preview

    • CSS and CSS3 Programming For Absolute Beginners

      02:16:57Preview
      • 1.1 Introduction And The Basics
        19:24
      • 1.2 Installing Notepad Plus Plus
        02:33
      • 1.3 Widths And Heights
        12:51
      • 1.4 Margins And Padding
        13:51
      • 1.5 Borders
        11:08
      • 1.6 Centering A Container
        10:21
      • 1.7 Display Property
        08:19
      • 1.8 Hiding An Element
        04:49
      • 1.9 Positioning
        11:00
      • 1.10 Font Basics
        13:44
      • 1.11 Text Alignment
        06:38
      • 1.12 Styling Links (Hyperlinks)
        13:23
      • 1.13 Styling Headers
        08:56

  • CSS and CSS3 Crash Course

    Preview

    • Module 1 - Introduction To The Course

      23:02Preview
      • 1.1 What Will You Learn
        01:05
      • 1.2 Introduction And The Basics
        19:24
      • 1.3 Installing Notepad Plus Plus
        02:33

    • Module 2 - CSS And CSS3 Basics

      02:07:25Preview
      • 2.1 Selectors (Part 1 Of 4)
        10:46
      • 2.2 Selectors (Part 2 Of 4)
        11:32
      • 2.3 Selectors (Part 3 Of 4)
        11:01
      • 2.4 Selectors (Part 4 Of 4)
        08:38
      • 2.5 Styling Links (Hyperlinks)
        13:24
      • 2.6 Widths And Heights
        12:51
      • 2.7 Positioning
        11:00
      • 2.8 Centering A Container
        10:21
      • 2.9 Colors
        10:52
      • 2.10 Display Property
        08:19
      • 2.11 Hiding An Element
        04:49
      • 2.12 Font Basics
        13:52

    • Module 3 - Intermediate CSS And CSS3

      03:25:49Preview
      • 3.1 Forcing Uppercase, Lowercase And Capitalisation
        05:46
      • 3.2 Text Alignment
        06:38
      • 3.3 Text Indenting
        11:24
      • 3.4 Borders
        11:08
      • 3.5 Rounded Borders
        11:58
      • 3.6 Margins And Padding
        13:51
      • 3.7 Overflow
        08:39
      • 3.8 Styling Headers
        09:03
      • 3.9 Floating Elements
        17:08
      • 3.10 Clearfix For Clearing Floats
        13:24
      • 3.11 Styling Unordere Lists
        09:20
      • 3.12 Horizontal Menu (Part 1 Of 2)
        12:51
      • 3.13 Horizontal Menu (Part 2 Of 2)
        13:38
      • 3.14 Vertical Menu
        12:10
      • 3.15 Creating A Button
        11:14
      • 3.16 Backgrounds
        12:35
      • 3.17 Multiple Background Images
        09:08
      • 3.18 Background Size
        06:04
      • 3.19 Border Images
        09:50

    • Module 4 - Advanced Intermediate CSS And CSS3

      01:38:30Preview
      • 4.1 Sprite
        14:40
      • 4.2 Element Shadows (Box Shadow)
        07:29
      • 4.3 Text Shadows
        10:44
      • 4.4 Opacity
        06:24
      • 4.5 Element Stack Order (z Index)
        07:39
      • 4.6 Image Overlay Effect (Part 1 Of 2)
        09:43
      • 4.7 Image Overlay Effect (Part 2 Of 2)
        11:35
      • 4.8 2D Transformations (Part 1 Of 4)
        03:37
      • 4.9 2D Transformations (Part 2 Of 4)
        11:36
      • 4.10 2D Transformations (part 3 Of 4)
        09:28
      • 4.11 2D Transformations (Part 4 Of 4)
        05:35

    • Module 5 - Build Your First Website

      02:25:23Preview
      • 5.1 Basic Site Layout (Part 1 Of 3)
        11:29
      • 5.2 Basic Site Layout (Part 2 Of 3)
        14:13
      • 5.3 Basic Site Layout (Part 3 Of 3)
        14:11
      • 5.4 Styling Tables (Part 1 Of 2)
        13:38
      • 5.5 Styling Tables (Part 2 Of 2)
        10:45
      • 5.6 Cursors
        07:37
      • 5.7 Box Sizing
        07:48
      • 5.8 Styling Form Elements (Part 1 Of 2)
        11:45
      • 5.9 Styling Form Elements (Part 2 Of 2)
        07:00
      • 5.10 Dashed Link Underline
        07:03
      • 5.11 Drop Down Style Menu
        14:43
      • 5.12 Quick And Easy CSS Triangles
        03:37
      • 5.13 Pure Dropdown List Menu (Part 1 Of 2)
        09:45
      • 5.14 Pure Dropdown List Menu (Part 2 Of 2)
        11:49

    • Module 6 - Fun Advanced Topics

      48:40Preview
      • 6.1 Creating Cube With CSS3
        18:55
      • 6.2 Create A Avatar Profile Picture Effect
        03:54
      • 6.3 Create A Speech Bubble In Comment List
        13:21
      • 6.4 Create A Headline Backgroung Effect
        12:30

  • Creating a Business Website with a Responsive Design

    Preview

    • Section 1 - Preparation

      24:25Preview
      • 1.1 Designing The Website Visual In Photoshop Part 1
        05:59
      • 1.2 Designing The Website Visual In Photoshop Part 2
        10:48
      • 1.3 Showing The Website Design To The Client
        07:38

    • Section 2 - Local Development

      02:54:54Preview
      • 2.1 Installing WordPress Locally Using MAMP
        04:39
      • 2.2 Installing The Genesis Theme Framework And Sample Child Theme
        12:21
      • 2.3 Renaming And Branding The Child Theme
        03:43
      • 2.4 Introduction To Developing Websites
        06:03
      • 2.5 Introduction To Genesis Theme Settings And Header Logo CSS
        09:37
      • 2.6 Styling The Top Navigation Links
        11:45
      • 2.7 Creating A Static Home Page And A Separate Blog Page
        03:45
      • 2.8 Creating Drop - Downs And Styling The Top Navigation Menu
        12:08
      • 2.9 Creating Backgrounds And Easier CSS
        06:20
      • 2.10 Headings Links And Typography
        06:24
      • 2.11 Adding Text And Images Into A WordPress Page
        11:17
      • 2.12 Styling The Sidebar Widgets
        13:47
      • 2.13 Styling Individual Sidebar Widgets
        02:38
      • 2.14 Creating The Social Profile Icons
        09:22
      • 2.15 Creating And Styling The Footer
        09:06
      • 2.16 Creating A Widgetized Page Template
        08:31
      • 2.17 Adding The Genesis Responsive Slider To The Home Page
        03:38
      • 2.18 Adding Content To The Genesis Responsive Slider
        05:19
      • 2.19 Styling The Genesis Responsive Slider
        10:59
      • 2.20 Home Page Headings
        05:34
      • 2.21 Responsive Design With CSS Media Queries
        17:58

    • Section 3 - Uploding The Site To The Host Server More Development And Going Live

      01:25:59Preview
      • 3.1 Setting Up The Website On The Hosts Server
        03:29
      • 3.2 Installing Wordpress Manually On Hosts Server
        03:22
      • 3.3 Uploading A Local Site To The Hosts Server
        06:09
      • 3.4 Creating An Under Construction Page
        18:13
      • 3.5 Adding 3 Featured Posts Widgets To Home Page
        11:23
      • 3.6 Styling The Three Featured Posts Widgets
        09:22
      • 3.7 Designing Blog Archive Pages
        07:07
      • 3.8 Creating A Contact Form In WordPress
        05:28
      • 3.9 Create An Email Subscription List
        14:57
      • 3.10 Giving Your Site A Favicon
        06:29

    • Section 4 - Conclusion

      02:17
      • 4.1 What To Do Now
        02:17

    • Section 5 - Extras

      15:05Preview
      • 5.1 HTML Genesis
        15:05

  • Create Stunning Promo Videos in 30 Minutes or Less

    Preview

    • Create Stunning Promo Videos In 30 Minutes Or Less

      39:20Preview
      • 1.1 Welcome
        00:19
      • 1.2 The Template We Will Be Using
        01:16
      • 1.3 See Some After Effects Template
        00:13
      • 1.4 iPad Template
        00:31
      • 1.5 White Space Template
        00:38
      • 1.6 Pop Up Book Template
        00:56
      • 1.7 Installing After Effects
        02:48
      • 1.8 Opening A Template
        03:14
      • 1.9 Interactive Tour Of After Effects
        00:30
      • 1.10 Introduction To After Effects
        03:35
      • 1.11 Editing Text
        05:59
      • 1.12 Changing Font Sizes And Moving Text
        02:21
      • 1.13 Adding Images
        04:23
      • 1.14 Adding Video
        04:01
      • 1.15 Adding A Logo
        02:59
      • 1.16 Rendering Your Video
        02:42
      • 1.17 Post Production Help
        02:55

  • Building Websites with Photoshop CC

    Preview

    • Building Websites With Photoshop CC

      04:57:26Preview
      • 1.1 Introduction
        01:21
      • 1.2 Heres What We'll Build (Free Lesson)
        02:13
      • 1.3 The Workflow Process (Free Lesson)
        03:53
      • 1.4 Setting Up Photoshop For Web Layout (Free Lesson)
        04:48
      • 1.5 Saving Our Photoshop Customizations (Free Lesson)
        07:06
      • 1.6 Structuring Layouts With Photoshop
        03:08
      • 1.7 Setting Up Our 960 Grid Template
        05:48
      • 1.8 Creating The First Wireframe Object
        04:31
      • 1.9 Continuing To Wireframe Objects
        04:45
      • 1.10 Additional Techniques For Wireframing
        11:37
      • 1.11 Finishing Up The Base Wireframe
        02:58
      • 1.12 Organizing The Layers And Resetting The Properties Panel
        06:01
      • 1.13 Roughing In The Header Content
        05:35
      • 1.14 Building Out The Hero Section
        08:02
      • 1.15 Wireframing The Introducing Section
        05:37
      • 1.16 Creating The Organize Section
        04:04
      • 1.17 Building The Get It Now Section
        03:25
      • 1.18 Finishing Up The Wireframe
        03:03
      • 1.19 Organizing And Colour Coding The Layers Panel
        04:55
      • 1.20 Adding Text Labels To The Wireframe
        03:48
      • 1.21 Exporting The Wireframe For Approval
        06:18
      • 1.22 Applying Design To The Wireframe
        10:13
      • 1.23 Gathering The Designs Resources Part Two
        08:14
      • 1.24 Creating The Site Logo With An lllustrator Smart Object
        06:38
      • 1.25 Using Layer Styles To Format Buttons
        08:00
      • 1.26 Saving And Using A Custom Style
        02:17
      • 1.27 Finishing Up The Header
        02:26
      • 1.28 Using Linked Smart Objects
        10:53
      • 1.29 Using Layer Masks To Position Content
        05:26
      • 1.30 Finishing Up The Hero Section
        03:51
      • 1.31 Designing With Clipping Groups And Linked Smart Objects
        12:44
      • 1.32 Developing The Organize And Share Sections
        04:18
      • 1.33 Finishing Up The Layouts Design
        03:35
      • 1.34 Getting The Layout Out Of Photoshop Into Code
        08:07
      • 1.35 Going Further With The Asset Generator
        12:48
      • 1.36 Getting The Layout s Assets Organized
        05:06
      • 1.37 Generating HTML With Photoshop
        12:34
      • 1.38 Getting Set Up For The Coding Phase
        09:22
      • 1.39 Adjusting The External Style Sheet
        04:47
      • 1.40 Setting Up The Structural CSS
        06:55
      • 1.41 Rebuilding The Layout With Code
        11:42
      • 1.42 Creating The App Store Header Button
        05:00
      • 1.43 Getting Started On The Hero Section
        04:48
      • 1.44 Finishing Up The Hero Area
        06:58
      • 1.45 Creating The Introducing Section
        06:58
      • 1.46 Odd Behaviour With Photoshops Copy CSS Command
        05:47
      • 1.47 Recreating The Organize And Share Sections
        05:05
      • 1.48 Building The Get Section And Footer
        03:09
      • 1.49 Wrapping Up The Project
        02:43
      • 1.50 Wrapping Up
        04:06

  • Building Responsive Websites with HTML5 and CSS3

    Preview

    • Building Responsive Websites with HTML5 CSS3

      03:29:50Preview
      • 1.1 Welcome
        00:48
      • 1.2 A Look At What We'll Build
        01:36
      • 1.3 Key Aspects Of Responsive Design
        02:43
      • 1.4 Determining Device Resolutions To Target
        04:20
      • 1.5 Wireframing Responsive Layouts
        04:59
      • 1.6 The Concept Of Using Multiple CSS Files
        10:50
      • 1.7 Media Queries and Multiple Style Sheets
        08:58
      • 1.8 Building Media Queries Into A Single CSS File
        07:38
      • 1.9 Using Media Query Expressions
        05:05
      • 1.10 Setting Up The HTML and CSS Files
        04:19
      • 1.11 Getting Started With The Header
        07:36
      • 1.12 Inserting The Main Nav Menu
        06:01
      • 1.13 Inserting The Search Field
        06:56
      • 1.14 Problems With Applying Floats
        04:19
      • 1.15 Integrating Google Fonts API
        03:25
      • 1.16 Building The Hero Section Structure
        04:26
      • 1.17 Formatting The Hero Section
        09:04
      • 1.18 Inserting and Formatting A Call To Action Button
        09:51
      • 1.19 Building The Features Section, Part One
        05:46
      • 1.20 Building The Features Section, Part Two
        04:57
      • 1.21 Inserting The Organize Section
        08:19
      • 1.22 Building The Share Section
        05:16
      • 1.23 Building The Call To Action Area
        06:36
      • 1.24 Inserting And Formatting The Footer
        03:48
      • 1.25 Finishing Touches For The High Resolution Layout
        04:07
      • 1.26 Setting Up The Medium Resolution CSS and Testing The Media Query
        07:02
      • 1.27 Formatting The Medium Res Header
        04:08
      • 1.28 Formatting The Medium Res Hero Section
        06:09
      • 1.29 Formatting The Features Section
        02:14
      • 1.30 Formatting The Organize And Share Sections
        05:17
      • 1.31 Building The Get Section and Finishing Up The Medium Res Layout
        02:53
      • 1.32 Setting Up The Low Res CSS and Testing The Media Query
        04:41
      • 1.33 Formatting The Low Res Header
        02:53
      • 1.34 Resolving Problems Caused By Floats
        04:22
      • 1.35 Formatting The Low Res Hero Section
        03:18
      • 1.36 Formatting The Features Section
        01:46
      • 1.37 Formatting The Organize And Share Sections
        02:59
      • 1.38 Building The Get Section and Finishing Up The Low Res Layout
        03:07
      • 1.39 Disabling Device Smart Zoom
        05:59
      • 1.40 Testing Your Responsive Layouts
        04:28
      • 1.41 Setting Up Retina Display Graphics
        06:22
      • 1.42 Where To Go From Here
        00:29

  • Applying Designs to WireFrames with HTML5 and CSS3

    Preview

    • Chapter 0 - Introduction

      03:22Preview
      • 0.1 Introduction
        01:56
      • 0.2 Here's What We'll Create In This Course
        01:26

    • Chapter 1 - From Wireframe To Design

      21:59Preview
      • 1.1 From Wireframe To Design
        05:16
      • 1.2 Choosing Your Designs Colour Palette
        06:39
      • 1.3 Tools For Selecting Typefaces
        05:18
      • 1.4 Choosing Imagery And Design Elements
        04:46

    • Chapter 2 - Getting The Design Underway

      50:51Preview
      • 2.1 Getting The Design Underway
        05:15
      • 2.2 Formatting Call To Action Buttons With CSS
        08:41
      • 2.3 Additional Shadow Effects To The Buttons
        03:11
      • 2.4 Finishing Up The Button Formatting
        05:40
      • 2.5 Typographic Treatments With Google Font API
        07:42
      • 2.6 Beginning The Features Section Styling
        05:29
      • 2.7 Finishing The Features Section
        04:08
      • 2.8 Formatting The Organize Section
        04:48
      • 2.9 Wrapping Up The Layouts Design
        05:57

    • Chapter 3 - Inserting and Formatting Graphics

      17:31Preview
      • 3.1 Inserting and Formatting Graphics
        02:49
      • 3.2 Setting Up The Hero Section Graphics
        04:53
      • 3.3 Getting The Feature Section Images Inserted
        03:04
      • 3.4 Placing The Organize and Share Images
        02:52
      • 3.5 Using A Graphic As A Button Label
        03:53

    • Chapter 4 - Cross-Browser Testing

      22:49
      • 4.1 Cross - Browser Testing
        08:07
      • 4.2 Running Virtual Operating Systems For Testing
        09:17
      • 4.3 Making Minor Adjustments For Browser Compatibility
        05:25

    • Chapter 5 - Wrapping Up

      00:29
      • 5.1 Wrapping Up
        00:29

  • Advanced HTML

    Preview

    • Advanced HTML

      25:03Preview
      • 1.1 Course Materials
        00:30
      • 1.2 The Doctype
        01:58
      • 1.3 Head Section (Part 1)
        06:15
      • 1.4 Head Section (Part 2)
        06:49
      • 1.5 Scripts
        01:18
      • 1.6 Hierarchy (DOM)
        04:08
      • 1.7 Entities
        04:05

Contact Us

1-844-532-7688

( Toll Free )

Reviews

  • Natalie Lopez

    Natalie Lopez

    I am in the process of starting a web and graphic design business. This course provided me with the information that I need to lay a good foundation up front. I highly recommend it to anyone looking to start a web design business

  • Grace Lee

    Grace Lee

    This course teaches exactly what it claims, and the content is top notch. If you are interested in running a web design business this class should be considered a 'must have'

  • Evelyn White

    Evelyn White

    This course contains a ton of information and it is all in one spot. You can actually put the skills acquired by this course to work

prevNext

Why Online Bootcamp

  • Develop skills for real career growthCutting-edge curriculum designed in guidance with industry and academia to develop job-ready skills
  • Learn from experts active in their field, not out-of-touch trainersLeading practitioners who bring current best practices and case studies to sessions that fit into your work schedule.
  • Learn by working on real-world problemsCapstone projects involving real world data sets with virtual labs for hands-on learning
  • Structured guidance ensuring learning never stops24x7 Learning support from mentors and a community of like-minded peers to resolve any conceptual doubts

FAQs

  • I want to know more about the training program. Whom do I contact?

    Please join our Live Chat for instant support, call us, or Request a Call Back to have your query resolved.

  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.
  • *According to Simplilearn survey conducted and subject to terms & conditions with Ernst & Young LLP (EY) as Process Advisors