Bootstrap TRAINING OUTLINE Bootstrap Overview

• Overview of Mobile First Design
• CSS3 Media Queries
• Downloading Bootstrap
• Customizing Bootstrap
• Adding Custom CSS to Bootstrap

Bootstrap Grid System

• Working with Grids
• Defining Rows, Containers and Columns
• Offsetting Columns
• Creating Nested Columns
• Changing Column Order

Bootstrap Base CSS

• Overview of Bootstrap’s Base CSS
• Using Helper Classes and Responsive Utilities
• Working with Typography Classes
• Formatting Lists
• Formatting Tables
• Creating a Striped Table
• Creating a Responsive Table
• Enhancing the Appearance of Forms
• Displaying Inline Forms
• Displaying Horizontal Forms
• Formatting Images
• Creating Responsive Images
• Styling Links and Buttons

Bootstrap Components

• Overview of Bootstrap Components
• Using Glyphicons to Add Symbols to Buttons and Links
• Creating Dropdowns
• Creating Navigation
• Tabbed Navigation
• Pill Navigation
• Navigation Bars

• Collapsible Navigation Bars
• Breadcrumbs
• Grouping Inputs, Buttons and Lists
• Formatting Page Headers
• Creating Panels
• Grouping Panels
• Creating a Thumbnail Gallery
• Creating Progress Bars and Alerts

Bootstrap Plugins

• Plugin Overview
• Creating Tabbed Navigation
• Creating a Slideshow Using the Carousel Plugin
• Using Accordions to Display a Large Amount of Content
• Adding a Dialog Box Using the Modal Plugin

Displaying Secondary Information Using Popovers or Tooltips

JQuery Introduction

• What is JQuery?
• History
• Selectors

JQuery Effects

• Display Effects
  • hide()
  • show()
  • toggle()
• Fading Effects
  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()
• Sliding Effects
  • slideDown()
  • slideUp()
  • slideToggle()
• Other Effects
  • animate()
  • delay()

JQuery HTML and CSS

• html()
• text()
• val()
• css()
• before()
• prepend()
• after()
• insertAfter()
• append()
• appendTo()
• clone()
• remove()
• empty()
• detach()
• scrollTop()
• attr()
• prop()

• offset()
• position()
• addClass()
• hasClass()
• toggleClass()
• width()
• height()
• innerWidth()
• innerHeight()
• outerHeight()
• wrap()
• wrapInner()
• unwrap()
• wrapAll()

JQuery Events JQuery Form

• • Installation steps
  • What is React?
  • Real-world SPA v/s React
  • Creating First Project
  • Building a Project
  • Installing Dependencies
  • React Alternatives
  • Course Outline
  • Useful resources and Link
• Refreshing JavaScript
  • Understanding “let” and Const
  • Functions
  • Exports and Imports
  • Understanding Classes
  • Class Props and Methods
  • Spread
  • Map
  • Filter
  • Class Object
  • Interfaces
  • Subclasses
  • Array
• Understanding Base features and Syntax
  • Creating react app
  • Using create-react-app
  • Understanding component basics
  • Understanding JSX
  • JSX Restrictions
  • Creating Components
  • Working With Components
  • Reusing Components
  • Outputting Dynamic Content
  • Working With Props
  •  Understanding Children Property
  • Props and State
  • Handling Events and Methods
  • Manipulating State
  • Functional Components naming
  • Stateless and State full components
  • Passing Methods References between components
  • Adding Two-way data binding
  • Working with Styles
• Working with List and Conditionals
  • Module Introduction
  • Rendering modules conditionally
  • Handing dynamic contents
  • Outputting lists
  • List and State
  • Lists and Keys
  • Flexible Lists
  • Practices
• Styling React Components
  • Module Introduction
  • Outlining the problem set
  • Setting Styles Dynamically
  • Setting Class names Dynamically
  • Enabling CSS modules
  • Adding Pseudo selectors
  • Working with Media Queries
• Components
  • Module Introduction
  • Splitting app into Components
  • Comparing Stateless and Stateful Components
  • Class Components (ES6)
  • Functional Components
  • Lifecycle Methods (Functional Components)
  • Lifecycle Hook in Class Components
  • Creating Default Props
  • Validating Prop Types
  • Higher-Order Components
  • Another form of Higher-Order Components
  • Using refs
  • Using the Context API
  • Handing Providers
• Music Plyer Project – Spotify API
  • Project Introduction
  • Project outline
  • Project Creation
  • Building Search Component
  • Handling API response from server
  • Consuming API response to console
  • Display API response in Artist Component
  • Display Tracks list in Tracks Component
  • Finalizing Project
• Custom Resume Builder – Accessing Local API
  •  Project Introduction
  • Project outline
  • Project Creation
  • Building Resume Component
  • Creating Rest API using JSON Server
  • Consuming API response to console
  • Display API response in Components
  • Assigning Props to various components
  • Finalizing Project
• Routing
  • Module Introduction
  • Building Checkout Container
  • Setting up Routing and Routes
  • Navigating between components
  • Navigating Back & to next page
  • Implementing Children navigation
  • Implementing Component-based navigation
• Forms
  • Analysing Component
  • Creating Custom Dynamic Input Component
  • Setting Up event and state for the form input
  • Handling user input
  • Adding Custom form Validation
  • Working with Refs
• Redux
• CRUD Application Project – Accessing API
• Accessing JSON Responses using Axios
• Deploying