Course Catalog  > Web and Mobile Development  > Mobile Development
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.
Request Information
Request On-Site or Customized Course Info
Course Details

Duration

1 day

Prerequisites

Some knowledge of HTML and CSS.

Target Audience

Web developers and mobile web developers.
Course Outline
  • 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
  • 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
  • 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
    • Notations
  • Bootstrap Components
    • Bootstrap Components
    • Component List
    • Alerts
    • Breadcrumb
    • Collapse
    • List Group (with Badges)
    • Badges Example
    • Modal
    • Progress
  • 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
    • 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
  • 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