Trainsimple - Dreamweaver CC Responsive Design with Bootstrap

TS | AVC 378kbps | English | 1280x752 | 29.97fps | 5h 01mins | AAC stereo 98kbps | 780 MB

Genre: Video Training

In this course, Dan Carr guides you through developing a responsive website in Adobe Dreamweaver using the Bootstrap framework. First, you'll learn about what responsive design is and it's role in modern web design. Next, Dan reviews all the features built into Dreamweaver for working with Bootstrap. Finally, you'll build a complete responsive website from a Photoshop mockup and test your site on various devices.

1. UNDERSTANDING BOOTSTRAP & DREAMWEAVER

2:22

Course Overview

2:15

What is Responsive Design?

3:32

How Does a Fluid Grid Work?

3:50

How Does Bootstrap Make Design Easier?

6:36

How Does Dreamweaver Make Design Easier?

7:19

So, What's the Workflow?

2. SETUP THE BOOTSTRAP PROJECT

2:13

Get the Supplied Files

2:46

Create a new Site

4:47

Create a CSS File for the Project

3:23

Create an HTML page and Add the Bootstrap Framework

4:00

Navigate the Page in the Dreamweaver Workspace

3. WORKING WITH THE BOOSTRAP GRID SYSTEM

4:28

Create a Grid

2:53

Build Rows and Columns in the Grid

3:50

Edit Rows and Columns in the Grid

5:09

Define Column Behavior Across Screen Sizes

5:08

Add Content to the Grid with Snippets

3:04

Preview Your Work

4. WORKING WITH BOOTSTRAP COMPONENTS

7:22

Component Overview

8:08

Working with Containers

11:01

Working with Navbars

:04

Working with Buttons

10:18

Working with Media

8:11

Working with Forms

8:49

Working with Pagination

5:28

Working with Jumbotrons

7:30

Working with Lists

5. BUILD PAGES FOR A WEBSITE DESIGN

4:54

Create a Page Template Header

6:03

Create a Page Template Footer

5:09

Customizing the Header CSS

2:48

Customizing the Footer CSS

6:07

Create the Index Page Jumbotron

5:17

Create the Index Page Calls to Action

3:49

Create the Features Page Video

7:00

Create the Features Page Content

6:39

Create the Gallery Page Carousel and Subimages

6:16

Create the Gallery Page Content

6:07

Create the Articles Page Part1

6:46

Create the Articles Page Sidebar Part1

6:27

Create the Articles Page Sidebar Part2

11:40

Create the Contact Page

6:10

Add Hyperlinks and Navigation Part1

4:44

Add Hyperlinks and Navigation Part2

6. ADD TEXT, IMAGES, AND CSS USING THE EXTRACT PANEL

3:39

Overview of the Photoshop Design Comps

4:24

Overview of Using Extract in Dreamweaver

4:18

Add Web Fonts to the Project

3:29

Styling the Landing Page Jumbotron Part1

5:00

Styling the Landing Page Jumbotron Part2

5:26

Styling Landing Page Calls to Action

5:42

Adding Media Queries to Landing Page

5:02

Adding Video to Features Page

4:57

Styling Features Page List

6:32

Adding Images to Gallery Page Carousel

5:15

Adding Subimages and Content to Gallery Page

5:10

Add Content to the Articles Page Part1

7:08

Add Content to the Articles Page Part2

8:40

Add Content and Branding to the Contact Page

3:19

Using Dreamweaver's Built-In Device Preview