Released
12/1/2015- Defining a custom Bootstrap layout grid
- Inserting and modifying a navigation bar
- Adding a container for a hero image
- Working with columns inside a Bootstrap container
- Creating placeholder content with Emmet
- Speeding up layout by duplicating columns
- Moving page elements in the DOM
- Previewing the mobile webpage with Device Preview
Skill Level Intermediate
Duration
Views
- Hi, I'm David Powers. Welcome to Responsive Design with Bootstrap and Dreamweaver CC 2015. Bootstrap is the most popular HTML, CSS and JavaScript framework for building web pages that automatically adapt to the available screen width and it's fully integrated in the latest version of Dreamweaver CC. In this course, I'll show you how to create a customized Bootstrap layout grid, how to edit and style a navigation bar and then I'll show you how to layout the content of an attractive web page using Dreamweaver's visual tools including the visual media queries bar.
You'll see how to create placeholder content quickly with Emmet, which expands CSS selectors into HTML. And then I'll show you how to duplicate page elements in Live View. You'll also see how to use the DOM Panel to duplicate and move page elements without the need to dive directly into the underlying HTML. These are all techniques that you'll find useful building any type of web page, even if you decide Bootstrap's not for you. So let's get started with Responsive Design with Bootstrap and Dreamweaver CC 2015.
Share this video
Embed this video
Video: Welcome