Software Development Training with JavaScript

Introduction to Version ControlL

• What is Version Control
• Why is Version Control Important
• Types of Version Control

Introduction to Git

• What is Git
• Installing Git
• Configuring Git
• Git workflow

Git Basics

• Creating a Git Repository
• Cloning a Git Repository
• Basic Git Commands (add, commit, push, pull, status)

Git Branching

• Understanding Branching
• Creating and Deleting Branches
• Merging Branches
• Merging Branches
• Resolving Merge Conflicts

Git Remote

• Adding Remote Repositories
• Pushing and Pulling Changes
• Fetching and Pulling Changes

Git Collaboration

• Collaborating with Others
• Gitignore

Overview of HTML

• HTML Tags
• HTML Elements
• HTML Attributes
• HTML Comments
• Heading
• Paragraphs
• Text Formatting
• Quotations
• Links
• Images
• Tables

• Lists
• Block and Inline Elements
• HTML Style Guide
• Iframes
• File Paths
• Audio/Video
• Viewport meta tag for Responsive web Design

INTRODUCTION TO CSS

• Benefits of CSS
• CSS Syntax
• How to add CSS to HTML
• Code commenting in CSS
• CSS Selectors (ID, Class, Tags, Attributes)
• CSS Selectors
• Pseudo-classes
• Pseudo Elements
• Applying Colors
• Background Styling
• CSS-Text Fonts
• Height and Width
• Position
• Float
• Flex

• CSS Borders
• Box model
• Margins and Padding
• Outline in CSS
• Text Formatting
• Fonts styling
• Using Icons
• Lists
• CSS Tables
• DropDowns
• Styling Forms
• Website Layout

Layout

• Breakpoints
• Containers
• Grid
• Columns
• Gutters
• Utilities
• Z-index

Content

• Images
• Tables
• Grid
• Figures

Forms

• Form control
• Select
• Checks & radios
• Input group
• Input group
• Layout

Components

• Accordion
• Alerts
• Badge
• Buttons
• Button group
• Card
• Carousel
• Close button
• Collapse
• List group
• Modal
• Navbar

Introduction to JavaScript

• Overview of JavaScript
• Developer console
• Adding JavaScript into HTML
• JavaScript Statements
• Basic Syntax
• JavaScript Comments
• Interaction: alert, prompt, confirm

Variables in JavaScript

• The use of variables?
• JavaScript Let
• JavaScript Const
• JavaScript Reserved Words

Data Types

• Numbers
• Strings
• Boolean
• Array
• Objects
• Null
• Undefined

JavaScript Operators

• Arithmetic Operators
• Assignment operators
• Comparison Operators
• JavaScript Unary Operators
• Ternary Operator
• Instanceof Operator

Conditionals

• If-else
• Switch Case in JavaScript
• Break and Continue

Loops in JavaScript

• For Loop
• While Loop
• For-in Loop

Javascript functions

• User-defined functions
• Anonymous Functions
• Functions as First-Class Citizens
• Callback Functions
• Inbuilt Functions
• Understanding variable scopes in JavaScript
• this in JavaScript

Document Object Model (DOM)

• Introduction to
• Document Object Model
• Select Element By Id
• Select Elements By Name
• Select Elements By Tag Name
• Select Elements By Class Names
• Select Element By CSS Selectors

Traversing elements

• Get the Parent Element
• Get Siblings of an Element
• Get Children of an Element

DOM Manipulating elements

• Create Elements
• Append Child Nodes
• InnerHTML

Javascript Form

• How to Create a Form with the JavaScript?
• Form validation

Event handling

• Introduction to Events
• Page Load Events
• The onLoad Event
• The DOMContent
• Mouse Events
• Keyboard Events
• Scroll Events

ES6

• Template Literals
• Object Literal Syntax
• Default Parameters
• Rest Parameters
• Spread Operator
• Destructuring

Asynchronous JavaScript

• Promises
• Async/await

Error Handling

• try…catch try…catch…finally
• Throw an Exception

Introduction to React

• What is React JS?
• Why use React instead of JavaScript
• Project Overview
• Roadmap

React Setup

• Environment Setup
• Creating New Project
• Analyzing Project Structure

React basics and components

• Components & Why React is Component-Based?
• JSX
• React Elements
• Building Component
• Styling Components
• Dynamic Data in components
• Passing data using Props

State and event handling

• Handling Events in React
• Why are States required?
• useState() Hook
• Form Handling
• Handling form Submission

Contents conditional rendering

• Rendering of List
• Importance of key attribute
• Conditional Statements & Output

Handling side effects

• What are side effects & useEffect()
• UseEffect() hook
• Cleanup function

HTTP Calls using Axios/fetch

• Making first network Call with fetch
• Network call using Axios
• Handling data and states
• Async and Await
• Updating the data

Multipage Single page application with react-router

• Introduction to routIng
• What is Routing, how it works & installation
• Basic Routing
• Link and NavLink
• Dynamic Routes
• Nested Routes
• Redirection and Not Found Page

Global state management with context

• What is React Context?
• React context vs Redux
• When to use React Context?
• Application of react context

Redux

• Introduction to Redux
• Actions
• reducers
• The Redux store
• dispatch
• Connecting Redux to React

Deployment

Node.js

• What is Node.js
• Node.js Process Model
• Install Node.js
• Node.js Console/REPL
• Node.js Basics
• Node.js Modules
• Local Modules in Node.js
• Export Modules in Node.js
• Node Package Manager (NPM)
• Create Web Server in Node.js
• Node.js File System
• Debugging Node.js Application
• Node Inspector for Debugging
• Node.js Application
• Node.js EventEmitter
• Serving Static Files from Node.js
• Database Access
• Node.js Database Access
• Access MongoDB in Node.js

Express

• Overview
• Installation
• Routing
• HTTP
• Methods
• URL Building
• Middleware
• Templating
• Static
• Files
• Form Data
• Database
• Authentication
• RESTful
• APIs
• Error handling
• Debugging

Deployment

Introduction

• What is MongoDB
• Install MongoDB
• MongoDB Basics
• MongoDB Shell
• MongoDB Data Types

CRUD Operation

• Inserting document
• insertOne
• insertMany

Selecting documents

• findOne
• find

Comparison query operation

• $eq: Equal To Operator
• $lt: Less Than Operator
• $lte: Less Than or Equal To Operator
• $gt: Greater Than Operator
• $gte: Greater Than or Equal To Operator
• $ne: Not Equal To Operator
• $in: In Operator
• $nin: Not In Operator

Logical query operator

• $and: Logical AND Operator
• $or: Logical OR Operator
• $not: Logical NOT Operator
• $nor: Logical NOR Operator

Element query operators

• $exists
• $type

Deleting documents

• deleteOne
• deleteMany

Array query operators

• $size
• $all
• $elemMatch

Sorting and limiting

• sort(): Sorting documents
• limit(): Limiting documents

Updating documents

• updateOne: Update one Document
• updateMany: Update Multiple Documents
• $inc: Increase / Decrease Field Value
• $min: Update Field Value
• $max: Update Field Value
• $mul: Mutiply Field By a Number
• $unset: Remove Fields
• $rename: Rename Fields
  Upsert

Aggregation

• Aggregation Pipeline
• $avg
• $count
• $sum
• $max
• $min

Indexes

• MongoDB Indexes
• Create Index
• Unique Index
• Compound index
• Drop Index

Using Mongoose

Deployment