Introduction to Bootstrap with Sass (BTS111)
Course Length: 3 days
Delivery Methods:
Available as private class only
Course Overview
In this 3-day course, students will learn how to design, develop, and manage responsive web and mobile sites and applications using Bootstrap 4 and Sass.
Course Benefits
- Learn to install Bootstrap and Sass.
- Learn to use Bootstrap for Typography.
- Learn to create responsive forms with Bootstrap.
- Learn to work with images in Bootstrap.
- Learn about Bootstrap's helper utilities.
- Learn about Bootstrap's components for creating modern web user interfaces.
- Learn to use Bootstrap's JavaScript plugins for making sites interactive.
- Learn to customize Bootstrap.
- Learn to write SassScript to simplify and speed CSS development.
- Learn to create functions in Sass.
- Learn to use Sass together with Bootstrap.
- Learn the best practices for managing Sass and Bootstrap code.
- Learn to create Sass Mixins.
- Learn how to test Sass code.
- Learn how to deploy and maintain Sass and Bootstrap code in a professional environment.
Course Outline
- Bootstrap Basics
- Global Styles
- Grid System
- Bootstrap Typography
- Globals and Blocks
- Inline Elements
- Alignment
- Lists
- Tables
- Bootstrap Forms
- Inline Forms
- Horizontal Forms
- Input Types
- Buttons
- Images, Helper Classes, Utilities
- Images
- Other Helper Classes
- Responsive Utilities
- Bootstrap Components
- Glyphicons
- Drop-down Menus
- Navigation Elements
- Breadcrumbs
- Pagination
- Labels
- Badges
- Jumbotron
- Page Header
- Thumbnails
- Alerts
- Progress Bars
- Media Objects
- List Group
- Panels
- Responsive Embed
- Wells
- Bootstrap JavaScript Plugins
- Events
- Modals
- Dropdown
- Scrollspy
- Tabs
- Popover
- Alerts
- Buttons
- Collapse
- Carousel
- Affix
- Advanced Topics
- Customizing Bootstrap
- Introduction to Bootstrap
- Introduction to CSS Preprocessing
- What's wrong with CSS?
- What is a CSS Preprocessor?
- SASS Basics
- Installing and Configuring Sass
- Using Sass with Bootstrap
- Sass vs. SCSS Syntax
- Output Styles
- Organizing and Including Sass Code
- Partials
- Code Organization
- SassScript
- Comments in Sass
- SassScript Data Types
- Using Variables in Sass
- Operations in Sass
- Numeric Operations
- Color Operations
- String Operations
- Interpolation in Sass
- Boolean Operations
- List Operations
- Control Directives and Expressions
- If() and &if
- &for
- each
- while
- Functions in Sass
- Using Built-in Functions
- Define Your Own Functions
- &-Rules and Directives
- &import
- &media
- &extend8
- &debug, &warn, &error
- Nesting
- The Inception Rule
- Namespaced Properties
- Mixins
- Mixin Directives
- Arguments in Mixins
- Including Mixins
- Finding and Using Mixin Libraries
- Testing and Debugging Sass
Class Materials
Each student will receive a comprehensive set of materials, including course notes and all the class examples.
Class Prerequisites
Experience in the following is required for this Bootstrap class:
- CSS
- HTML
- Some familiarity with JavaScript
Prerequisite Courses
Courses that can help you meet these prerequisites: