Course Curriculum

• 1. Fundamentals of Web Technology
• 2. HTML
• 3. XHTML
• 4. CSS
• 5. CSS 3,4
• 6. Basic & Advanced Javascript
• 7. Async / Await
• 8. Ajax
• 9. JSON
• 10. HTML5
• 11. Bootstrap / Tailwind CSS
• 12. Social Media Integrations
• 13. Search Engine Optimization
• 14. Google Analytics Integration
• 15. Capstone Project 1: HTML & CSS Project
• 16. Capstone Project 2: HTML5 & CSS3 Responsive Project with Floats
• 17. Capstone Project 3: HTML5 & CSS3,4 Responsive Project with Flexbox
• 18. Capstone Project 4: JavaScript Project
• 19. Capstone Project 5: Bootstrap / Tailwind CSS Responsive Project
• 20. Domain Registration & Web Hosting
• 21. ECMAScript
• 22. TypeScript
• 23. SASS / SCSS
• 24. React(JavaScript & TypeScript) / Material UI / Jest / Redux / Next.js (React Framework)*****
• 25. CRUD (Create, Read, Update, Delete)
• 26. RESTful APIs to fetch, send, and manipulate data from the server
• 27. JSON Web Token (JWT)
• 28. User Authentication and Authorization
• 29. Developer Tools and Debugging
• 30. AI: ChatGPT, CoPilot, Gemini
• 31. Postman
• 32. Figma
• 33. Version Control & Project Management Tools
  • 1. Bitbucket / GitHub (Version Control with Git)
  • 2. Jira
  • 3. Confluence
• 34. Generative AI
• 35. Capstone Project 7: React
• 36. Deployment: GCP / AWS Cloud / Jenkins

1. Fundamentals of Web Technology

• Network
• Internet
• Web Browsers
• Web Servers
• Web
• Webpage
• Website
• Http
• Https
• Web Development

2. HTML

• Introduction
  • W3C
  • Editors
  • Tag
    • Empty Tag
    • Container Tag
  • Attributes & Parameters
  • Doctypes: DTD
  • Structure Of HTML
  • Basic Tags
    • html
    • head
    • title
    • body
  • Tag vs Element
  • Headings
  • Formatting Tags
  • Paragraph tag
  • Pre tag
  • abbr tag
  • List
    • Ordered List
    • Unordered List
    • Nested List
    • Description List
  • Iframe
  • hr
  • table
  • JPG / PNG / GIF
  • Image tag
    • File Paths
  • Links
    • Image Link
    • Text Link
    • Email Link
  • Quotation
  • Citation
  • Comments
  • Colors
  • Computer Code
  • Entities
  • Symbols
  • Emojis
  • Charset
  • URL Encode
  • Meta Tags
  • Form tags
  • Style Guide
  • Deprecated tags
    • center
    • font
    • basefont
    • s
    • strike
    • u
    • applet
    • isindex
    • acronym
    • frame
    • frameset
    • noframes
    • embed
    • marquee
    • big
    • dir
    • spacer
    • tt
  • Deprecated Attributes
    • align - caption, iframe, img, input, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, td, th, and tr.
    • hspace - img
    • vspace - img
    • width - hr, table, td, th, pre, img.
    • height - table, td, th, pre, img.
    • background - body
    • bgcolor - table, tr, td, th and body.
    • rules - table
    • border - table, img
    • cellpadding - table
    • cellspacing - table
    • size - hr
    • type - li, ol and ul
    • noshade - hr
    • char
    • charoff
    • color, face - font
    • marginwidth, marginheight - iframe, body
    • nowrap - td,th
    • size - font,hr
    • start - ol
    • valign - td, th, tr

3. XHTML

• XHTML
• Differences between HTML and XHTML

4. CSS

• Introduction
• Syntax
• Types of StyleSheets
  • Internal StyleSheets
  • External StyleSheets
  • Inline StyleSheets
  • Compound StyleSheet
• !important
• Types of Selectors
  • Simple
    • Universal
    • Element
    • Class
    • Element.class
    • Id
    • Element.id
    • Grouping
  • Combinators
    • Descendant
    • Child
    • Adjacent
    • General
  • Pseudo-class(Links)
  • Pseudo-elements
  • Attribute
• Block & Inline
• inline-block
• Div's & Span tags
• display
• Visibility
• Units
• Box Model
  • Border
    • border
    • border-color
    • border-style
    • border-width
    • border-bottom
      • border-bottom-color
      • border-bottom-style
      • border-bottom-width
    • border-left
      • border-left-color
      • border-left-style
      • border-left-width
    • border-right
      • border-right-color
      • border-right-style
      • border-right-width
    • border-top
      • border-top-color
      • border-top-style
      • border-top-width
  • outline
    • outline-style
    • outline-width
    • outline-color
  • margin
    • margin-bottom
    • margin-left
    • margin-right
    • margin-top
  • padding
    • padding-bottom
    • padding-left
    • padding-right
    • padding-top
• Font
  • font-family
  • color
  • font-size
  • Set Font Size With Pixels
  • Set Font Size With em
  • font-style
  • font-variant
  • font-weight
  • font
• Text
  • Color
  • letter-spacing
  • Word-spacing
  • line-height
  • text-align
  • text-align-last
  • text-decoration
    • text-decoration-line
    • text-decoration-color
    • text-decoration-style
    • text-decoration-thickness
  • text-indent
  • text-transform
  • vertical-align
  • White-space
  • Direction
  • unicode-bidi
• Background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background
• Image Sprites
• Comments
• Icons
• Images
• opacity
• FORMS
• Links
  • a:link
  • a:visited
  • a:hover
  • a:active
• cursor
• Lists
  • list-style
  • list-style-type
  • list-style-position
  • list-style-image
• Tables
  • border
  • border-collapse
  • width
  • height
  • text-align
  • vertical-align
  • padding
• Dimension
  • height
  • width
  • max-height
  • min-height
  • max-width
  • min-width
• Positioning
  • bottom
  • clip
  • left
  • overflow
  • absolute
  • fixed
  • relative
  • static
  • right
  • top
  • z-index
  • sticky
• float & clear
• Counters
• Specificity
• Math functions
• Navigation (Menu) Bar
• Dropdown Navigation Bar
• Capstone Project 1: HTML & CSS

5. CSS 3,4

• Introduction to CSS3
• What's New in CSS3 and CSS4
• border-image
• box-shadow
• text-shadow
• border-radius
• Image Reflection
• background
  • background-clip
  • background-origin
  • background-size
  • Multiple Background Images
• Color Keywords
• Gradients
  • Linear Gradients
  • Radial Gradients
  • Conic Gradients
• text effects
  • word-wrap
  • text-overflow
  • word-break
  • writing-mode
• Web fonts
• Google fonts
• 2D Transforms
• 3D Transforms
• RGBA
• Box Sizing
• Transitions
• Animations
• Style Images
• object-fit
• object-position
• Masking
• Multiple Columns
• User Interface
• Variables
• Box-sizing
• Flex
• Media Queries
• Orientation
• favicon
• Grid
• Capstone Project 2: HTML5 & CSS3 Responsive Project with Floats
• Capstone Project 3: HTML5 & CSS3,4 Responsive Project with Flexbox
• Content will be updated as per latest updates

6. Basic & Advanced Javascript

• Introduction to JavaScript
• Syntax
• Statements
• Types of Scripts
  • Internal
  • External
  • Inline
• Write / Writeln
• innerHTML
• innerText
• textContent
• console
• Print
• Popup Boxes
  • alert
  • confirm
  • prompt
• Naming Conventions
  • Lower Camel Case
  • Upper Camel Case
  • Snake Case
  • Kebab Case
  • Screaming Snake Case
  • Train Case
  • Flat Case
  • Upper Flat Case
  • Title Case
  • Sentence Case
  • Toggle Case
• Comments
• Variables
• Hoisting
• Operators
  • Arithmetic
  • Assignment
  • String
  • Type
  • Comparison
  • Logical
• Conditional Statements
  • if
  • if...else
  • if...else if...else
  • Switch
• Loops
  • while
  • do...while
  • for
  • for...in
  • for...of (ES6)
  • Break
  • Continue
• Functions
  • User-defined
  • Syntax
  • Parameters and Arguments
  • Returning Values
  • Self-Invoked
• Functions
  • Declaration
  • Expression
  • Self-Invoked
  • this
    • call
    • apply
    • bind
  • Closures
  • Local and Global Variables
  • Recursive Functions
  • Built-in Functions
    • Global
    • Number
    • String
    • Array
    • Math
    • Date
    • JSON
    • Utility
• Events
  • Introduction
  • Mouse Events
  • Keyboard Events
  • Form Events
  • Document Events
  • Window Events
  • Event Bubbling
• Page Redirection
• Timing Events
  • setTimeout
  • setInterval
• Built-in Objects
  • Introduction
  • Arrays
  • Array Properties and Methods
  • Number
  • Strings
  • Math
  • Date
  • Boolean
  • Regexp
  • Exception Handling (Errors)
    • try
    • catch
    • throw
    • finally
    • Fetch
    • Error Object Properties
    • JSON (JavaScript Object Notation)
  • Object
    • Creating a JavaScript Object
    • JavaScript Keyword new
    • Properties
    • Adding Methods to an Object
    • Nesting
    • Display
    • Using an Object Constructor
    • Prototypes
    • Getter / Setter
    • Protection
• Debugging
  • console
  • developer tools
  • debugger
  • try…catch
  • breakpoints
  • Network
• DOM (Document Object Model)
  • Introduction
  • Methods
  • Document
  • Elements
  • HTML
  • Forms
  • CSS
  • Animations
  • Events
  • EventListener
  • Navigation
  • Nodes
  • Collections
  • Node Lists
• Browser BOM
  • Window
  • Screen
  • Location
  • History
  • Navigator
  • Popup
  • Timing
  • Cookies
• Execution Context and Call Stack
• Form Validations
  • Basics of Form Validation
  • Validating Radio Buttons
  • Validating Checkboxes
  • Validating Select Menus
  • Validating Text & Textareas
  • Validating Through Regular Expressions: Alphabetical, Alphanumeric, Email, Date, Image, Password, Phone, Zip Code, and so on
• Capstone Project 5: JavaScript Project

7. Async / Await

• Callbacks
• Asynchronous
• Promises
• Async / Await

8. Ajax

• Introduction
• XMLHttpRequest
• Request
• Response
• JSON
• REST API
• GET
• POST
• PUT
• DELETE

9. JSON

• Introduction
• Syntax
• JSON vs XML
• Datatypes
• parse
• stringify
• Object
• Arrays
• Server
• Html
• JSON vs JSONP

10. HTML 5

• What is HTML5
• Overview of HTML5
• Browser Support
• W3C and Web Hypertext Application Technology Working Group (WHATWG) Specifications
• Overview of Updated New Features
• HTML5 Syntax
  • The DOCTYPE
  • Character Encoding
  • The <script> tag
  • The <link> tag
  • HTML5 Document
• Forms
  • email
  • url
  • tel
  • number
  • range
  • date
  • time
  • datetime
  • datetime-local
  • month
  • week
  • color
• Form Elements
  • datalist
  • output
  • progress
  • meter
  • fieldset
• New Attributes for <form>
  • autocomplete
  • novalidate
  • target
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • accept-charset
• New Attributes for <input>
  • autocomplete
  • autofocus
  • form
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • readonly
  • required
  • step
  • size
  • maxLength
  • inputmode
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
• Multimedia Elements
  • Media
  • audio
  • video
  • youtube
• Types of Elements
  • Semantic Elements
  • Structural Elements
• HTML5 New Elements
  • article
  • section
  • header
  • footer
  • nav
  • aside
  • main
  • figcaption
  • figure
  • time
  • mark
  • details
  • summary
  • progress
  • output
  • address
  • dialog
  • template
  • slot
  • wbr
  • hgroup
• Migration from HTML4 to HTML5
  • HTML5 Browser Support
  • HTML5 Elements as Block Elements
  • Adding New Elements to HTML
  • Problem with Internet Explorer
  • Complete Shiv Solution
  • HTML5 Skeleton
• HTML5 Deprecated Tags
  • center
  • font
  • basefont
  • s
  • strike
  • u
  • applet
  • isindex
  • acronym
  • frame
  • frameset
  • noframes
  • embed
  • marquee
  • big
  • dir
  • spacer
  • tt
• HTML5 Deprecated Attributes
  • align - caption, iframe, img, input, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, td, th, and tr.
  • hspace - img
  • vspace - img
  • width - hr, table, td, th, pre, img.
  • height - table, td, th, pre, img.
  • background - body
  • bgcolor - table, tr, td, th and body.
  • rules - table
  • border - table, img
  • cellpadding - table
  • cellspacing - table
  • size - hr
  • type - li, ol and ul
  • noshade - hr
  • char
  • charoff
  • color, face - font
  • marginwidth, marginheight - iframe, body
  • nowrap - td, th
  • size - font, hr
  • start - ol
  • valign - td, th, tr
• Web Storage
  • Local Storage
  • Session Storage
• Web SQL
• Web Workers
• MathML
• Drag and Drop API
• Canvas Overview
  • Lines
  • Curves
  • font
  • Image
  • Paths
  • Shapes
  • Color, Gradients
• SVG
  • What is SVG?
  • SVG Advantages
  • Differences Between SVG and Canvas
  • Rectangle
  • Circle
  • Ellipse
  • Line
  • Polygon

11. Bootstrap / Tailwind CSS

• What is Bootstrap?
• Bootstrap History
• Why Use Bootstrap?
• What Does Bootstrap Include?
• HTML File
• Adding Bootstrap to Your Web Pages
• Downloading Bootstrap
• Bootstrap CDN
• Put Your HTML Elements Inside Containers
• Bootstrap Browser/Device Support
• Layout
  • Breakpoints
  • Containers
  • Grid
  • Columns
  • Gutters
  • Utilities
  • Z-index
  • CSS Grid
• Content
  • Reboot
  • Typography
  • Images
  • Tables
  • Figures
• Forms
  • Overview
  • Form control
  • Select
  • Checks & radios
  • Range
  • Input group
  • Floating labels
  • Layout
  • Validation
• Components
  • Accordion
  • Alerts
  • Badge
  • Breadcrumb
  • Buttons
  • Button group
  • Card
  • Carousel
  • Close button
  • Collapse
  • Dropdowns
  • List group
  • Modal
  • Navbar
  • Navs & tabs
  • Offcanvas
  • Pagination
  • Placeholders
  • Popovers
  • Progress
  • Scrollspy
  • Spinners
  • Toasts
  • Tooltips
• Helpers
  • Clearfix
  • Color & background
  • Colored links
  • Focus ring
  • Icon link
  • Position
  • Ratio
  • Stacks
  • Stretched link
  • Text truncation
  • Vertical rule
  • Visually hidden
• Utilities
  • API
  • Background
  • Borders
  • Colors
  • Display
  • Flex
  • Float
  • Interactions
  • Link
  • Object fit
  • Opacity
  • Overflow
  • Position
  • Shadows
  • Sizing
  • Spacing
  • Text
  • Vertical align
  • Visibility
  • Z-index
• Extend
  • Approach
  • Icons
• Capstone Project 5: Bootstrap / Tailwind CSS Responsive Project

12. Social Media Integrations

13. Search Engine Optimization

14. Google Analytics Integration

15. Capstone Project 1: HTML & CSS Project

16. Capstone Project 2: HTML5 & CSS3 Responsive Project with Floats

17. Capstone Project 3: HTML5 & CSS3,4 Responsive Project with Flexbox

18. Capstone Project 4: JavaScript Project

19. Capstone Project 5: Bootstrap / Tailwind CSS Responsive Project

20. Domain Registration & Web Hosting

21. ECMAScript:

• Introduction
• Environment
• Syntax
• Console
• Scripting language vs Programming language
  • Execution process
  • No Intermediate Output
  • Feedback and Debugging
  • Usage
• Variables
  • Automatically
  • Using var (js)
  • using let (es6)
  • using const (es6)
  • Differences between var, let and const
  • Hoisting
• Operators
  • Arithmetic
  • Assignment
  • String
  • Type
  • Comparison
  • Logical
• Decision Making (Conditions)
  • If statement
  • ? ternary operator
  • If..else statement
  • If..else if..else statement
  • switch statement
• Loops
  • for
  • While
  • do..While
  • for/in
  • for/of
  • break
  • continue
• Functions
  • Anonymous
  • Shadowing vs Closures
  • Arrow functions
    • Parameters
    • Implicit return
    • this
    • No arguments
    • No new
    • No prototype property
    • Returning Object Literal
    • Array methods
• Primitive Data Types
  • Number
  • String
  • Boolean
  • Null
  • Undefined
  • Symbol
  • BigInt
• Literals
  • Numeric
  • Integers
  • Floating-Points
  • String
  • Boolean
  • Objects
  • Array
  • Template
  • Regexp or Pattern
  • Null
  • Undefined
• Rest vs Spread Operator
• Destructuring
• Modules
• Iterator
  • String
  • Array
  • Map
  • Set
• Collections
  • Map
  • Set
  • WeakMap
  • WeakSet
• Generators
• Reflect API
• Proxy API
• Classes (OOPS: Object-Oriented Programming System)
  • Class Declaration
  • Class Expression
  • Constructor
  • Class Methods
  • Static Methods
  • Setters and Getters
  • instanceof operator
  • Class Inheritance
  • Super Keyword
  • Method Overriding
  • Private Fields and Methods
  • Class Fields
  • Abstract Class
  • Mixins
  • Sub-Classing Built-in Objects
  • Encapsulation
  • Polymorphism
  • Mutable Objects
• Versions and New Features
  • EcmaScript 1997 : ECMAScript 1(ES1) was standardized by Ecma International, based on JavaScript 1.1, to create a formal, consistent specification for the language.
  • ES2 : 1998
  • ES3 : 1999
  • ES4 : Development abandoned
  • ES5 : 2009
  • ES5.1 : 2011
  • ES6 : 2015
  • ES7 : 2016
  • ES8 : 2017
  • ES9 : 2018
  • ES10 : 2019
  • ES11 : 2020
  • ES12 : 2021
  • ES13 : 2022
  • ES14 : 2023
  • ES15 : 2024
  • ES16 : 2025
• Content will be updated as per latest updates.

22. TypeScript:

• Introduction
• Environment
• Syntax
• Variables & Data Types
• Operators
• Decision Making (Conditions)
• Loops
• Functions
• Arrays & Tuples
• Objects & Interfaces
• Advanced Types
• Classes (OOPS: Object-Oriented Programming System)
• Generics
• Modules & Namespaces
• Iterators & Collections
• Decorators
• Asynchronous Programming
• TypeScript Utility Types
• Reflect API & Proxy API
• Advanced TypeScript Features
• TypeScript and Frontend Frameworks
• TypeScript and Backend Development
• Unit Testing in TypeScript
• TypeScript Best Practices
• TypeScript Versions and Features

23. SASS, SCSS:

• Variables
• Nesting
• Partials
• Modules
• Mixins
• Extend/Inheritance
• Operators

24. React(JavaScript & TypeScript) / Material UI / Jest / Redux Next.js (React Framework)*****:

• What is React?
• React vs Other Frontend Frameworks
• Introduction
• Library
• Collection of functions
• Difference between Functions and Utilities
• Classes
• Single-Page Application (SPA)
  • What is a SPA?
  • How SPAs Work
  • Initial Load
  • Dynamic Updates
  • Benefits of SPAs
• Why React?
  • Declarative UI
  • Component-based
  • Key Features of React
• React History
• React 19: New Features & Updates
  • React Compiler for Performance Optimizations
  • New Hooks and Enhanced useState Hook
  • React Actions API (Alternative to useEffect)
  • New Suspense and Streaming Improvements
  • New React Optimistic Updates API
  • Refactor useEffect with React Actions
  • Automatic React Server Components (RSC) Enhancements
  • React Profiling and Debugging Updates
• DOM in React
  • HTML DOM Vs JavaScript DOM
  • Real (HTML / JS) DOM
  • Virtual DOM
  • Difference between Real DOM and Virtual DOM
• Setting Up the React Environment
  • npx and npm ecosystem
  • Setting up a React development environment (Node.js, npm, or Yarn)
  • Creating a React project (Vite / Next)
  • Understanding React Project Structure
  • Running a React App
  • Flow of execution
  • React’s Strict Mode in Development
• JSX (JavaScript XML)
  • What is JSX?
  • Syntax
  • Using JavaScript inside JSX
  • JSX and Babel Compilation
  • Expressions in JSX
  • Handling attributes in JSX (class, htmlFor)
• Components in React
  • What are Components?
  • Functional component
  • Class Component
  • Nested Components
  • Components in Files
  • Writing and Exporting Components
  • Importing Components
• Props
  • What are Props?
  • Passing Props to Components
  • Default Props
  • Prop Types for Type Checking
  • Destructuring Props
  • Props vs State
• Event Handling
  • Introduction to Event Handling
  • Basic Event Handling in JSX
  • Passing Arguments to Event Handlers
  • Preventing Default Behavior
  • Stopping Event Bubbling & Event Capturing
• State Management in React
  • What is State?
  • Managing Local State with useState
  • Updating State Correctly
  • Handling Complex State Objects
  • State Immutability in React
• React Hooks (Deep Dive)
  • What are Hooks?
  • Rules of Hooks
  • Built-in Hooks:
    • useState
    • useEffect
    • useRef
    • useMemo
    • useCallback
    • useReducer
    • useContext
    • useLayoutEffect
  • New Hooks in React 19
• React Router
  • Installing and Setting Up React Router
  • BrowserRouter, HashRouter, and MemoryRouter
  • Defining Routes with Route Component
  • Using Link and NavLink for Navigation
• Context API and Global State Management
  • Why Use Context API?
  • Creating a Context with createContext
  • Consuming Context with useContext
  • Updating Context Data
  • Context API vs Redux
• React Performance Optimization
  • Memoization with useMemo
  • Avoiding Unnecessary Re-renders with React.memo
  • useCallback for Optimizing Functions
  • New React 19 Optimistic UI Updates
• Redux & State Management (Advanced)
  • Understanding Redux
  • Setting Up Redux in a React Project
  • Redux Core Concepts:
    • Actions
    • Reducers
    • Store
    • Using useSelector & useDispatch
• React with Next.js
  • Introduction to Next.js
  • Next.js vs React
  • Server-side Rendering (SSR)
  • Static Site Generation (SSG)
  • Incremental Static Regeneration (ISR)
• React with TypeScript
  • Why Use TypeScript with React?
  • Setting Up TypeScript in React
  • Typing Props & State
  • Using TypeScript with Redux
• Deploying React Applications
  • Preparing for Production
  • Optimizing React App Performance
  • Deploying on AWS, GCP, Jenkins
  • CI/CD for React Applications

25. CRUD (Create, Read, Update, Delete)

26. RESTful APIs to fetch, send, and manipulate data from the server

27. JSON Web Token (JWT)

28. User Authentication and Authorization

29. Developer Tools and Debugging

30. AI: ChatGPT, CoPilot, Gemini

31. Postman

32. Figma

33. Version Control & Project Management Tools

• 1. Bitbucket / GitHub (Version Control with Git)
• 2. Jira
• 3. Confluence

34. Generative AI

35. Capstone Project 7: React

36. Deployment: GCP / AWS Cloud / Jenkins