Dreamweaver CC 2015: Responsive Design with Bootstrap

Learn how to build a responsive web design with Bootstrap and Dreamweaver CC 2015.

Introduction

• Welcome
• What you should know before watching this course
• Using the exercise files

1. Getting Started

• Understanding how Bootstrap works
• Setting up the Dreamweaver workspace
• Defining the Bootstrap layout grid

2. Creating the Site Navigation

• Inserting a navigation bar
• Editing the links
• Creating a dropdown menu
• Styling the navigation bar
• Adding a background image to the brand

3. Adding a Hero Image

• Adding a container for the page content
• Inserting the hero image
• Positioning the page heading over the image

4. Working with Columns

• Resizing columns
• Duplicating columns with placeholder text
• Using Paste Special in Live View
• Clearing columns of uneven length
• Creating the feature section
• Adjusting the layout and styling the feature section
• Adding more content
• Adding the page footer
• Hiding elements
• Adding extra pages

5. Using Device Preview

• Connecting to a mobile device
• Using CSS Inspect with Device Preview

Conclusion

• What next?