8340  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
By Request
$680 USD
Duration 1 day
Course Code WA2350
Available Formats Classroom

Overview

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

Schedule

Upcoming Course Dates

There are currently no scheduled dates for this course. If you are interested in this course, contact us with the form below.

Contact Information

FAQ

Does the course schedule include a Lunchbreak?

Classes typically include a 1-hour lunch break around midday. However, the exact break times and duration can vary depending on the specific class. Your instructor will provide detailed information at the start of the course.

What languages are used to deliver training?

Most courses are conducted in English, unless otherwise specified. Some courses will have the word "FRENCH" marked in red beside the scheduled date(s) indicating the language of instruction.

What does GTR stand for?

GTR stands for Guaranteed to Run; if you see a course with this status, it means this event is confirmed to run. View our GTR page to see our full list of Guaranteed to Run courses.

Does Ascendient Learning deliver group training?

Yes, we provide training for groups, individuals and private on sites. View our group training page for more information.

What does vendor-authorized training mean?

As a vendor-authorized training partner, we offer a curriculum that our partners have vetted. We use the same course materials and facilitate the same labs as our vendor-delivered training. These courses are considered the gold standard and, as such, are priced accordingly.

Is the training too basic, or will you go deep into technology?

It depends on your requirements, your role in your company, and your depth of knowledge. The good news about many of our learning paths, you can start from the fundamentals to highly specialized training.

How up-to-date are your courses and support materials?

We continuously work with our vendors to evaluate and refresh course material to reflect the latest training courses and best practices.

Are your instructors seasoned trainers who have deep knowledge of the training topic?

Ascendient Learning instructors have an average of 27 years of practical IT experience and have also served as consultants for an average of 15 years. To stay current, instructors spend at least 25 percent of their time learning new, emerging technologies and courses.

Do you provide hands-on training and exercises in an actual lab environment?

Lab access is dependent on the vendor and the type of training you sign up for. However, many of our top vendors will provide lab access to students to test and practice. The course description will specify lab access.

Will you customize the training for our company’s specific needs and goals?

We will work with you to identify training needs and areas of growth.  We offer a variety of training methods, such as private group training, on-site of your choice, and virtually. We provide courses and certifications that are aligned with your business goals.

How do I get started with certification?

Getting started on a certification pathway depends on your goals and the vendor you choose to get certified in. Many vendors offer entry-level IT certification to advanced IT certification that can boost your career. To get access to certification vouchers and discounts, please contact info@ascendientlearning.com.

Will I get access to content after I complete a course?

You will get access to the PDF of course books and guides, but access to the recording and slides will depend on the vendor and type of training you receive.

How do I request a W9 for Ascendient Learning?

View our filing status and how to request a W9.

Reviews

Exit certified was great as it is very in depth and hands on learning which made it very easy to learn this type of work.

Great and very intuitive. Better than the traditional hit the wrong button/lose points.

You get detailed labs to guide you through the technical material giving you a hands on method of learning otherwise difficult material.

Course was great and informative. The instructor had a good flow and was very personable.

I was very pleased with the course setup by ExitCertified and the instructor.