06/05/2023 - 06/05/2023
10:00 AM - 06:00 PM
Online Virtual Class
USD $680.00
Enroll
06/12/2023 - 06/12/2023
10:00 AM - 06:00 PM
Online Virtual Class
USD $680.00
Enroll
07/03/2023 - 07/03/2023
10:00 AM - 06:00 PM
Online Virtual Class
USD $680.00
Enroll

Audience

Web developers and mobile web developers

Prerequisites

Some knowledge of HTML and CSS

Duration

1 day

Lab Setup Guide

Outline for 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