8119  Reviews star_rate star_rate star_rate star_rate star_half

Responsive (Mobile) Web Design with Bootstrap

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...

Read More
View Full Schedule Train Your Team
$680 USD
Course Code WA2350
Duration 1 day
Available Formats Classroom, Virtual

Upcoming Course Dates

  • Nov 4, 2024 - Nov 4, 2024 (1 day)
    Virtual
    Language Time
    English 10:00 AM – 6:00 PM EST
    Select delivery method/location  (1 options)
    Virtual | 10:00 AM – 6:00 PM EST
    Virtual | 10:00 AM – 6:00 PM EST
    Enroll
    Enroll
    SAVE 20% on this course -
    Promo Code: TRAIN20
Ask a Question Request Other Date Request On-site Course

Overview

Schedule

FAQ

Reviews

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.

Who Can Benefit

  • Web developers and mobile web developers

Prerequisites

  • Some knowledge of HTML and CSS

Course Details

Outline

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
Read Less
|
View Full Schedule
View Full Schedule