Call : (+91) 968636 4243
Mail : info@EncartaLabs.com
EncartaLabs

JavaScript Full Stack (Boot Camp)

( Duration: 45 Days )

This JavaScript Full Stack (Boot Camp) training course provides an extensive knowledge and expertise on major spectrum of Javascript and it's frameworks. This Full Stack JavaScript Developer course is designed to give you an essence of front-end, middleware, and back-end Java web developer technologies. As full stack developer, you will be working with different languages, libraries, and frameworks and in this course, will learn to use JavaScript for every aspect of the work.

You will start by learning the basics of HTML/ CSS along with Bootstrap for templating, followed by fundamentals of JavaScript. You will be introduced with the frontend JavaScript library "ReactJS". After JavaScript, we will introduce NodeJS and a backend framework. NodeJS provides the environment for the JavaScript to run in the backend and ExpressJS to write APIs in the backend. After learning ExpressJS we go for TypeScript since, plain JavaScript is object based and has compatibility issues. TypeScript compiles to ES6 code and eliminates the compatibility issues that we have in plain JavaScript.

This training covers lots of Lab Assignments & a Sample Project for gaining good hands-on experience in developing JavaScript based applications. This 9 week course can be customized as per your organization specific needs.

By attending JavaScript Full Stack (Boot Camp) workshop, delegates will learn:

  • JavaScript
  • TypeScript
  • Express JS
  • NodeJs
  • React JS
  • Angular
  • Material UI
  • JEST, Jasmine, Karma
  • ES6
  • HTML5/CSS3 with BootStrap
  • MongoDb

  • Basic knowledge of programming concepts and Linux and Windows operating system

The JavaScript Full Stack (Boot Camp) class is ideal for:

  • Fresh Graduates / Post Graduates (IT or Non-IT)
  • Software Engineers

COURSE AGENDA

HTML5/CSS3 with BootStrap
(Duration : 3 Days)

1

HTML5 Basics

  • Understand the structure of an HTML page.
  • Learn to apply physical/logical character effects.
  • Learn to manage document spacing.
2

Meta tag

  • The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.
3

Tables

  • Understand the structure of an HTML table.
  • Learn to control table format like cell spanning, cell spacing, border
4

List

  • Numbered List
  • Bulleted List
5

Working with Links

  • Understand the working of hyperlinks in web pages.
  • Learn to create hyperlinks in web pages.
  • Add hyperlinks to list items and table contents.
6

Image Handling

  • Understand the role of images in web pages
  • Learn to add images to web pages
  • Learn to use images as hyperlinks
7

Frames

  • Understand the need for frames in web pages.
  • Learn to create and work with frames.
8

HTML Forms for User Input

  • Understand the role of forms in web pages
  • Understand various HTML elements used in forms.
  • Single line text field
  • Text area
  • Check box
  • Radio buttons
  • Password fields
  • Pull-down menus
  • File selector dialog box
9

New Form Elements

  • Understand the new HTML form elements such as date, number, range, email, search and datalist
  • Offerings of HTML5
  • HTML5 – Page Layout
  • HTML5: Browser Support
  • Enhanced Form Elements
  • An HTML5 Detection Library: Modernizr
  • Audio And Video
  • HTML5 Canvas
10

HTML 5 API

  • geolocation
11

Introduction to CSS 3

  • What Is CSS3?
  • The History of CSS
  • How to Add CSS: Inline Styles, Head Styles, External Files
  • General Syntax: Attributes, Selectors, Cascades, etc.
  • Current State of Browser Support for CSS3
  • How We'll Check This: caniuse.com, IETester, tools.css3.info
12

Selectors, Pseudo Classes, and Pseudo Elements

  • E[foo^="bar"], E[foo$="bar"], etc.
  • :nth-child, :root, etc.
  • :before, :after, ::selection
13

Fonts and Text Effect

  • @font-face
  • Using Web Fonts: Google, Typekit, etc.
  • Font Properties
  • Text Shadow, Text Outline, Text Stroke, etc.
  • Word Wrapping
14

CSS Units/Sizing: px, pt, em, rem

15

Color, Gradients, Background Images, and Masks

  • Opacity
  • New Color Names
  • Nonimage Gradients
  • Multiple Background Images
  • Background-size, Background-origin, Background-clip
  • Image Masks
16

Border and Box Effects

  • Rounded Corners
  • Resizing
  • Outline Offsets
  • Appearance
  • Image Borders
  • Box Shadow
17

SAAS Introduction

  • SAAS Intro
  • SAAS variables
  • Nesting,import,mixin,extend
  • Function –String,List,Map,Selector
  • block element modifier (BEM) convention
18

Working with Colors

  • Background
  • Multiple Background
  • Colors
    • RGB and RGBA
    • HSL and HSLA
    • Alpha factor
    • Opacity & Transparency
  • Using currentColor
  • Working with gradients
19

Layout

  • Introduction
  • Positioning
  • Box Layout
  • Table Layout
  • Vendor Prefixes
  • Working with Columns
20

Layout: Columns, Flexible Box

  • Column-count, Column-gap, Column-rule
  • Multiple Column Layouts
  • Gaps between Columns
  • Box-orient, Box-pack, Box-align, Box-flex, etc.
  • Display: box
  • Grouping and Changing Orientation
  • Alignment
21

Vendor Prefixes

  • Current status of -moz, -o, etc.
  • When and Why to Use
22

Media Queries

  • Targeting Device Capabilities: Width, Screen Size, Color Depth, etc.
  • Building Responsive Sites: Implications for Mobile
23

Implementing CSS3 in the "Real World"

  • Modernizr
  • HTML5 Shims
  • jQuery
  • LESS, SASS, and Other CSS Preprocessors
  • CSS Grid Systems
  • CSS Frameworks
24

Transforms, Transitions, and Animations

  • translate(), rotate(), etc.
  • 3D: rotateX(), rotateY()
  • changing, for example, the width of a div on hover (without JS)
  • animations: @keyframes, animation
25

Introduction to Bootstrap

  • Bootstrap Introduction
  • Why Bootstrap?
  • Bootstrap Advantages
  • What's new in Bootstrap 3?
  • Mobile First Strategy
26

Getting Started with Bootstrap

  • Bootstrap home page
  • Downloading Bootstrap
  • Bootstrap pre-compiled folder structure
  • Bootstrap Global Styles
  • Responsive Design
  • Bootstrap basic template
27

Bootstrap grid system

  • Grid System in Bootstrap
  • Grid Options
  • Basic Grid Structure
  • Bootstrap grid sizes
  • Bootstrap grid sizes – using Offset
  • Multiple Grid
28

Bootstrap Basic Components

  • Helper Classes & Responsive Utilities
  • Working with Buttons
  • GLYPHICONS
  • List
  • Tables
  • Forms
  • Typography
29

Bootstrap Components

  • Page Header
  • Breadcrumb
  • Button Groups
  • Dropdown
  • Nav & Navbars
  • Input Groups
JavaScript ES6
(Duration : 8 Days)

1

Introduction to JavaScript

  • How to include JavaScript in an HTML document
  • The JavaScript syntax
  • How to work with JavaScript data
  • The Essential JavaScript Statements
  • How to code the basic control statements
  • Three illustrative applications
  • How to work with arrays
  • The Test Scores application with an array
  • JavaScript Language
  • Data Types and Variables
  • JavaScript Operators
  • Control Structures and Loops
  • JavaScript Functions
  • Working with Predefined Core Objects
  • Data Types in JavaScript
  • String Objects
  • URL String Encoding and Decoding
  • Math Properties
  • Math Objects
  • Date Objects
  • Date and Time Arithmetic
  • Working with arrays
  • Arrays object, its properties and methods
  • Document Object Model
  • Understand the JavaScript Object Model
  • Understand the Window object, Frame and Navigator Object
  • Location and History Object
  • Working With Document Object
  • Document Object and its properties, methods and events
  • Link ,Anchor & Cookies object
  • Working with Form Object
  • Form Object Properties, Methods & Event Handlers
  • Text-Related Objects
  • Button Objects
  • Check Box and Radio Objects
  • Select Objects
  • Validate Data and Form Submission
  • Work with Regular Expressions
  • Use regular expressions
  • Search using simple patterns
  • Search using special characters
  • Work with RegExp objects
2

Closures, Callbacks, and Recursion

  • Introduction to closures
  • How to use closures
  • The Slide Show application
  • How to use callbacks
  • How to use recursion
  • The Task Manager application
3

Advance Javascript

  • Object-Oriented Terminology
  • Types of Objects
  • Creating New Types of Objects (Reference Types)
  • Accessing Object Values / Getter and Setter methods
  • Prototype paradigm
  • Prototypal inheritance
  • Prototypal inheritance using __proto__
  • Prototypal inheritance using create()
  • Prototypal inheritance using prototype
  • JSON Object
  • JSON.stringify and JSON.parse
  • Ajax Development
  • Creating the XMLHttpRequest Object
  • Managing Ajax Requests
  • JavaScript Best Practices
  • Unobtrusive JavaScript
  • Separating Page Structure and Logic
  • Progressive Enhancement via Feature Detection
  • Coding Standards (Crockford/Yahoo
  • Test and Debug a JavaScript Application
  • An introduction to testing and debugging
  • How to debug with Chrome’s developer tools
  • Other debugging methods
4

ES6 Features

  • Let, Var and Const Keywords
  • Arrow Functions, Default function arguments
  • Template Strings
  • Object De-structuring
  • Array Manipulation Functions
  • Array.from(), Array.of(), Array.find(), Array.findIndex(), Array.some(), Array.every()
  • …spread and …rest operators
  • Promises
  • Symbols
  • Code quality with ESLint
  • ES6 Tooling
  • Babel, npm, webpack overview
  • Classes, Inheritance
  • Generators
  • Proxies
  • Async, await flow control
  • Map, Set Operators
5

Bootstrap Components with JavaScript

  • Pagination
  • Panel
  • Well
  • Jumbotron
  • Alerts
  • Bootstrap Plugins
  • Bootstrap jQuery Plugins
  • Working with Methods
  • Working with Events
  • Transition Plug-in
  • Modal Plug-in
  • Carousel Plug-in
  • Collapse Plug-in
  • Tab Plug-in
  • Tooltip Plug-in
6

ES6 Library

  • Number Extension
  • Math extension
  • Function & String extension
  • RegEx Entension
  • Asynchronous Programming in ES6
  • Promise Constructor
  • Promise with Chain
  • Promise Race
  • Scopes of Variables
  • JavaScript Storages
  • Local and Session
  • concept of cookie
MongoDb
(Duration : 2 Days)

1

MongoDB – Overview

  • Understand what is NOSQL
  • Describe CRUD
  • State the types of NOSQL
  • Explain what is Aggregation
  • Describe Replication & Sharding
2

CRUD Operations

  • Understand what are Crud Operations
  • Explain what is Upsert
  • Describe Query Interface
  • List the Comparison Operators and Logical Operators
  • State what are Wrapped Queries and Query Operators
3

Basic Operations

  • Crud Operations
  • Basic Operations With Mongo Shell
  • Data Model
  • JSON
  • BSON
  • MongoDB – Datatypes
  • BSON Types
  • The _id Field
  • Document
  • Document Store
  • Blog: A Bad Design
  • Blog: A Better Design
4

Aggregations

  • Types of Aggregations
  • What is Aggregation?
  • The Aggregate() Method
  • Pipeline Concept
  • Pipelines
  • Pipeline Flow
  • Pipeline Operators
  • $match, $unwind
  • $group, $project
  • $skip, $limit
  • $sort, $first
  • $last, $sum
5

Indexing

  • Understand about Indexes
  • Understand different types of Indexes
  • Understand properties of Indexes
  • Explain Plan in MongoDB
  • Mongostat
  • Mongotop
  • Logging Slow queries
  • Profiling
6

Replication and Sharding

  • Understand about Replication
  • Purpose of Replication
  • Understand Replica Set
  • Sharding
  • Sharding Mechanics
  • GridFS
NodeJS
(Duration : 2 Days)

1

Getting started with Node.js

  • JavaScript Essentials
  • How JavaScript works
  • Event loop
  • Stack, Heap and Queue
  • Node.js Fundamentals
  • Introduction to Node.js
  • Why Node.js?
  • Traditional Programming Limitations
  • Creating more call stacks
  • Event-Driven Programming
  • Node.js Official website
  • Downloading and Installing Node.js
  • Node.js Globals
2

Module Introduction

  • Working with Modules
  • Modules in Node.js
  • Loading a module
  • package.json usage
  • Creating package.json
  • Node Package Manager
  • Loading a third party module (installed via NPM)
  • Creating and exporting a module
  • Working with Buffers
  • Buffers in Node
3

Database and Session Handling

  • Mongoose Library
  • Introduction to Mongoose Library
  • Connecting MongoDB using Mongoose Library
  • Object Modeling
  • RDBMS Schema Vs Mongoose Schema
4

Unit Testing, Logging & Debugging

  • Unit Testing
  • Introduction
  • Test-Driven Development
  • Test-After Development
  • Behavior-Driven Development
  • Unit Testing in Node
  • Unit Testing in Node
  • Mocha
  • Chai
  • SuperTest
  • Code coverage using Istanbul
  • Logging and Debugging
  • Logging using morgan
  • Debugging with node-inspector
  • Steps to debug
Express JS
(Duration : 2 Days)

1

Introduction of ExpressJs

  • What is ExpressJS
  • How Express.js works
  • Installation of Express.js
  • Basic Example
2

Templating Engines

  • Introduction
  • Jade Templating Engine
  • Working with Tags in Jade
  • Working with id and classes in Jade
  • Attributes and Nesting Tags in Jade
  • Using if & unless in Jade
  • Using for & each in Jade
  • Using case & mixins in Jade
  • Include and Extend in Jade
  • EJS Templating engine
3

Working with Express.js

  • Introduction
  • Introduction to Express.js
  • Connect Module
  • Express.js Installation
  • app.js
  • Steps for creating Express.js Application
  • application, request, response object properties & methods
4

Request/Response in Express.js

  • Request-params,body,files,route,header,get
  • Response-render,locals,status,json,redirect
5

Using middleware

  • Types of middleware
  • Application level middleware
  • Express-json,session,logger,compress
  • Router level middleware
  • Built-in middleware
  • Third party middleware
  • Express 4.0 Router o Express.js Scaffolding
Material UI
(Duration : 1 Day)

1

Installing Material UI in project

2

Import Material UI and a component

Typescript
(Duration : 5 Days)

1

Introduction to Typescript

  • Introduction to Typescript
  • JavaScript & Typescript
2

The Type System

  • Primitive types & type inference
  • Object type & type inference
  • Function type & type inference
  • Enums, Tuples
  • Nullable types
  • Union types, intersection types
  • Never and void types
3

OOPS in typescript

  • Classes, Class properties, Static Properties
  • Constructors, getters & setters
  • Inheritance, Abstract classes, Interfaces
  • Access modifiers
4

Namespaces and Modules

  • Namespaces and multiple files
  • Loading modules
5

Generics

  • Generic functions, classes
  • Generic types and arrays
  • Constraints
6

Decorators

  • Class Decorators
  • Decorator Factories
  • Method Decorators
  • Property Decorators
  • Parameter Decorators
7

Typescript essentials

  • tsc and tsconfig file
  • debugging typescript
Angular
(Duration : 5.5 Days)

1

Introduction to Angular Framework

  • Introduction to Angular Framework, History & Overview
  • Environment Setup
  • Angular CLI, Installing Angular CLI
  • NPM commands & package.json
  • Bootstrapping Angular App, Components, AppModule
  • Project Setup, Editor Environments
  • First Angular App & Directory Structure
  • Angular Fundamentals, Building Blocks
  • MetaData
2

Essentials of Angular

  • Component Basics
  • Setting up the templates
  • Creating Components using CLI
  • Nesting Components
  • Data Binding - Property & Event Binding, String Interpolation, Style binding
  • Two-way data binding
  • Input Properties, Output Properties, Passing Event Data
3

Templates, Styles & Directives

  • Template, Styles, View Encapsulation, adding bootstrap to angular app
  • Built-in Directives
  • Creating Attribute Directive
  • Using Renderer to build attribute directive
  • Host Listener to listen to Host Events
  • Using Host Binding to bind to Host Properties
  • Building Structural Directives
4

Pipes, Services & Dependency Injection

  • Parametrized Pipes
  • Chaining Multiple Pipes
  • Creating a Custom Pipe
  • Creating a Filter Pipe
  • Pure and Impure Pipes (or: How to "fix" the Filter Pipe)
  • Understanding the "async" Pipe
  • Services
  • Dependency Injections
  • Creating Data Service
  • Understanding Hierarchical Injector
  • Services for Cross Component Communication
  • Injection Tokens
5

Http Requests

  • App & Backend Setup
  • Sending Requests (Example: POST Request)
  • Adjusting Request Headers
  • Sending GET Requests
  • Sending a PUT Request
  • Transform Responses Easily with Observable Operators (map())
  • Using the Returned Data
  • Catching Http Errors
  • Using the "async" Pipe with Http Requests
6

Observables & rxjs operators

  • Basics of Observables & Promises
  • Analysing a Built-in Angular Observable
  • Building & Using a First Simple Observable
  • Building & Using a Custom Observable from Scratch
  • Understanding Observable Operators
  • Using Subjects to pass and listen to data
7

Authentication and Route Protection

  • How Authentication works in SPA
  • JWT Module
  • JSON Web Tokens
  • Signup, Login and logout application
  • Router Protection, Route Guards
  • CanActivate interface
  • Checking and using Authentication Status
  • Router Protection and Redirection
8

Deploying an Angular App

  • Deployment Preparations
  • JIT vs AOT Compilation
  • Integration with JSP/Spring/.net
  • Setup development env and backend env
  • Environments configuration
  • Linting
  • Deployment
9

Modules

  • Built-in Security contexts
  • Using AOT Compilation
  • Feature Modules
  • Routes with Feature module
  • Shared Modules
  • Optimization and performance issues
  • Auth Feature Module
  • Lazy loading of modules, cross module communication
  • Protecting Lazy Loaded Routes
  • Understanding Core Module
  • Create Basic Core Module
  • How Module and Services work together
10

App State management with Redux

  • Redux introduction, Installing redux
  • Building Blocks of Redux
  • Working with Actions, Reducers
11

Angular features

12

Decorators and Routing Concept in Angular

13

Angular Animations

14

Create FULL MEAN stack Application

JavaScript Testing
(Duration : 1.5 Days)

1

Introduction to Jasmine

  • Testing fundamentals
  • What is Jasmine?
  • Getting Setup with Jasmine
  • Testing with Jasmine
2

Matchers and Setup/Teardown

  • Matchers
  • beforeEach() , afterEach()
  • beforeAll(), afterAll()
3

JavaScript testing frameworks

  • Jasmine
  • Selenium
  • Mocha
4

Karma

  • The Karma difference
  • Importance of combining Karma with Angular
  • Installing Karma
  • Testing with Karma
  • Using Karma with Angular
5

Installation with chrome

React JS and JEST
(Duration : 7 Days)

1

React Introduction

  • Overview of frameworks, libraries for client side Web applications
  • React introduction,
  • Understanding “what” and “why” React
  • React Component Demonstration using codepen
  • Environment Setup for React Application
  • Understanding NPM commands
  • Using VS Code
  • VS Code extensions for ES6, React
  • Helloworld app in React
2

React Essential Features and Syntax

  • React App Project Directory Structure
  • Overview of Webpack, Babel
  • React Component Basic
  • Create React Component
  • Understanding JSX
  • Limitations of JSX
  • Working with Components and Reusing Components
3

React Components, Props and State

  • Understanding and using Props and State
  • Handling Events with methods
  • Manipulating the State
  • Two way data-binding
  • Functional (Stateless) VS Class (Stateful) Components
  • Parent – Child Communication
  • Dynamically rendering contents
  • Showing Lists, List and keys
4

Styling Components

  • CSS Styling
  • Scoping Styles using Inline Styles
  • Limitations of inline styes
  • Inline Styles with Radium
5

Debugging React Apps

  • Understanding React Error Messages
  • Handling Logical Errors,
  • Debugging React apps using google developer tools and React DevTool
  • Understanding Error Boundaries
6

React Component life cycle

  • Updating life cycle hooks
  • PureComponents
  • React’s DOM Updating Strategy
  • Returning adjacent elements
  • Fragments
7

React Component in Details

  • Higher Order Components
  • Passing unknown Props
  • Validating Props
  • Using References
  • React Context API
  • Updated LifeCycle hooks (16.3)
  • Best practices for React Projects
  • Demo apps
8

HTTP Requests/Ajax Calls

  • HTTP Requests in React
  • Introduction of Axios package
  • HTTP GET Request, fetching & transforming data
  • HTTP POST, DELETE, UPDATE
  • Handing Errors
  • Adding/Removing Interceptors
  • Creating/Using Axios intances
  • Redux
  • React Thunk
  • Difference between Thunk & other
  • React hooks
  • Application Using React & Redux
9

React Routing

  • Routing and SPAs
  • Setting Up the Router Package
  • react-router vs react-router-dom
  • Preparing the Project For Routing
  • Switching Between Pages, Routing-Related Props
  • The "withRouter" HOC & Route Props
  • Passing & extracting route/query parameters
  • Using Switch to Load a Single Route
  • Navigating Programmatically
10

React Forms and Form Validation

  • Creating a Custom Dynamic Input Component
  • Setting Up a JS Config for the Form
  • Dynamically Create Inputs based on JS Config
  • Adding a Dropdown Component
  • Handling User Input
  • Handling Form Submission
  • Adding Custom Form Validation
  • Fixing a Common Validation
  • Adding Validation Feedback
  • Showing Error Messages
  • Handling Overall Form Validity
11

Deploying React App to the Web

12

Testing React apps with JEST

13

Create FULL MERN stack Application

Agile
(Duration : 1 Day)

1

Understand the following :

  • Agile Process Framework
  • Agile Methods and Practices
  • SCRUM
Sample Project
(Duration : 7 Days)

Encarta Labs Advantage

  • One Stop Corporate Training Solution Providers for over 6,000 various courses on a variety of subjects
  • All courses are delivered by Industry Veterans
  • Get jumpstarted from newbie to production ready in a matter of few days
  • Trained more than 50,000 Corporate executives across the Globe
  • All our trainings are conducted in workshop mode with more focus on hands-on sessions

View our other course offerings by visiting https://www.encartalabs.com/course-catalogue-all.php

Contact us for delivering this course as a public/open-house workshop/online training for a group of 10+ candidates.

Top
Notice
X