Learn how to create websites that work well on any device. This course guides you through developing a responsive website in Adobe Dreamweaver using the Bootstrap framework. Software required: Dreamweaver CC.
You, too, can create websites that function well and look great whether they're accessed on a desktop, tablet, or mobile phone. This course, Dreamweaver CC Responsive Design with Bootstrap, guides you through developing a responsive website in Adobe Dreamweaver using the Bootstrap framework. First, you'll learn about what responsive design is and its role in modern web design. Next, you'll review all the features built into Dreamweaver for working with Bootstrap. Finally, you'll build a complete responsive website from a Photoshop mock-up and test your site on various devices. By the end of this course, you'll be able to develop great websites for any device that your users will love. Software required: Dreamweaver CC.
Course Overview This course introduces you to creating responsive web pages using Bootstrap and Dreamweaver. Along the way you'll learn about responsive design, how Bootstrap uses CSS to create responsive layouts, and how to use Dreamweaver to easily learn Bootstrap CSS, and craft your page design. The beginning of the course will walk you through key concepts, including how to work with HTML and CSS, how to work with layouts along the Bootstrap grid system, and how to work with predefined Bootstrap components in Dreamweaver. Toward the end of the course you'll shift your focus to intermediate concepts, including building the structure of a website project, branding the website project with supplied Photoshop files, and previewing the website project across devices, so let's start by taking a look at the project in a browser. You can see that the website has a simple design that adapts to the size of the screen. As I move the width of the browser back and forth you can see that the design adjusts itself to always show content at any size. The site includes five pages each representing a common layout that you might want to create. There's a landing page, with a simple grid layout, a Features page, with a video layout and supporting list content, a Gallery page has a carousel design along with text and a grid, an Articles page, as a simple article blog style layout, and finally, a Contact page that has a form, as you might create it, for submitting contact information, and here's the completed project in Dreamweaver. You can see in the Files panel that you'll be creating a number of assets, including HTML, CSS, and image files that you'll extract from Photoshop design comps. You can see from looking at the workspace that you'll be working both in code, and in the live representation of code in live view where you see a preview, and using the various panels and tools that Dreamweaver supplies to help you understand Bootstrap, and work through customization. In lesson 2 you'll go over everything you need to know to setup the project. For now, let's dive into key concepts that'll help you speed through the course.