Course Curriculum

Basic User Interface (UI):

• 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
• 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 Responsive Project
• 20. Domain Registration & Web Hosting

Advanced User Interface (UI):

• 21. ECMAScript
• 22. TypeScript
• 23. SASS / SCSS
• 24. Angular
• 25. NgRx
• 26. Jasmine
• 27. Angular Material
• 28. CRUD (Create, Read, Update, Delete)
• 29. RESTful APIs to fetch, send, and manipulate data from the server
• 30. JSON Web Token (JWT)
• 31. User Authentication (Login / Logout) and Authorization
• 32. Developer Tools and Debugging
• 33. 🤖 Learn Smarter with AI Tools like ChatGPT, Gemini & Copilot
• 34. 🚀Sharpen Your Skills with Real-World Coding Practice on HackerRank, LeetCode & CodeChef
• 35. Postman
• 36. Figma
• 37. Generative AI (Text, Image, Audio, Video, and Code Generation)
• 38. Capstone Project 7: Angular

👨‍💻 eCommerce Application Development — Using Angular + NgRx + REST API

• ⚙️ Agile Development Environment
  • Daily Stand-up / Huddle
  • Sprint Planning
  • Sprint Review
  • Sprint Retrospective
  • Sprint Refinement
  • Tech Refinement
• 📁 Version Control & DevOps Tools
  • GitHub / Bitbucket for code collaboration
  • Jenkins for CI/CD
  • Docker for containerized deployment
• 🧠 Project Management Tools
  • Jira for sprint tasks & user stories
  • Confluence for team documentation & knowledge sharing
• 📧 Real-World Communication Channels
  • Outlook for professional emails
  • Slack / Microsoft Teams for team chat and quick updates
• 🛡️ Security & Authentication
  • Implement JWT and OAuth2
  • Login / Logout handling
  • Role-based Access Control
• 📡 REST API Integration
  • API testing using Postman
  • Frontend API integration
  • Real-time data handling
• 🧪 Unit & Integration Testing
  • Frontend: Jasmine
  • Test API endpoints and complete user flows
• 🖥️ Deployment & Hosting
  • Deploy project on AWS or GCP (Google Cloud Platform)
  • Use Docker containers for hosting
• 📂 Documentation & Reporting
  • Write README and technical documentation
  • Prepare and submit sprint reports
  • Present updates in team reviews
• 🏆 Internship Certificate + Career Boost
  • Verified Internship Certificate from SivaSoft
  • Resume, LinkedIn, and Portfolio optimization

Basic User Interface (UI):

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

• 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 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 Responsive Project

20. Domain Registration & Web Hosting

Advanced User Interface (UI):

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. Angular / 25. Ngrx / 26. Jasmine

• Introduction to angular
  • What is angular?
  • Key features and advantages
  • Setting up the development environment
  • Creating your first angular application
• Components and Templates
  • Creating components
  • Templates and data binding
  • Interpolation and property binding
  • Event binding and two-way data binding
  • angular directives
• Dependency Injection and Services
  • Understanding Dependency Injection (DI)
  • Creating and using services
  • Injecting services into components
  • Singleton services vs. multiple instances
• Routing and Navigation
  • Setting up routing in angular
  • Creating route configurations
  • Navigating between routes
  • Route parameters and data
  • Child routes and lazy loading
• Forms and Validation
  • Template-driven forms
  • Reactive forms with FormBuilder
  • Form validation and error handling
  • Custom form validators
• HTTP and Observables
  • Making HTTP requests with angular HttpClient
  • Handling HTTP responses with Observables
  • Using RxJS operators
  • Authentication and authorization
• angular Modules and NgModules
  • Creating and organizing modules
  • Feature modules and lazy loading
  • NgModule decorators and providers
• Testing in angular
  • Unit testing components and services
  • Testing with TestBed
  • Mocking dependencies
• angular CLI and Project Structure
  • Using the angular CLI for project management
  • Project structure and best practices
  • Generating components, modules, and services
• CRUD Operations with angular
  • Creating a CRUD application
  • Implementing Create, Read, Update, Delete operations
  • Managing component state for data
  • Displaying data in tables and lists
• User Authentication
  • Implementing user registration
  • Storing user credentials securely
  • User login and session management
• Authorization and Protected Routes
  • Defining user roles and permissions
  • Authorizing access to certain routes and components
  • Creating protected routes with route guards
• User Profile and Authentication State
  • Displaying user information in the UI
  • Managing authentication state in NgRx
  • Updating user profiles and passwords
• Logout Functionality
  • Implementing a secure logout process
  • Clearing authentication tokens and user sessions
  • Redirecting users after logout
• Role-Based Authorization
  • Assigning roles to users
  • Configuring role-based access control (RBAC)
  • Restricting access to specific features and data
• JWT (JSON Web Tokens) for Authentication
  • Understanding JWT and its role in authentication
  • Generating and verifying JWT tokens
  • Using JWT for secure API authentication
• NgRx State Management for Authentication and Authorization
  • Managing user authentication state in NgRx
  • Updating user roles and permissions in the store
  • Dispatching actions for login, logout, and role changes
• Secure API Calls
  • Securing API endpoints with authentication checks
  • Passing authentication tokens with API requests
  • Handling unauthorized access errors

27. Angular Material

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

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

30. JSON Web Token (JWT)

31. User Authentication (Login / Logout) and Authorization

32. Developer Tools and Debugging

33. 🤖 Learn Smarter with AI Tools like ChatGPT, Gemini & Copilot

34. 🚀Sharpen Your Skills with Real-World Coding Practice on HackerRank, LeetCode & CodeChef

35. Postman

36. Figma

37. Generative AI (Text, Image, Audio, Video, and Code Generation)

38. Capstone Project 7: Angular