How to Make a Responsive Web Design with Bootstrap and Dreamweaver CC 2015

Bootstrap – the popular HTML, CSS, and JavaScript framework for building responsive mobile-first websites – has been fully integrated into Dreamweaver CC 2015. The combo puts responsive web design within reach of all Creative Cloud members. This project-based course will show you how to define a Bootstrap layout grid in Dreamweaver, and build a responsive webpage using Bootstrap components and Dreamweaver’s column tools. Author David Powers also shows how to add a hero image to your front page, create placeholder content with the text editor Emmet, and go straight to the DOM to move page elements around, avoiding the need to restructure the HTML.

Topics include:
– 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.

Exercise files download from:

Leave a Reply

Your email address will not be published. Required fields are marked *