Responsive Web Development in Bootstrap

Introduction

• What you’ll learn in this training
• What is responsive design?
• What is needed to design responsive websites?
• Testing your responsive design in a browser

Media Queries

• What is a media query?
• Media query syntax
• Creating media queries for various devices
• Media queries in actions
• Media query order and other conditions
• Controlling text formatting with media queries
• Changing layout based on media queries
• Creating media queries using Adobe Dreamweaver

Responsiveness Components

• Declaring the viewport meta tag
• Default template overview
• Creating responsive grid layout pt. 1
• Creating responsive grid layout pt. 2
• Changing grid layout based on screen size (desktop to tablet)
• Changing grid layout based on screen size (desktop to phone)
• Creating responsive column resets
• Changing button sizes
• Creating responsive images
• Setting the visible of property
• Setting the hidden on property

Creating a Responsive Website Layout

• Applying what you learned, project overview
• Building the layout pt. 1 – set up
• Building the layout pt. 2 – adding Bootstrap components
• Building the layout pt. 3 – linking the Bootstrap files
• Adjusting for various desktop sizes
• Adjusting for tablet sizes
• Adjusting for phone sizes pt. 1
• Adjusting for phone sizes pt. 2
• Adjusting the page for printing
• Making the site non-responsive