Mern stack development course
- 830+ hours of Preparation.
- 80+ All India Test Series
- 90+ Books for PCMB
- 180+ Daily Practice Papers.
- Doubt Removal & HOTs Sessions
Course Details
Course Details
Unit I: HTML5 Basics
- Understand
the structure of an HTML page
- Learn
to apply physical/logical character effects
- Learn
to manage document spacing
Tables
- Understand
the structure of an HTML table
- Learn
to control table format like cell spanning, cell spacing, border
List
- Numbered
List
- Bulleted
List
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
Image Handling
- Understand
the role of images in web pages
- Learn
to add images to web pages
- Learn
to use images as hyperlinks
Frames
- Understand
the need for frames in web pages
- Learn
to create and work with frames
HTML Forms for User Input
- Understand
the role of forms in web pages
- Understand
various HTML elements used in forms, such as:
- Single line text field
- Text area
- Check box
- Radio buttons
- Password fields
- Drop-down menus
New Form Elements
- Understand
the new HTML form elements such as date, number, range, email, search and
data list
Offerings of HTML5
- HTML5
– Page Layout
- HTML5:
Browser Support
- Enhanced
Form Elements
- Audio
And Video
- HTML5
Canvas
- HTML5
– Client-Side Storage
- Introduction to HTML5 Client-Side Storage
- Types of Client-Side Storage
Unit II: CSS2/CSS3
- Benefits
of CSS
- CSS
Versions History
- CSS
Syntax
- External
Style Sheet using
- Multiple
Style Sheets
- Value
Lengths and Percentages
CSS-Syntax
- Single
Style Sheets
- Multiple
Style Sheets
- Value
Lengths and Percentages
- CSS
Selectors
- Color
Background
CSS Backgrounds and Borders
- background-image
- background-repeat
- background-position
- CSS
Cursor
CSS-Text Fonts
- color
- background-color
- text-decoration
- text-align
- vertical-align
- text-indent
- text-transform
- white-space
- letter-spacing
- word-spacing
- line-height
- font-family
- font-size
- font-style
- font-variant
- font-weight
CSS-Lists Tables
- list-style-type
- list-style-position
- list-style-image
- list-style
CSS Tables
- border
- width
& height
- Text-align
- vertical-align
- padding
- color
CSS-Box Model
- Borders
& Outline
- Margin
& Padding
- Height
and width
- CSS
Dimensions
- CSS
Display Positioning
CSS Visibility
- CSS
Display
- CSS
Scrollbars
CSS Positioning
- Static
Positioning
- Fixed
Positioning
- Relative
Positioning
- Absolute
Positioning
- CSS
Layers with Z-Index
CSS Floats
- The
float Property
- The
clear Property
- The
clearfix Hack
Color, Gradients, Background Images,
and Masks
- Opacity
- New
Color Names
- Nonimage
Gradients
- Multiple
Background Images
- Background-size
- Background-origin
- Background-clip
- Image
Masks
Border and Box Effects
- Rounded
Corners
- Resizing
- Outline
Offsets
- Appearance
- Image
Borders
- Box
Shadow
Working with Colors
- Background
- Multiple
Background Colors
- RGB
and RGBA
- Alpha
factor
- Opacity
& Transparency
- Using
currentColor
- Working
with gradients
Layout: Columns, Flex Box
- Column-count
- Column-gap
- Column-rule
- Multiple
Column Layouts
- Gaps
between Columns
- Box-orient
- Box-pack
- Box-align
- Box-flex
- Display:
box
- Grouping
and Changing Orientation
- Alignment
Vendor Prefixes
- Current
status of -moz, -o, etc.
- When
and Why to Use
Media Queries
- Targeting
Device Capabilities: Width, Screen Size, Color Depth, etc.
- Building
Responsive Sites: Implications for Mobile
Implementing CSS3
- Modernizr
- HTML5
Shims
- jQuery
- LESS,
SASS, and Other CSS Preprocessors
- CSS
Grid Systems
- CSS
Frameworks
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
Unit III: Bootstrap
- What
is Bootstrap Framework
- Why
Bootstrap
- History
of Bootstrap
- Advantages
of Bootstrap Framework
- What
is Responsive web page
- How
to remove Responsiveness
Major Features of Bootstrap
- What
is Mobile-First Strategy
- Setting
up Environment
- How
to apply Bootstrap to Applications
Bootstrap Grid
- What
is Bootstrap Grid
- How
to apply Bootstrap Grid
- What
is Container
Bootstrap
- What
is Bootstrap Framework
- Why
Bootstrap
- History
of Bootstrap
- Advantages
of Bootstrap Framework
- What
is Responsive web page
- How
to remove Responsiveness
Major Features of Bootstrap
- What
is Mobile-First Strategy
- Setting
up Environment
- How
to apply Bootstrap to Applications
Bootstrap Grid
- What
is Bootstrap Grid
- How
to apply Bootstrap Grid
- What
is Container
- What
is Offset Column
- How
to Reordering Columns
- Advantages
of Bootstrap Grid
- How
to Display responsive Images
- How
to change class properties
How to customize Bootstrap’s
components, Less variables, and jQuery plug-in
- What
is Bootstrap Typography
- How
to use Typography
- What
is Bootstrap Tables
- What
is Bootstrap Form Layout
- What
is Bootstrap Button
- How
display images in different styles like Circle shape etc
- How
to display text like muted and warning etc
- What
is Carets Classes
- How
to hide or show the text in Bootstrap
Bootstrap Components ,Bootstrap
Plugins
JavaScript, JavaScript Fundamentals
- Introduction
to Procedural Programming
- Front-End
HTML, CSS and JavaScript!
- Best
Approaches to Learn JS Editors
- Where
to place your JS Code? And Using CodePen
- Webkit’s
Web Inspector
- Tracking
down errors
- JS
versions (EcmaScript5 and EcmaScript6)
- Browser
Support for ES6
- Javascript
Output Methods
- JavaScript
Variables
- Comments
- Console
- Data
Types in JavaScript
- Date
Objects
- Operators
- Conditions
And Loops (control Structures)
- Arrays
and Array Methods
- String
and String Methods
- The
modern mode, “use strict”
- Objects
- Functions
- Prototypes
- objects
BOM (Browser Object Model)
- History
object
- Document
Object
- Navigator
Object
- Location
Object
- Screen
Object
DOM (Document Object Model)
- Browser
environment, specs
- DOM
tree
- DOM
Methods
- Searching:
getElement*, querySelector*
- Node
properties: type, tag and contents
- Attributes
and properties
- Modifying
the document
- Styles and classes
- Element size and scrolling
- Window sizes and scrolling
- Coordinates
Advanced working with functions
- Recursion
and stack
- Rest
parameters and spread operator
- Closure
- The
old “var”
- Global
object
- The
“new Function” syntax
- Scheduling:
setTimeout and setInterval
- Decorators
and forwarding, call/apply
- Function
binding
Ajax Development
- Creating
the XMLHttp,Request Object
- Managing
Ajax Requests
- JSON,
API & AJax
- JSON
Introduction
- JSON
Parse
- JSON
Stringify
- JSON
Object
- HTTP
Methods – REST API
- XMLHttpRequest
Object
- XHR
Methods
- XHR
Properties
ES6(ECMA 2015) ES6 Features
- Let,
Var and Const Keywords
- Arrow
Functions
- Default
function arguments
- Template
Strings
- Object
Destructuring
- Array
Manipulation Functions
- Array.from()
- Array.of()
- Array.find()
- Array.findIndex()
- Array.some()
- Array.every()
- …spread
and …rest operators
- Promises
- Promises,
async/await
- Introduction: callbacks
- Promise
- Promises chaining
- Error handling with promises
- Promise API
- Promisification
- Symbols
- Code
quality with ESLint
- ES6
Tooling
- Babel
- npm
- webpack overview
- Classes
- Inheritance
- Generators
- Proxies
- Async,
await flow control
- Map,
Set Operators
Modules
- Modules,
introduction
- Export
and Import
- Dynamic
imports
TypeScript
- Introduction
to Typescript
- JavaScript
& Typescript
- 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
- OOPS
in typescript
- Classes
- Class properties
- Static Properties
- Constructors
- getters & setters
- Inheritance
- Abstract classes
- Interfaces
- Access modifiers
- Namespaces
and Modules
- Namespaces and multiple files
- Loading modules
- Generics
- Generic function
ExpressJS
- Introduction
of ExpressJs
- What is ExpressJS
- How Express.js works
- Installation of Express.js
- Basic Example
Templating Engines
- Introduction
- pug
Templating Engine
- Working with Tags in pug
- Working with id and classes in pug
- Attributes and Nesting Tags in pug
- Using if & unless in pug
- Using for & each in pug
- Using case & mixins in pug
- Include and Extend in pug
- EJS
Templating engine
- Express
Handlebars
Working with Express.js
- Introduction
to Express.js
- Connect
Module
- Express.js
Installation
- app.js
- Steps
for creating Express.js Application
- application,
request, response object properties & methods
Request/Response in Express.js
- Request
- params
- body
- files
- route
- header
- get
- Response
- render
- locals
- status
- json
- redirect
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
ReactJS
React Introduction
- Overview
of frameworks, libraries for client side Web applications
- React
introduction
- Environment
Setup for React Application
- Understanding
NPM commands
- VS
Code extensions for ES6, React
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
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
Styling Components
- CSS
Styling
- Scoping
Styles using Inline Styles
- Limitations
of inline styes
- Inline
Styles with Radium
- Using
Psuedo classes/media quries with inline styles
- CSS
Modules, importing css classes
- Adding
Bootstrap, Semantic UI to React apps
- Using
react-bootstrap, reactstrap packages
Debugging React Apps
- Understanding
React Error Messages
- Handling
Logical Errors
- Debugging
React apps using google developer tools and React DevTool
- Understanding
Error Boundaries
React Component life cycle
- Updating
life cycle hooks
- PureComponents
- React’s
DOM Updating Strategy
- Returning
adjacent elements
- Fragments
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
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
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
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
NODEJS: Introduction to Node JS
Introduction
- What
is Node JS?
- Advantages
of Node JS
- Traditional
Web Server Model
- Node.js
Process Model
Setup Dev Environment
- Install
Node.js on Windows
- Installing
in mac os
- Working
in REPL
- Node
JS Console
Event Loop
- Callback
Concept
- Global
Objects
- Streams
- Buffers
- Utility
Modules
Node JS Modules
- Functions
- Buffer
- Module
- Module
Types
- Core
Modules
- Local
Modules
- Module.Exports
Node Package Manager
- What
is NPM
- Installing
Packages Locally
- Adding
dependency in package.json
- Installing
packages globally
- Updating
packages
Creating Web server
- Creating
web server
- Handling
http requests
- Sending
requests
File System
- Fs.readFile
- Writing
a File
- Writing
a file Asynchronously
- Opening
a file
- Deleting
a file
- Other
IO Operations
Debugging Node JS Application
- Core
Node JS debugger
- Debugging
with Visual Studio
Events
- EventEmitter
class
- Returning
event emitter
- Inhering
events
