Mern Stack
Subjects:
• HTML
• Node JS
• CSS2 & CSS3
• Bootstrap
• Java Script
• Mongo DB
• Express JS
• React JS
HTML /HTML5
• HTML5 Basics
o Understand the structure of an HTML page.
o Learn to apply physical/logical character effects.
o Learn to manage document spacing.
• Tables
o Understand the structure of an HTML table.
o Learn to control table format like cell spanning, cell spacing, border
• List
o Numbered List
o Bulleted List
• Working with Links
o Understand the working of hyperlinks in web pages.
o Learn to create hyperlinks in web pages.
o Add hyperlinks to list items and table contents.
• Image Handling
o Understand the role of images in web pages
o Learn to add images to web pages
o Learn to use images as hyperlinks
• Frames
o Understand the need for frames in web pages.
Contact: 9900018030
o Learn to create and work with frames.
• HTML Forms for User Input
o Understand the role of forms in web pages
o Understand various HTML elements used in forms.
o Single line text field
o Text area
o Check box
o Radio buttons
o Password fields
o Drop-down menus
• New Form Elements
o Understand the new HTML form elements such as date, number, range, email, search and Data list
o Offerings of HTML5
o HTML5 – Page Layout
o HTML5: Browser Support
o Enhanced Form Elements
o Audio And Video
o HTML5 Canvas
• HTML5 – Client-Side Storage
o Introduction to HTML5 Client-Side Storage
o Types of Client-Side Storage
CSS2/CSS3
CSS2-Introduction In this module CSS is used to style and lay out web pages — for example, to alter
the font, colour, size and spacing of your content, split it into multiple columns, or add animations
and other decorative features. This module gets you started on the path to css.
Benefits of CSS
CSS Versions History CSS Syntax External Style Sheet using Multiple Style Sheets
Value Lengths and Percentages
Contact: 9900018030
CSS-Syntax
the basic goal of the Cascading Stylesheet (CSS) language is to allow a browser engine to paint
elements of the page with specific features, like colors, positioning, or decorations. The CSS syntax
reflects this goal and its basic building blocks are
Single Style Sheets
Multiple Style Sheets
Value Lengths and Percentages
CSS Selectors
Color Background
CSS Backgrounds and Borders is a module of CSS that lets you style elements backgrounds and
borders. Backgrounds can be filled with a color or image, clipped or resized, and otherwise modified.
Borders can be decorated with lines or images, and made square or rounded.
background-image background-repeat background-position CSS Cursor
CSS-Text Fonts
CSS Fonts that defines font-related properties and how font resources are loaded. It lets you define
the style of a font, such as its family, size and weight, line height, and the glyph variants to use when
multiple are available for a single character
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
Contact: 9900018030
Lists table that defines how to lay out table data.
list-style-type list-style-position list-style-image list-style
CSS Tables
I. border II. width & height III. Text-align IV. vertical-align V. paddingVI. color
CSS-Box Model
CSS box model that defines the rectangular boxes—including their padding and margin—that are
generated for elements and laid out according to the visual formatting model.
Borders & Outline Margin & Padding Height and width CSS Dimensions
CSS Display Positioning
CSS property specifies how an element is positioned in a document. The top, right, bottom, and left
properties determine the final location of positioned elements.
CSS Visibility CSS Display CSS Scrollbars
CSS Positioning
1. Static Positioning
2. Fixed Positioning
3. Relative Positioning
4. Absolute Positioning
CSS Layers with Z-Index
CSS Floats
The float CSS property specifies that an element should be placed along the left or right side of its
container, allowing text and inline elements to wrap around it. The element is removed from the
Contact: 9900018030
normal flow of the web page, though remaining a part of the flow (in contrast to absolute
positioning).
The float Property
The clear Property
The clearfix Hack
Color, Gradients, Background Images, and Masks
o Opacity
o New Color Names
o Nonimage Gradients
o Multiple Background Images
o Background-size, Background-origin, Background-clip
o Image Masks
Border and Box Effects
o Rounded Corners
o Resizing
o Outline Offsets
o Appearance
o Image Borders
o Box Shadow
Working with Colors
o Background
o Multiple Background
o Colors
RGB and RGBA
Alpha factor
Contact: 9900018030
Opacity & Transparency
o Using currentColor
o Working with gradients
Layout: Columns, Flex Box
o Column-count, Column-gap, Column-rule
o Multiple Column Layouts
o Gaps between Columns
o Box-orient, Box-pack, Box-align, Box-flex, etc.
o Display: box
o Grouping and Changing Orientation
o Alignment
Vendor Prefixes
o Current status of -moz, -o, etc.
o When and Why to Use
Media Queries
o Targeting Device Capabilities: Width, Screen Size, Color Depth, etc.
o Building Responsive Sites: Implications for Mobile
Implementing CSS3
o Modernizr
o HTML5 Shims
o jQuery
o LESS, SASS, and Other CSS Preprocessors
o CSS Grid Systems
o CSS Frameworks
Transforms, Transitions, and Animations
o translate(), rotate(), etc.
Contact: 9900018030
o 3D: rotateX(), rotateY()
o changing, for example, the width of a div on hover (without JS)
o animations: @keyframes, animation
BOOTSTRAP
Introduction to Bootstrap
you will learn about Bootstrap Introduction, how to design web page look and feel good by using
Bootstrap and the basics of Bootstrap Framework using which you can create web projects with ease
that
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
Bootstrap Grids in web design organise and structure content, makes the websites easy to scan and
reduces the cognitive load on users. How to create page layouts through a series of rows and
columns that house your content and how the Bootstrap grid system works that
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
Contact: 9900018030
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 Javasscript Output Methods JavaScript Variables
Comments Console Datatypes 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
Contact: 9900018030
Ajax Development
Creating the XMLHttpRequest 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 De-structuring 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
Contact: 9900018030
Dynamic imports
TYPESCRIPT
• Introduction to Typescript
o Introduction to Typescript
o JavaScript & Typescript
• The Type System
o Primitive types & type inference
o Object type & type inference
o Function type & type inference
o Enums, Tuples
o Nullable types
o Union types, intersection types
o Never and void types
• OOPS in typescript
o Classes, Class properties, Static Properties
o Constructors, getters & setters
o Inheritance, Abstract classes, Interfaces
o Access modifiers
• Namespaces and Modules
o Namespaces and multiple files
o Loading modules
• Generics
o Generic functions, classes
o Generic types and arrays
o Constraints
• Decorators
o Class Decorators
o Decorator Factories
o Method Decorators
Contact: 9900018030
o Property Decorators
o Parameter Decorators
• Typescript essentials
o tsc and tsconfig file
o debugging typescript
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
Contact: 9900018030
◦ 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
Contact: 9900018030
◦ 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
• Deploying React App to the Web
• Testing React apps with JEST
Contact: 9900018030
MONGODB
• MongoDB – Overview
o Understand what is NOSQL
o Describe CRUD
o State the types of NOSQL
o Explain what is Aggregation
o Describe Replication & Sharding
• CRUD Operations
o Understand what are Crud Operations
o Explain what is Upsert
o Describe Query Interface
o List the Comparison Operators and Logical Operators
o State what are Wrapped Queries and Query Operators
• Basic Operations
o Crud Operations
o Basic Operations With Mongo Shell
o Data Model
o JSON
o BSON
o MongoDB – Datatypes
o BSON Types
o The _id Field
o Document
o Document Store
o Blog: A Bad Design
o Blog: A Better Design
• Aggregations
Contact: 9900018030
o Types of Aggregations
o What is Aggregation?
o The Aggregate() Method
o Pipeline Concept
o Pipelines
o Pipeline Flow
o Pipeline Operators
o $match, $unwind
o $group, $project
o $skip, $limit
o $sort, $first
o $last, $sum
• Indexing
o Understand about Indexes
o Understand different types of Indexes
o Understand properties of Indexes
o Explain Plan in MongoDB
o Mongostat
o Mongotop
o Logging Slow queries
o Profiling
• Replication and Sharding
o Understand about Replication
o Purpose of Replication
o Understand Replica Set
o Sharding
o Sharding Mechanics
o GridFS
NODEJS
Contact: 9900018030
- 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 Mananger
What is NPM
Contact: 9900018030
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
EXPRESSJS
• Introduction of ExpressJs
o What is ExpressJS
o How Express.js works
Contact: 9900018030
o Installation of Express.js
o Basic Example
• Templating Engines
o Introduction
o pug Templating Engine
o Working with Tags in pug
o Working with id and classes in pug
o Attributes and Nesting Tags in pug
o Using if & unless in pug
o Using for & each in pug
o Using case & mixins in pug
o Include and Extend in pug
o EJS Templating engine
o Express Handlebars
• Working with Express.js
o Introduction
o Introduction to Express.js
o Connect Module
o Express.js Installation
o app.js
o Steps for creating Express.js Application
o application, request, response object properties & methods
• Request/Response in Express.js
o Request-params,body,files,route,header,get
o Response-render,locals,status,json,redirect
• Using middleware
o Types of middleware
o Application level middleware
o Express-json,session,logger,compress
o Router level middleware
o Built-in middleware
Contact: 9900018030
o Third party middleware
o Express 4.0 Router
Contact: 9900018030
