Web Age Solutions Inc
Providing Technology Training and Mentoring For Modern Technology Adoption
Web Age Aniversary Logo
US Inquiries / 1.877.517.6540
Canadian Inquiries / 1.877.812.8887
Course #:WA2350

Responsive (Mobile) Web Design with Bootstrap Training

This 1 day class introduces students to responsive web design for desktop using Bootstrap. Students will begin by learning some of the fundamental technologies upon which Bootstrap is built like CSS Media queries and LESS. Students will progress to using Bootstrap to build simple and then more complex web sites.

Audience

Web developers and mobile web developers

Prerequisites

Some knowledge of HTML and CSS

Duration

1 day

Outline of Responsive (Mobile) Web Design with Bootstrap Training

Chapter 1. Getting Started with Bootstrap

  • What Is Bootstrap
  • Keywords from package.json
  • Bootstrap History
  • Responsive Web Development
  • Responsive Grid Layout
  • Reusable GUI Components
  • JavaScript
  • The Mobile First Philosophy
  • Why RWD Matters
  • Responsive Page Views
  • SASS
  • Getting Bootstrap
  • Bootstrap CSS Content Delivery Network
  • Bootstrap JavaScript Content Delivery Network
  • Other Setup Options
  • The Bootstrap Core Files
  • To Min or Not to Min
  • Summary

Chapter 2. Basic Bootstrap

  • Bootstrap Basic Page Template
  • The Viewport Meta Tag
  • The user-scalable Property
  • Including Bootstrap JavaScript Files
  • Plugin Dependencies
  • Resetting Styles
  • Bootstrap Components
  • Containers
  • Using Containers
  • Device Sizes
  • The Grid System
  • The Column Arithmetic
  • A Grid Example
  • CSS Media Queries (1/2)
  • CSS Media Queries (2/2)
  • Customizing Breakpoints
  • Responsive Grid Layout
  • Combining Column Styles
  • Other Column Operations
  • Navigation
  • Navigation (Desktop)
  • Navigation (Mobile)
  • Navigation Source
  • Navigation Explained
  • Navigation Elements and Styles
  • Icons
  • Using Icons
  • Responsive Images
  • Summary

Chapter 3. Bootstrap Miscellaneous Topics

  • Bootstrap Components
  • Bootstrap Components Web Page
  • Integrating Bootstrap Components with jQuery
  • Identifying the Required Version of jQuery
  • Customizing Bootstrap
  • Customizing Sass variables
  • More Customization
  • Customizing Bootstrap Components
  • Light Customizations Steps
  •  
  • Colors
  • Spacing
  • Notation (pt 1)
  • Notation (pt 2)
  • Notation (pt 3)
  • Summary

Chapter 4. Bootstrap Components

  • Bootstrap Components
  • Component List
  • Alerts
  • Breadcrumb
  • Collapse
  •  
  • List Group (with Badges)
  • Badges Example
  • Modal
  • Progress
  • Summary

Chapter 5. jQuery for Bootstrap

  • jQuery and Bootstrap
  • jQuery Example
  • CSS Selectors
  • Background – DOM
  • The jQuery Function Object
  • What Does the $() Function Take as Argument?
  • The jQuery Function – Case 1
  • The jQuery Function - Case 2
  • The jQuery Function – Case 3
  • The jQuery Function – Case 4
  • The jQuery Wrapper
  • The jQuery Wrapper as an Array-Like Object
  • Note: innerHTML() vs. .html()
  • jQuery Wrapper Chaining
  • API Function Notation
  • Selecting Elements by Attribute
  • Pseudo-Selectors
  • Faster Selection
  • Saving Selections
  • Iterating Through Selected Elements Using .each()
  • JavaScript Methods
  • JavaScript "this"
  • Function Context 1 of 2
  • .each() Revisited
  • Typical Use Cases
  • Handle a Menu Selection
  • Hide Content
  • Modify Content
  • Change a Style
  • Summary

Lab Exercises

Lab 1. Getting Started With Bootstrap
Lab 2. Bootstrap Flex
Lab 3. Bootstrap Grid
Lab 4. Responsive Images
Lab 5. Bootstrap Navbar
Lab 6. Build a Responsive App
Lab 7. Using jQuery with Bootstrap

We regularly offer classes in these and other cities. Atlanta, Austin, Baltimore, Calgary, Chicago, Cleveland, Dallas, Denver, Detroit, Houston, Jacksonville, Miami, Montreal, New York City, Orlando, Ottawa, Philadelphia, Phoenix, Pittsburgh, Seattle, Toronto, Vancouver, Washington DC.
US Inquiries / 1.877.517.6540
Canadian Inquiries / 1.877.812.8887