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

Overview of Client-Side JavaScript

• Including JavaScript in a Page
• Using the <script> Tag
• Referencing an External Script File
• Using an Event Handler
• Using a URL
• Evolution of the JavaScript Language
• Common Misconceptions About JavaScript
• ES5 vs ES6
• New ES6 Data Types
• Map and Set Collections
• ES6 Arrow Functions
• ES6 String Template Literals
• Using the JavaScript Console
• Logging Messages in the Console
• Debugging with Console

Cotrolling Flow

• Conditional Constructs
• if-else
• switch
• Looping Controls
• do-while
• while
• for
• for in
• Branching Statements
• break
• continue
• Equality and Identity Operators
• Logical and Comparison Operators
• Error Handling
• try
• catch
• throw
• finally

Implementing Functions

• Declaring Functions
• Invoking Functions
• Named and Anonymous Functions
• Passing Arguments
• Local vs. Global Variables
• Returning Values from a Function
• The this Keyword
• Default Parameters
• Explaining Closures

Introduction to the Document Object Model (DOM)

• Selecting DOM Elements
• getElementById
• getElementsByTagName
• getElementsByName
• getElementsByClassName
• querySelector
• querySelectorAll
• Modifying Page Content with the DOM
• Manipulating CSS using JavaScript

Working with Forms

• Accessing Forms from JavaScript
• Working with Form Elements
• Validating Form Fields
• Checking Required Fields
• Checking Length of Input
• Canceling Form Submission

Working with JavaScript Objects and JSON

• Understanding Objects
• Defining Custom Objects
• Object Literal Notation
• Defining Properties and Methods
• Creating a Constructor
• ES6 Enhanced Object Literals
• Extending an Existing Object with prototype
• Using the in and instance of Operators
• Overview of JSON
• Using JSON.stringify and JSON.parse

JavaScript Fundamentals

• Using Strict Mode
• Adding Comments
• Debugging JavaScript Code
• Declaring Variables
• var, let, and const Keywords
• Local vs. Global Variables
• Declaring Block-scoped Variables
• Using JavaScript Primitive Types
• String, Number, and Boolean
• undefined
• null
• Performing Data Conversions
• Interacting with the User
• alert
• prompt
• confirm
• Working with JavaScript Operators
• Arithmetic Operators
• Assignment Operators
• Using the Math and Date Objects

Working with Strings, Numbers, and Arrays

• Creating String Objects
• Using String Methods
• Searching within a String
• Returning a Substring
• Converting Character Case
• Creating Number Objects
• Formatting Numbers
• Creating Arrays
• Using the Array Constructor
• Using Literal Notation
• Accessing Array Elements
• Common Array Methods
• Defining and Using Associative Arrays
• Predefined Object Arrays

Browser Object Model

• Overview of the Browser Object Model
• Using the window Object
• Opening and Closing Windows
• Using Timers
• Passing Data Between Windows
• Using the Document Object
• Writing to the Webpage
• Accessing Properties of the Document
• navigator Object
• location Object
• screen Object

Event Handling in JavaScript

• Overview of JavaScript Events
• Identifying Differences Between Browsers
• The event Object
• Event Capturing and Bubbling
• Adding Event Handlers
• Traditional (Inline) Model
• Registering Events in JavaScript
• Adding Multiple Handlers
• addEventListener
• attachEvent
• Mouse and Keyboard Events
• Preventing Default Behavior
• Canceling Events

Using Ajax

• Overview of Ajax
• The XMLHttpRequest Object
• Configuring an Ajax Request
• Handling Errors on ready state change
• Using JSON with Ajax

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()
• 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

• Getting Started
• 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 AP
• 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