Full Stack Training in Trichy

Introduction to Web Development

• What is HTML
• What is CSS
• Setting up the environment
• Hello World!
• Using VS Code with Live reload
• Using Emmet and online tools
• Using Chrome developer tools

Introduction to HTML

• HTML elements and Tags
• Singular and Paired tags
• Structure of an HTML page
• Heading and Paragraph Tags
• Attributes in HTML
• Images
• Links - Internal and External
• Lists
• Tables
• The styleattribute
• Colorsin HTML
• HTML5 semantic tags
• HTML5 audio and video tags

Forms and Inputs

• The Formtag
• Using the label tag
• HTML Input tag
• Select andTextArea
• Buttons
• Datalist
• Building a contact form

Introduction to CSS

• Using the style tag
• Targeting HTML elements
• Targeting nested HTML elements
• Using external stylesheets
• Overriding CSS Styles
• Common CSS Properties
• CSS units
• The CSS Box Model
• More CSS Properties
• CSS Pseudo-classes

Advanced CSS

• CSS Positioning - Static, Relative and Absolute
• CSS Positioning - Fixed and Sticky
• CSS Pseudo-elements ::beforeand ::after
• CSS Variables
• Custom fonts in CSS
• Importing external stylesheets

Transitions and Animations

• What are CSS Transitions
• Basic Transitions and CSS properties
• CSS AnimationsandCSS properties
• Defining Keyframes

Responsive Web design

• Media queries
• What is CSS Flexbox?
• Creating rows and columns
• More flexbox properties
• What is CSS Grid Layout?
• Rows and Columns in Grid
• Allocating cells
• Grid template areas
• Building a responsive image gallery

Project

• Project overview and setup
• Building the menu and footer
• Building the banner
• Buildingdivsfor text and quote
• Using Flexbox for Projects section
• About page with gallery
• Building the Projects page
• Building the Contact page

Introduction to JavaScript

• Introduction to JavaScript
• What is JavaScript and Its Use?
• How JavaScript Engines Works?
• Basic syntax,RunJs
• JavaScript Vs ECMAScript
• Introduction to code editors - Visual Studio Code Editor

Fundamentalsof JavaScript

• Variables, Constant, Assignment
• JavaScript Using Normal Vs Strict Mode
• Data Types - Primitive Types and Objects
• JavaScript - String and String Methods
• null, undefined, not defined,NaN
• Performing Data Type Conversions

JavaScript Operators

• Assignment, Arithmetic Operators
• Comparison, Conditional Operators
• in, of and ternary Operator
• Standard and Strict Equality Operators: Double Equal and Triple Equal
• JavaScript - Null Coalescing Operator

JavaScript Array and Object

• JavaScript Arrays - Pop, Push, Shift, Unshift
• Array Helpers – Map, Reduce, Sort andforEach
• JavaScript Object and Symbol Type
• JSON – JavaScript Object Notation

JavaScript Function and Error Handling

• JavaScript Function and Types of function
• Function Declaration Vs Expression
• Closures and Scope
• Constructor, This Keyword and Prototyping
• Rest Parameters and Spread Syntax
• Errors Handling and Types Errors
• Error Handling Try-Catch-finally
• Throwing Custom Errors with throw

Dom Manipulation and HTML5 API

• What is Dom Manipulation and DOM Objects?
• Create, Modifying DOM Element
• Accessing Dom Element -querySelector&querySelectorAll
• document By XXXMethod
• Working with Events
• Geolocation APIs - Methods and Implementation
• HTML Web Storage –localStorageandsessionStorage
• HTML5 Drag / Drop APIs - Methods and Implementation

JavaScript Asynchronous Programming

• Asynchronous Programming
• Callbacks and Their Implementation
• Promises and Promises Implementation
• Async/await and Its Implementation
• Generator and Its Implementation
• Async Generator and Its Implementation

JavaScript Classes

• Class Basic Syntax and Implementation
• Class Inheritance
• Static Properties and Methods
• Private and Protected Properties and Methods
• Modules and Export, Import

Map, Set, andDestructuring

• Introduction to Map and Set
• Map and Set: Implementation
• Map and Set: Iterations
• Destructuringassignment

Remote Data and Servers

• Working with remote data and RESTful APIs
• Using AJAX
• Using the Fetch API
• Working with third-party APIs services

Transpilation& Bundling

• JavaScript -Transpilation
• JavaScript - Low Cross Browser Compatibility
• Babel as JavaScriptTranspiler
• Parcel – Introduction and Bundling JavaScript Files
• Webpack – Introduction and Bundling JavaScript Files

Introduction to React

• What is React?
• Hello React
• Using the create-react-app

Components

• What are Components?
• Types of Components
• JSX

State Props

• What is State?
• Stateful Function Components with Hooks
• What are props?
• Type Checking with Prop Types

Rendering Lists

• Using the map function to render lists
• The “key” attribute
• Using Fragments

Components Revisited

• Lifecycle of a Component
• Side effects Lifecycle
• Managing cleanup
• Events
• Error Management

Building Forms

• Controlled Form Components
• Uncontrolled Form Components
• Handling inputs efficiently
• Project - Building a currency converter

Render Props Higher Order Components

• Render Props
• Higher Order Components

Portals

• Introduction to Portals
• Event bubbling in Portals

Global Shared Data

• Unidirectional Data Flow
• Challenges with Props
• The Context API

Hooks in Focus

• Understanding Hooks
• The useState hook
• Side effects using the useEffect hook
• The useContext hook
• The useReducer hook
• Writing your own hook

Routing in a React App

• Routing in a React application
• Routing with React Router
• Nested Routes Parameters
• Protecting Routes

Code Splitting

• Code splitting Suspense
• Route Based Code Splitting Lazy Loading

Isomorphic React

• Server Side Rendering
• SSR with React - Setup Server
• SSR with React - The Toolchain

State Management using Redux

• State Management Redux
• Setting up Redux
• Actions Reducer for the Catalog
• Using the connect() higher order function
• Actions Reducer for the Cart
• Using Redux Hooks
• Implementing Middleware Persistence

Testing Components

• Introduction to Testing
• Using Jest with Test Utils from React-DOM
• Using Jest with the React Testing Library
• Using Jest with Enzyme

Epilogue

• The React ecosystem

Get started with Node.JS

• Node.js Introduction
• Applications of Node.js and Installation
• First Node.js Script
• Synchronous and Asynchronous Programming
• Under the hood - Understanding the event loop Non-Blocking I/O

Interactive Node with REPL

• REPL and REPL Commands
• Node.js CLI Commands
• Global and Local Objects

Modular Programming NPM

• Introduction to Modules
• Process and OS Modules
• Writing Your Own Module
• Introducing NPM
• Initializing a Project Using npm init
• Understanding package.json
• Installing using packages from npm
• Local vs.Global Install
• Using NPX
• Publishing Package on npm

Introduction to ECMAScript Modules - An experimental implementation

• ECMAScript Modules Versus CommonJS Modules
• Enabling support
• Writing an ECMAScript Module
• Importing and Using an ECMAScript Module
• ES6 syntax in detail

File System Streams

• File System Modeling in Node.js
• Directory and Path Resolution
• Reading Files Synchronously and Asynchronously
• Writing Files Synchronously and Asynchronously
• Directory operations

Streams

• Understanding Streams
• Reading a File Using Readable Stream
• Writing a file using Writable Streams
• Transform Streams
• Streams vs Files

Events

• Event Emitter
• Handling Events

Network I/O

• Introduction to the Net module
• Creating a TCP Server Listener
• Creating a command line chatbot

Web Servers More

• Web Server: Web Application Architecture
• HTTP module
• Making HTTP requests
• Serve JSON as response
• Serve HTML as response
• Building a basic web server with routes and streams: Serve a static website
• Using HTTPS
• Using HTTP/2
• Understanding CORS

Debugging in NodeJS

• Introduction to debugging
• Debug node js apps

Cluster Worker Threads

• Introduction to the Worker Threads API
• Handling compute intensive tasks using Worker Threads
• Node.js on multi-core CPUs using Cluster

Introduction to Express

• What is a Node.js web application framework?
• BYOF - Build Your Own Framework
• Introducing Express
• Who uses Express?
• Hello Express
• Your first Express app
• Adding a route handler
• Serving Static Assets HTML files

Rendering

• View Engine – Pug
• Building the Dashboard
• Building the Post Card.

Middleware

• What is middleware?
• Parsing incoming requests
• Logging with Morgan
• Using the express-session middleware
• Compression Your own middleware

Routing

• Modular routing with Express Router
• Organizing routes
• Dynamic Routing Route parameters
• Basic route protection using middleware

Database Integration

• Working with MongoDB Atlas
• Setting up Mongoose ODM
• Building the Users schema model
• Building the Posts schema model
• Serving the client web application

Authentication, Controllers, and APIs

• Signing up an Admin Password Hashing
• Admin Authentication - Controller and Route
• Authentication API - Controller and Routes
• Posts API - Controller and Routes
• Profanity Filtering and Post Moderation

Caching Performance

• Setting up Redis for caching
• Caching and Serving Content
• Configuring Redis as the session store

Protecting Express apps

• Handling untrusted data
• Preventing XSS CSRF

Deployment E PROJECT

• Deploying a Node and Express app on Heroku

Getting Started- Introduction to MongoDB

• What Is NoSQL Database
• Types of No SQL Databases
• Introduction to MongoDB
• What is BSON?
• Use case of MongoDB
• MongoDB in Windows
• MongoDB on Ubuntu
• MongoDB on MAC OS
• MongoDB Cloud-Atlas
• Setup MongoDB Environment

MongoDB Fundamentals

• What is a database?
• Create Database - Demo
• MongoDB Architecture
• What is a collection?
• Collections and Capped Collections - Demo
• What is a document?
• Document Structure
• The _id field
• Data Types
• Mongo Shell
• Mongo Shell - Demo

CRUD Operations

• Inserting Data
• Querying Data using find() findOne()
• Basics of Querying Data - Demo
• Querying Complex Data - Demo
• Querying Null Values - Demo
• The flavors of find – Atomic operations (Update Delete)
• Updating Data - Demo
• Duplicate Data - Demo
• Replace One - Demo
• DeleteOne - Demo
• DeleteMany - Demo
• Dropping a Collection

Schema Design and Modelling

• Data Modelling Schemas
• MongoDB Data Model and Relationships
• Scenario-based examples

Advanced Operations

• Sorting
• Sorting - Demo
• Limiting records
• Limit Data - Demo
• Skip Data - Demo
• Indexing
• Indexes - Demo
• Different Types of Indexing
• Aggregation
• Aggregation Pipeline - Demo
• Aggregation MapReduce - Demo

Replication and Sharding

• Why Replication?
• Sharding
• Create Backup

Administration and Security

• Backup and Restore Operations
• Backup - Demo
• Restore - Demo
• Import and Export Operations
• Import and Export Operations - Demo
• Monitor Resource Utilization
• Query Optimization and Optimization Properties
• Query Optimization - Demo
• Security Concepts in MongoDB
• MongoDB Security

MongoDB with other Applications

• Various API drivers available for MongoDB
• Integration with Node.js
• Integration with Node.js - Demo
• Integration with Java
• Integration with Java - Demo
• Integration with Python
• Integration with Python - Demo

Cloud Deployment with AWS

• Introduction to the AWS platform
• Overview of a Deployment Pipeline on AWS
• Understanding compute platform EC2
• Understanding Identity Access and Management (IAM)
• Network fundamentals with ELB, RDS, Route 53 and Cloudfront
• Understanding CloudFormation
• Understanding CodeCommit and CodeBuild
• Using CodeDeploy and CodePipeline
• Managing deployments using CloudWatch

Background to Agile

• The day in the life of a Project Manager
• The day in the life of a Project Team Member
• The need for change
• Traditional Projects vs Agile Projects

Agile Basics

• Agile Manifesto
• Values
• Principles
• Pillars of Agile

Business Inputs

• User Stories - definition
• Business Value
• Definition
• Prioritizing
• Minimum Viable Product (MVP) / MMF
• Shaping up user stories (the 3Cs)
• INVEST Criteria
• User Story Maturity

Agile Variants

• Scrum (very high-level)
• Kanban
• XP
• DSDM
• Scrum-ban
• Lean
• Feature Driven Development
• PI chart on usage

APM Framework

• Process Map
• Process Steps need, deliverables activities
• Envision
• Speculate
• Explore
• Adapt
• Close

Introducing Scrum

• The Scrum Guide
• Popularity of Scrum

Scrum Building Blocks

• Event, Artifacts, and roles
• Scrum at a glance
• 3 Scrum roles
• Other stakeholders
• Project Manager
• Agile Coach
• 3 artifacts
• 5 events

Agile Estimation

• Estimation Basics
• Agile Estimation Practices
• Planning Poker
• Types of Agile Estimates

Agile Planning

• Breaking the myth
• Product Planning
• Release Planning
• Iteration Planning

Monitoring Tracking

• Information Radiators
• Burn-down chart
• Burn-up chart
• CFD

Agile Metrics Agile Tools

• Agile Metrics
• Agile Tools

Scaling Agile

• Why we need to scale Agile
• Agile @ Scale flavors
• SAFe®
• DAD
• LeSS

Careers in Agile

• Agile certifications
• Enterprise Agile

Topics

Industry-relevant capstone project under experienced industry-expert mentor

Learning Objectives

The highlight of the bootcamp is an industry-centric and comprehensive capstone project that you will get to work on, under the experienced eye of our industry expert mentor. This guided group project shall bring together your understanding of the full stack architecture as you go from vision to deployment of a realistic full stack application, encompassing all essential milestones that are encountered in a production setting. This shall equip you to handle real-world scenarios from the get-go.

Full-stack development includes the development of both front-end i.e. client-side and back-end i.e. server-side development of an application. This web development process comprises of three layers: 

• Presentation layer- this layer consists of the front end part that deals with the user interface 
• Business Logic layer- this layer consists of the back end part that deals with the data validation
• Database layer- this layer consists of the database that will act as storage, a repository of information from the front-end through the logic layer

 Full-stack web development involves all the steps from ideation to the finished (ready) product. For companies, hiring a skilled professional to work on each different web development stage can be more complex and expensive. So, companies prefer to hire candidates who are skilled in working across multiple stacks.

A full-stack developer is also referred to as a full-stack engineer, and is a skilled professional who can build complete apps and websites. A full-stack developer handles all types of databases, system engineering, server & client-side programming, depending on the customer's needs. These developers are capable of working on all the modules of development, i.e. from frontend to backend, to database, debugging and testing an app. Therefore, the full stack developers are highly in demand because of their expertise in handling more tasks.

A full-stack developer has the ability to work on all the facets involved in developing any kind of application. A full-stack developer bears high responsibilities. Full-Stack development skills are difficult to learn and an individual who possesses these skills is in great demand in the industry today. Here is a summary of the responsibilities of the full-stack developer:  

• Writing an optimized front-end code in JavaScript, HTML, and core Java
• Designing an API and writing back-end code in Ruby, Python/Java
• Securing an app
• Working with system infrastructure that includes OS and hardware
• Understanding, creating and querying databases
• Client coordination and Project management 
• Developing strategies for every stage of the app development process

A skilled Full Stack Developer should have functional knowledge and the ability to manage every aspect involved in app development. Let’s see the skills required to become a full-stack developer:

• You should be flexible with handling multiple programming languages like JAVA, PHP, C#, Python, Ruby, Perl, etc. 
• You should know how to use third-party libraries such as JQuery, LESS, SASS, AngularJS, or REACT and various development frameworks like JAVA Spring, Hibernate, Python Django, NodeJs express and so on    
• You should be proficient in some basic front-end technologies including HTML5, CSS3, JavaScript 
• Other required full-stack developer skills include knowledge of databases like MySQL, MongoDB, Redis, Oracle, SQLServer, etc. in order to store data
• An individual is required to know the basic design skills such as  prototype design, UI design, UX design
• Other professional skill-sets include-
• An ability to think globally
• Good communication skills
• Creativity and curiosity to learn new things
• Time management skills

Today, the role of a Full-stack developer is one of the most sought-after job roles in leading companies, and the demand for skilled professionals is expected to grow exponentially beyond 2019. One can choose a career as a Full-stack developer for the following reasons:

• Full-stack developers are in great demand due to their diversified coding skills
• The average salary for a Full Stack Developer is $109,791 per year in the United States
• A career in full-stack development is projected to grow 34% by the year 2026
• Full-stack web development is easy to learn if you are familiar with the basics of HTML, JavaScript, Node.js, etc. concepts
• Companies like Apple, JPMorgan Chase & Co., Mercedes, Catalyst Solutions, Cisco Systems Inc., etc hire Full-Stack developers

As a full-stack developer can work on all aspects of software development, many companies are offering more full-stack developer jobs today. Since their demand is more, they are getting paid top dollar for their services. In the United States, Full Stack Developers are earning an average of $ 109,748 per year and in India, they can earn an average of ₹971,465/yr. The salary of a full-stack developer varies depending on the geographic region and the skills they possess.