UI/UX Design Training/Course by Experts
Our Training Process
![](/img/training-online-free.png)
UI/UX Design - Syllabus, Fees & Duration
Module 1 :The Background
- The mobile space today
- Advantages
- Challenges
- Native vs. web, is really a question?
- What is JQM?
- What is not jQM?
- What is a web app?
- Why jQM?
- Features
- Compatibility
- Requirements
Module 2: HTML5 basics
- Requirements
- HTML5 in a small nutshell
- Why HTML5?
- What do we need to know about HTML5 for jQM
- Basic template
- Testing HTML5 documents
- Emulators, Simulators & more & Viewports on mobile browsers
Module 3: The framework
- Architecture of Self hosted vs. CDNs
- Main template
- CDNs available
- Main template
- Support on IDEs
- Roles
- Theming
Module 4: The page
- Headers and footers basics
- Mandatory items in a page
- Working with HTML in the content
- Navigation
- Internal page navigation
- External page navigation
- Understanding AJAX on mobile browsers
- Absolute external links
- Mobile Special links
Module 5: UI Components
- Customizing toolbars
- Positioning toolbars
- Navigation Bars
- Persistent footers and navigation
- Collapsible content
- Working with columns
Module 6: Buttons
- Creating buttons
- Inline buttons
- Grouped buttons
- Icons
- Custom icons
Module 7: Lists
- Creating lists
- Full-page vs inset-lists
- Visual separators
- Nested lists
- Interactive rows, Split button rows
- Split button rows
- Thumbnails
- Count bubbles
- Aside content
- Title and Description
- Filtering data
Module 8: Forms
- AJAX vs. non-AJAX forms
- Automatic form behaviour
- Labeling
- Field containers
- Text fields
- Slider, Slider switch
- Select menus, UI Select menus
- Radio Buttons
- Checkboxes, File Upload
- Validation using HTML5
Module9: The framework and JavaScript
- Using jQuery inside jQuery Mobile
- mobile element
- The mobile init event
- Configuring defaults
- Touch events, Orientation events
- Scroll events, Page events
- Virtual mouse events
- Managing navigation through JavaScript
Module 10: Dynamic data with jQuery Mobile
- HTML5 vs AJAX
- Bringing JSON data to jQuery Mobile
- Updating form controls
- Updating lists
- Implementing Infinite list pattern
Module11: Extending the framework
- Using plugins
- The top 5 plugins for jQuery Mobile
- Creating our own plugin
- Plugin architecture
- Understanding CSS architecture
- Define our own CSS patch
- Changing CSS behavior
Module12: Managing data with HTML5
- Using Web Storage and Web SQL
- Using geolocation
Module 13: Packaging for installation and stores
- The offline manifest
- Full-screen web apps for iOS
- What is a hybrid
- Phone Gap vs other alternatives
- Packaging a sample application
Section 1
Creating New Files & Designing on a Grid
- Creating a new file
- Setting up artboards
- Importing text
- Creating colored backgrounds for text
Importing & Cropping Photos
- Importing a photo as an image fill (crop a photo)
- Rounding corners
Vector Graphics, Colors, Shadows, & More
- Importing & modifying vector graphics
- Aligning & distributing layers
- Layer opacity vs. fill opacity
- Reusing colors (color swatches)
- Adding a drop shadow
Character Styles
- Creating & Editing Character Styles
Section 2
Repeat Grids
- Creating a Repeat Grid
- Customizing the content
- Adjusting the design
Components (Reusable Elements)
- Creating & editing components
- Overriding content in one instance vs. globally updating all components
- Detaching from a component
- Components versus Repeat Grids
Turning a Design into a Clickable Prototype
- Linking between artboards Previewing the prototype Creating an overlay Background blur Fixing the position of elements so they don’t scroll Making a recording of a prototype
Exporting Assets for Web: SVG, JPEG, & PNG
- Exporting individual assets Exporting artboards
Sharing XD Files (For Review, Developers, etc.)
- Sharing an XD file Commenting on shared files Pinning a comment Updating an existing shared file Sharing for Development
Section 3
Stacks, Padding, & Responsive Resize
- Creating a Stack & Adjusting the Spacing Rearranging & Adding Items to a Stack Responsive Resize, Stacks, & Padding Keystrokes for Working with Stacks & Padding Nesting Stacks (Stacks Within Stacks)
Linking Up/Down a Page & Scrollable Areas
- Making Links that Scroll Up/Down a Page Making the Navbar Fixed to the Screen Adjusting the Position & Speed of the Scroll Creating a Scrollable Area Within a Page
Intro to Auto-Animate
- The Basics of Auto-Animate Different Kinds of Easing Adding a Timed Animation
Parallax Animation
- Setting Up the Parallax Assets
- Building the Parallax Animation
Component States (Hover & More)
- Adding a Hover State to a Button
- Custom Component States
Section 4
Creating 3D Transforms
- Adding 3D Transforms Front to Back versus Z Position
Adding Interactions to a Slideshow: Tap, Drag, & Keys
- Creating a Working Slideshow Prototype
- Adding Tap Interactions
- Adding the Ability to Drag
- Adding Keystrokes
Time Interactions & Adding Audio (Sound Effects)
- Adding a Drag Interaction
- Adding a Time Interaction
- Adding a Sound Effect
- Adding a Keystroke
Linked Components & Shared Libraries
- Linked Components
- Shared Libraries
Section 1
- Using the Pen Tool
- Adjusting the Workspace
- Arranging Objects
- Color Fills
Straight Lines
- Drawing Curves (Pen Tool)
- Anchor Points and Direction Points
- Default Fill and Stroke
Curves
- Drawing Corners and Curves (Pen Tool)
- Adjusting Anchor Points
Corners and Curves
Section 2
- Fill and Stroke
- Basic Shape Tools
- Grouping Objects
- Layers Panel
- Working with Templates
No Smoking Sign
- Live Trace and Live Paint
- Tracing Hand-Drawn Images
- Coloring Live Paint Objects
- Brushes
- Flare Tool
Super Hero
Section 3
- Compound Paths
- Group Selection Tool
What’s Behind the Green Door?
- Clipping Masks (Shapes)
- Blob Brush Tool
- Eraser Tool
- Reflect Tool
Mask Till You Drop
- Type Tool
- Clipping Masks (Editable Type)
- Filling Text with a Photo
- Placing Linked Images
Masking with Type
- 3D Extrude & Bevel
- Creating Symbols from Artwork
- Mapping Symbols onto 3D Objects
- Lighting and Shadows for 3D Objects
3D Shape: Milk Duds Box
Section 3
- Blend Tool
- Blending Options
Will It Blend?
- Blending Lines
- Reflect Tool
- Rotate Tool
Wavy Line Blend
- Dashed Lines and Stroke Options
- Saving Colors as Swatches
- Blending Modes
- Gradient Tool
- Saving Gradient Swatches
Juggling Colors and Gradients
- Merging Paths (Pathfinder)
- Transparency Options
- Grouping Objects
Combining Shapes with the Pathfinder
Section 5
- Creating and Applying Pattern Swatches
- Scaling and Rotating Patterns
- Working with Layers
- Align Panel
Patterns
- Working with Type
- Text and Character Options
- Adding a Drop Cap
- Type on a Path
- Text Wrap
- Fill Text with a Pattern
One-Page Advertisement
- Using the Appearance Panel
- Transparency
- Blending Modes
- Drop Shadows
- Arrowheads
Stylin’ Effects
- Graphic Styles
- Appearance Panel
- Multiple Fills
- Auto-sizing Text Boxes
Appearance and Graphic Styles
Section 6
- Adding and Removing Layers
- Creating and Using Multiple Artboards
- Recoloring Artwork
Layers, Artboards & Recoloring Artwork
HTML-Introduction
- Web Development Introduction
- History of HTML
- HTML Tags and Attributes
- HTML Tag vs. Element
Basic Formatting Tags
- HTML Basic Tags
- HTML Head Tag
- HTML Meta Tag
- HTML Formatting Tags
- HTML Color Coding
Lists
- Unordered Lists
- Ordered Lists
- Definition list
Images
- Image and Image Mapping
Hyperlink
- URL - Uniform Resource Locator
- URL Encoding
HTML-Table
HTML-Headers
- Title
- Base
- Link
- Styles
- Script
- Meta
HTML5 forms
- Introduction to HTML5 forms
- Accessible forms
- New Input types
- New forms attributes
- Form validation
Graphics
- Basics of HTML5 canvas
- Immediate drawing mode: rectangles, text, images, etc.
- Path drawing mode: lines, circles, arcs, curves, etc.
- Colors, gradients, patterns, shadows, etc.
- Working with SVG in HTML5
HTML5 animations
- Basic animation techniques
- Canvas and user interaction
- Working with pixels
- Understanding transforms
API
- Introduction to HTML5 APIs
- The Web Storage API
- Form validation API
- The File API
- The Geolocation API
GETTING TO KNOW YOUR WORKSPACE
- Menu bar, application bar, options bar, tools panel, panel dock on right
- Differences on PC and Mac
- Different ways to zoom
- Hidden tools on toolbar
BASIC SELECTIONS
- Why make selections?
- Geometric selections
- Freehand selections
- Edge-based selections
- Color-based selections
- How do I choose a selection tool?
ADJUSTMENT PANEL
- Making color and tonal adjustments
- Creating an adjustment layer
- Adjustment presets,
- Common image corrections
- Saving adjustments as a preset
- Deleting adjustment layer
- Applying adjustment layer to another layer
TOOL BAR TOOLS
- Blur tool
- Sharpen Tool
- Smudge Tool
- Dodge Tool
- Burn Tool
- Sponge Tool
BASIC PHOTO CORRECTIONS
- Image menu
- Color mode
- Image resolution and size
- Straighten and crop image
- Rotate cropped image
- Automatic adjustments
- Auto color—removes color cast
- Manually adjusting color cast
- Manually adjusting tonal range
- Replacing color
- Clone tool
- Spot healing brush
- Healing brush
- Patch tool
- Content-aware fill (NEW TO CS5!)
LAYERS
- Background layer
- Isolating part of image
- Hide, view, reposition, delete, rename, merge
- Lock layers
- Convert background layer to regular layer
- Convert regular layer to background layer
- Layer styles
- Applying layer styles to multiple layers
GRADIENTS
- Gradient tool
- Gradient styles
- Editing colors
- Saving gradients
MASKS
- How is it different than selection tools?
- Save time-consuming selections
- Quick mask mode
- Using brush tool
- Channels panel
- Loading mask as a selection
CAMERA RAW
- Unprocessed picture data
- Set up camera to save as camera raw
- Nikon (.nef)
- Canon (.crw)
- Olympus (.orf)
- Opening up other file formats in RAW
- Using Bridge vs. Photoshop
- White balance
- Adjust for different lighting settings
- Save as DNG file, open source file
- Exposure
- Fill light
- Sharpening an image
- Detail panel
- Synchronize across images
CORRECTING/ENHANCING DIGITAL PHOTOGRAPHS
- Shadows and highlights adjustment
- Correcting Red Eye
- Sharpening Edges
- Correct Image Distortion
- Adding Depth of Field
TYPE IN PHOTOSHOP
- Point v Paragraph Type
- character panel
- paragraph panel
- Type on a Path
- Warping Type
- Creating work path from type
- Convert type to shapes
- Horizontal/Vertical Type Mask Tool
- Create a selection in the shape of type
- Clipping Mask Type
- Open Type
CREATING VECTOR GRAPHICS IN PHOTOSHOP
- Bitmap v. Vector?
- Pen Tool
- Magnetic and freeform pen tool
- Using pen tool as selection tool
- Converting selections to paths
- Converting selection to layer
- Shape layers
- Smart Objects
AUTOMATING STEPS
- Recording actions
- Actions panel
- Record, play, edit, delete individual actions
Introduction
- HTML structure and content
- Advantages of CSS
- Creating and using style sheets
- CSS Rules: The Basic Syntax
CSS Boxes and CSS Selectors
- The CSS box model
- CSS and logical HTML structure
- Styling boxes, borders, margins, and padding
- Using IE6 standards mode
- Sh4ecifying CSS distances
- and many other CSS techniques
Fonts and Text
- Using custom fonts
- Font properties
- Web font formats
- Type Kit, font squirrel
Text Formatting in CSS
- Fundamentals of text formatting
- Typefaces, alternatives, and defaults
- Font characteristics
- Formatting blocks of text
- Using arbitrary inline tags
CSS Selectors and Selections
- Using HTML element IDs in CSS
- Using CSS descendant selectors
- Descendant selector examples
- Child, sibling, and pseudo-class selectors
- And many other CSS techniques.
CSS positioning
- Choosing the right CSS
- Technique for positioning blocks
- The position property, floats, and margins
- Static positioning and normal flow
- Absolute positioning outside normal flow
- Fixed positioning outside normal flow
CSS page Layout
- Alternative methods of CSS positioning
- Styling lists
- Redefining the behaviour of inline and block elements
- Table formatting in CSS
- Styling table cell borders
- page layout with table dish4lay properties
Cascade, precedence, Specificity, and Inheritance in CSS
- Cascading and cascade order
- Resolving style conflicts by Origin & Importance
- Resolving style conflicts by Specificity & Order
CSS Layers and Translucency
- Different forms of layered presentations in CSS
- Layering with the z-index property
- Different methods for creating translucency effects
- The CSS3 opacity property
Using CSS in the Real World
- Deploying CSS
- CSS formatting vs. HTML formatting
- Standard tags and semantic markup
- Screen size and fluid design
- Table layout and CSS positioning
- Cross-platform testing
Useful CSS Tips
- Usage of CSS Sprites
- Pseudo Selectors
- CSS Minify
- Cheat Sheet for CSS3
MODULE 1: Fundamentals of JavaScript Code
- JavaScript methods (such as alerts)
- Variables
- The importance of quotes
- Numbers vs. strings
- Concatenation
MODULE 2: Reusing Code with Functions
- Defining functions
- Calling functions
- Defining parameters & passing arguments
- Simple Accordion with JavaScript
- Targeting elements by ID
- Hiding & showing elements with JavaScript
MODULE 3: If Statements: Clearing Form Fields
- Testing code in the JavaScript Console
- Getting & setting properties
- Using if statements
- Reshowing text hints in empty form fields
MODULE 4: Introduction to JavaScript Objects & the DOM
- Intro to objects
- The global object
- Breaking open and manipulating objects
MODULE 5: Dynamically changing content with custom objects
- Checking the functionality of the select menu
- Getting the chosen value
- Dynamically changing the state name value
- Dynamically changing the rest of the values
MODULE 6: Introduction to arrays and the math object
- Creating an array
- Editing an array
- Creating an array of welcome handlings
- The math object
- Using the math object to pick random headlines
MODULE 7: Introduction to for loops
- Creating a for loop
- Using the for loop to set dropdown menus
- Clearing the menu
- Optional bonus: refining the menu selection experience
MODULE 8: Exploring JavaScript selectors
- Intro to JavaScript selector
- Selecting multiple elements and elements without IDs
- Getting a specific list item
- Getting elements by class name
- Getting multiple items using query selector
- Getting a single item using query selector
- Chaining selectors together
- Targeting elements by data attribute
MODULE 9: Photo filter website: using friendly navigation
- Creating an array to store the selector
- Getting the all button to select all filters
- Getting the rest of the buttons to select the other filters
- Initially hiding the photos
- Getting the photos to filter
MODULE 10: Photo filter website: creating an executive filter
- Adding a checkbox to toggle executive filtering on/off
- Separating the inclusive and exclusive filter
- Writing a conditional to select the appropriate filter
- Programming the exclusive filter
- Rerunning the filter when the checkbox is toggled
- Improving the user experience
MODULE 11: Showing/hiding content with JQuery animation
- Getting started with JQuery
- Running code when the document is ready
- Click events
- Using the jQuery slide toggle method
- Supporting JQuery disabled users
MODULE 12: Sharing JavaScript across pages
- Externalizing JavaScript
- Linking to the JavaScript file
MODULE 13: JQuery hover animation
- Adding an outline with CSS
- Using the JQuery hover method
- Using the JQuery animate method
MODULE 14: More advanced JQuery showing/hiding
- Adding animation to reveal hidden content
- Targeting the proper div: traversing the document
- Swapping the button image with JQuery
MODULE 15: JQuery lightbox: a pop-up image viewer
- Linking the plugin files
- Initializing the pop-up
- Grouping the photos into a gallery
- Adding captions
- Removing the counter
- Customizing the appearance
MODULE 16: JQuery cycle: a simple slideshow
- Initial setup
- Defining what content gets cycle
- Adding more cycles and exploring options
- Reversing the animation
MODULE 17: JQuery cycle: adding slideshow controls
- Preventing a possible “flash of unstyled content’’
- Enabling the slideshow
- Adding and customizing the controls
MODULE 18: JQuery cycle: adding a pause button
- Adding a pause/play button
- Styling the pause/play button
- Checking to see if the cycle is paused
- Making the pause/play button work
MODULE 19: JQuery form validation
- Initializing the plugin & setting options
- Customizing the error messages
- Changing the location of the error messages
- Styling the error messages
MODULE 20: JQuery Image Carousel
- Linking to the plugin files
- Creating the carousel
- Styling the carousel
- An easy way to add prev & next buttons
- Adding custom prev & next buttons
- Setting how many items are shown
Introduction to
- InDesign tools
- The InDesign workspace
- The document window
- Using guides
- Viewing modes
- Working with panels
- The Tools panel
- Managing panels
- Working with the Control panel
- Saving your workspace
- Navigating through an InDesign document
- Using the Pages panel
- Changing the magnification of your document
- Working with type
- Entering and formatting type
- Placing and formatting type
- Flowing type
- Using styles
- Applying paragraph styles
- Applying character styles
- Applying object styles
- Working with graphics
- Placing graphics
- Positioning graphics within a frame
- Applying text wrap
- Understanding layers
- Applying effects
Building Documents with Master Pages
- Creating custom page sizes
- Creating a new custom-sized document
- Creating and formatting master pages
- Adding automatic page numbering
- Basing master pages on other master pages
- Overriding master page items
- Adding layout pages
- Adding images and text to the master frames
- Applying master pages to multiple pages
Working with Text and Type
- Adding text to your document
- Creating a text frame
- Changing character attributes
- Changing font and type styles
- Adjusting size
- Adjusting line spacing
- Adjusting character spacing:
- kerning and tracking
- Using a baseline shift
- Changing paragraph attributes
- Horizontally aligning text
- Changing the spacing before and after paragraphs
- Using tabs
- Adding rules above or below paragraphs
- Changing text color
- Creating drop caps
- Checking and correcting spelling
- Finding and changing text and text attributes
- Adding words to the dictionary
- Checking spelling as you type
- Automatically correcting spelling
- Editing text using the Story Editor
- Drag-and-drop text editing
- Special characters and glyphs
- Using the Glyphs panel and glyph sets
- Text frame options
- Adjusting text inset
- Vertically aligning text
- Importing text
- Flowing text manually
- Threading text between frames
- Using semi-autoflow to link several text frames
- Changing the number of columns in a text frame
- Baseline grid
- Viewing and changing the baseline grid
- Adding story jumps
- Using styles to format text
- Creating a headline and applying a style
- Redefining styles
- Type on a path
- Importing text from Microsoft Word
- Missing fonts
- Finding and fixing missing fonts
Working with Styles
- Style types
- Paragraph styles Applying a paragraph style
- Character styles
- Defining a character style
- Applying a character style
- Using nested styles
- Globally updating styles
- Loading styles from another document
- Quick Apply
- Organizing styles into groups
- Object styles
- Defining an object style
- Applying an object style
- Changing an object style
Working with Graphics
- Understanding how InDesign handles graphics
- Locating missing images
- Working with the Links panel
- Customizing the Links panel
- Adding graphics to your layout
- Fitting an image within an existing frame
- Auto Fitting
- Using Adobe Bridge to import graphics
- Placing multiple graphics using Mini Bridge
- Using object styles for images
- Wrapping text around images
- Wrapping text around the bounding box
- Using graphics with clipping paths and alpha channels
- Removing an image background using InDesign
- Using anchored objects
- Advanced importing
- Importing layered Photoshop files
- Importing InDesign layouts as graphics
Working with Tables
- Creating a table
- Creating new tables
- Copying and pasting table information
- Converting text to a table and a table to text
- Importing a table
- Editing tables and table options
- Changing row height
- Editing the border
- Formatting rows and columns
- Using fills
- Formatting cells and text
- Resetting the cell styles within a table
- Text alignment and inset within a cell
- Formatting text within a cell and saving paragraph styles
- Formatting text in tables by column
- Working with tables in Story Editor
- Merging cells
- Defining a header cell
- Setting column and row dimensions
- Setting a fixed row height
- Setting column width
- Using graphics in tables
- Placing graphics in cells
- Cell styles and table styles
- Cell styles
- Applying cell styles
- Creating table styles
- Applying table styles
Using Color in Your Documents
- Applying colors to frames and text
- Applying color to text
- Applying color to frames
- Applying Live Corner Effects Creating and saving a new swatch
- Applying strokes to text
- Creating a tint reduction
- Making a dashed stroke
- Creating and saving gradients
- Linear gradients
- Saving a gradient
- Adjusting fill opacity
- Radial gradient
- Adjusting the direction of a radial gradient
- One-click edits
- Using the Eyedropper tool to copy frame attributes
Applying colors to multiple objects
- Updating and editing colors
- Using and saving spot colors
- Colorizing a grayscale image
Using Effects
- Creative effects
- Applying opacity to objects
- Apply effects to stroke or fill only
- Drop shadow
- Adjusting effects for objects
- Bevel and Emboss
- Object styles with effects
- Using Find/Change to apply object styles
- Basic Feather
- The Gradient Feather tool
- Converting text to a path
- Applying blending modes to objects
- Working with imported files that use transparency
- Applying an alpha channel selection
- Applying a path selection
Section 1: Introduction to Canva
- Welcome to Canva!
- Logging / Setup Canva Account
- Layouts & Templates
- Get you setup with your Canva & account
- Tour of your dashboard
- Learn about the different types of templates Canva has
- Learn how to use the pre-designed layouts
- Downloading your work
- Working with text
- Photo backgrounds & Shapes
- Illustrations, icons and lines
- Adding pages to a design
- Image
- Text features and Charts
- Album cover
- Youtube thumbnail
- Twitter header
- Facebook post
- Ebook cover
- Documents
- Data and charts
- Presentation slides
Section 2: Fonts, Colors, and Images
- Typography and font pairing
- Using icons effectively
- Organising the dashboard
- Sharing designs
- Adding links
- Upgrading to Canva for Work
- Brand colors
- Custom filter codes
- Color codes
- Color scheme
- Introduction to the color wheel; creating a color palette
- How to use grids; transparency; photo filters
Section 4: Advanced Topics
- Brand Kit
- Magic Resize
- Paid Elements
- Folders for Elements
- Background Remover
- Teams, Exporting and Scheduling
- Learn more advanced techniques
- Learn how to create a logo from scratch
- Learn how upload your own graphics, logos, images
- Learn how to organize your designs
- See where I go to purchase stock photography
- Videos Overview / Editing
- Video Tools
- Animations
- Animated Presentations
- Adding Music
MODULE 1
- Bootstrap
- Get Started
- What is Bootstrap?
- Bootstrap History
- Why Use Bootstrap?
- Where to get Bootstrap?
- Downloading Bootstrap
- Bootstrap CDN
MODULE 2
- Create First Web Page with Bootstrap
- Add the HTML5 Doctype
- Bootstrap is Mobile –First
- Containers
- Basic Bootstrap Pages
- Bootstrap Grids
- Bootstrap Grid System
- Grid Classes
- Basic Structure of a Bootstrap Grid
- Equal Columns
- Unequal Columns
MODULE 3
- Bootstrap Text / Typography
- Bootstrap’s Default Settings
- Bootstrap vs. Browser Defaults
- Bootstrap Tag Elements
- Contextual Colors and
- Background
- Typography Classes
MODULE 4
- Bootstrap Table
- Rounded Corners
- Circle
- Thumbnail
- Responsive Images
- Image Gallery
- Responsive Embeds
MODULE 5
- Bootstrap Jumbotron and Page Header
- Creating a Jumbotron
- Jumbotron inside Container
- Jumbotron outside Container
- Creating a Page Header
MODULE 6
- Bootstrap Wells
- Wells
- Well Size
MODULE 7
- Bootstrap Alerts
- Alerts
- Closing Alerts
- Animated Alerts
MODULE 8
- Bootstrap Buttons
- Button Style
- Button Sizes
- Block Level Buttons
- Active /Disable Buttons
MODULE 9
MODULE 10
- Bootstrap Glyphicons
- Glyphicons
- Glyphicons Syntax
- Glyphicon Example
MODULE 11
- Bootstrap Badges and Labels
- Badges
- Labels
MODULE 12
- Bootstraps Progress Bars
- Basic Progress Bar
- Progress Bar with Label
- Colored Progress Bars
- Striped Progress Bars
MODULE 13
- Bootstrap Pagination
- Basic Pagination
- Active State
- Disabled State
- Pagination Sizing
MODULE 14
- Bootstrap Pager
- What is Pager?
- Align Buttons
MODULE 15
- Bootstrap List Groups
- Basic list Groups
- List Group with Badges
- List Group with Linked Items
- Contextual Classes
- Custom Content
MODULE 16
- Bootstrap Panels
- Panels
- Panel Heading
- Panel Footer
- Panel Group
- Panel with Contextual Classes
MODULE 17
- Bootstrap Dropdowns
- Basic Dropdown
- Dropdown Driver
- Dropdown Header
- Disable an Item
- Dropdown Accessibility
- Bootstrap Collapse
MODULE 18
- Basic Collapsible
- Example Explained
- Collapsible Panel
- Collapsible List Group
- Accordion
MODULE 19
- Bootstrap Tabs and Pills Menus
- Tabs
- Tabs with Dropdown Menu
- Pills
- Vertical Pills
- Vertical Pills in Row
- Pills with Dropdown Menu
- Centered Tabs and Pills
- Toggle/Dynamic Tabs
- Toggle/Dynamic Pills
MODULE 20
- Bootstrap Navigation Bar
- Navigation Bars
- Inverted Navigation Bar
- Fixed Navigation Bar
- Navigation Bars with Dropdown
- Right Aligned Navigation Bar
- Collapsing the Navigation Bar
MODULE 21
- Bootstrap Forms
- Bootstrap’s Default Settings
- Bootstrap Form Layouts
- Bootstrap Vertical Form
- Bootstrap Inline Form
- Bootstrap Horizontal Form
- Bootstrap Form Inputs
- Supported Form Controls
MODULE 22
- Bootstrap Input
- Bootstrap Text area
- Bootstrap Checkboxes
- Bootstrap Radio Buttons
- Bootstrap Select List
MODULE 23
- Bootstrap Form Inputs (More)
- Static Control
- Bootstrap Form Control States
MODULE 24
- Bootstrap Input Sizing
- Input Sizing in Forms
- Height Sizing
- Column Sizing
- Help Text
MODULE 25
- Bootstrap Carousel Plugin
- The Carousel Plugin
- How to Create a Carousel
- Add Captions to Slides
MODULE 26
- Bootstrap Model Plugin
- The Model Plugin
- Hoe to Create a Model
- Model Size
MODULE 27
- Bootstrap Tooltip Plugin
- The Tooltip Plugin
- How to Create Tooltip
- Positioning Tooltips
MODULE 28
- Bootstrap Popover Plugin
- The Popover Plugin
- How to Create a Popover
- Positioning Popovers
- Closing Popovers
MODULE 29
- Bootstrap Scrollspy Plugin (Advanced)
- The Scrollspy Plugin
- How to Create a Scrollspy
- Scrollspy Vertical Menu
MODULE 30
- Bootstrap Case
- Build a Bootstrap Web Page
- From Scratch
- Add Bootstrap CDN and Put
- Elements in Containers
- Add Jumbotron
- Adding button and icons
- Multicolumn Layout
- Adding Menus Tabs
- Adding Navigation bars