Course Curriculum

Design / UI / UX Tools

• 1. Adobe Photoshop
• 2. Figma
• 3. Adobe Dreamweaver (also supports HTML/CSS coding)

Basic Front-End (UI) Development

• 4. Visual Studio Code
• 5. Fundamentals of Web Technology
• 6. HTML
• 7. XHTML
• 8. CSS
• 9. CSS 3,4
• 10. Basic & Advanced JavaScript
• 11. Async / Await
• 12. Ajax
• 13. JSON
• 14. HTML5
• 15. Bootstrap
• 16. jQuery, jQuery UI, jQuery ThemeRoller
• 17. Social Media Integrations
• 18. Search Engine Optimization
• 19. Google Analytics Integration
• 20. Developer Tools and Debugging
• 21. Postman
• 22. Generative AI
• 23. Website Maintenance
• 24. CMS (Content Management System): WordPress
• 25. Module-wise Project 1: Photoshop Document (PSD) to HTML, CSS (Dreamweaver Layout Conversion)
• 26. Module-wise Project 2: HTML & CSS
• 27. Module-wise Project 3: HTML5 & CSS3 with Float
• 28. Module-wise Project 3: HTML5 & CSS3,4 with Flex
• 29. Module-wise Project 4: JavaScript
• 30. Module-wise Project 5: Designing and Developing Responsive Website (Bootstrap)
• 31. Module-wise Project 6: CMS (Content Management System): WordPress
• 32. Domain Registration & Web Hosting
• 33. PHP, MySQL
• 34. Angular JS (Outdated)

Advanced User Interface (UI):

• 35. ECMAScript
• 36. TypeScript
• 37. SASS / SCSS
• 38. Angular
• 39. NgRx
• 40. Jasmine
• 41. Angular Material
• 42. CRUD (Create, Read, Update, Delete)
• 43. RESTful APIs to fetch, send, and manipulate data from the server
• 44. JSON Web Token (JWT)
• 45. User Authentication (Login / Logout) and Authorization
• 46. Developer Tools and Debugging
• 47. 🤖 Learn Smarter with AI Tools like ChatGPT, Gemini & Copilot
• 48. 🚀Sharpen Your Skills with Real-World Coding Practice on HackerRank, LeetCode & CodeChef
• 49. Postman
• 50. Figma
• 51. Generative AI (Text, Image, Audio, Video, and Code Generation)
• 52. Module-wise Project 7: Angular

👨‍💻 Full-Stack eCommerce Application Development — Using Web Designing, Angular + Redux + 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
  • Password hashing using Bcrypt / Passlib
  • Login / Logout handling
  • Role-based Access Control
• 📡 REST API Integration
  • API testing using Postman
  • Frontend integration with Axios/Fetch
  • Real-time data handling
• 🧪 Unit & Integration Testing
  • Write unit tests for frontend logic
  • Perform integration testing for API endpoints and user flows
  • Tools: Jest, React Testing Library
• 🖥️ 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

1. Adobe Photoshop

• Module 1: Introduction to Photoshop & Interface Overview
  • Photoshop Overview
  • Understanding Photoshop’s applications in web design, photography, and graphic design.
  • Introduction to raster vs. vector graphics.
  • Tools
    • Move Tool (V)
    • Artboard Tool (V)
    • Rectangular Marquee Tool (M)
    • Elliptical Marquee Tool (M)
    • Lasso Tool (L)
    • Polygonal Lasso Tool (L)
    • Magnetic Lasso Tool (L)
    • Object Selection Tool (W)
    • Quick Selection Tool (W)
    • Magic Wand Tool (W)
    • Crop Tool (C)
    • Perspective Crop Tool (C)
    • Slice Tool (C)
    • Slice Select Tool (C)
    • Eyedropper Tool (I)
    • 3D Material Eyedropper Tool (I)
    • Color Sampler Tool (I)
    • Ruler Tool (I)
    • Note Tool (I)
    • Count Tool (I)
    • Spot Healing Brush Tool (J)
    • Healing Brush Tool (J)
    • Patch Tool (J)
    • Content-Aware Move Tool (J)
    • Red Eye Tool (J)
    • Brush Tool (B)
    • Pencil Tool (B)
    • Color Replacement Tool (B)
    • Mixer Brush Tool (B)
    • Clone Stamp Tool (S)
    • Pattern Stamp Tool (S)
    • History Brush Tool (Y)
    • Art History Brush Tool (Y)
    • Eraser Tool (E)
    • Background Eraser Tool (E)
    • Magic Eraser Tool (E)
    • Gradient Tool (G)
    • Paint Bucket Tool (G)
    • 3D Material Drop Tool (G)
    • Blur Tool
    • Sharpen Tool
    • Smudge Tool
    • Dodge Tool (O)
    • Burn Tool (O)
    • Sponge Tool (O)
    • Pen Tool (P)
    • Freeform Pen Tool (P)
    • Add Anchor Point Tool
    • Delete Anchor Point Tool
    • Convert Point Tool
    • Horizontal Type Tool (T)
    • Vertical Type Tool (T)
    • Horizontal Type Mask Tool (T)
    • Vertical Type Mask Tool (T)
    • Path Selection Tool (A)
    • Direct Selection Tool (A)
    • Rectangle Tool (U)
    • Rounded Rectangle Tool (U)
    • Ellipse Tool (U)
    • Polygon Tool (U)
    • Line Tool (U)
    • Custom Shape Tool (U)
    • Hand Tool (H)
    • Rotate View Tool (R)
    • Zoom Tool (Z)
    • 3D Tools (various)
    • 3D Rotate Tool
    • 3D Roll Tool
    • 3D Pan Tool
    • 3D Slide Tool
    • 3D Scale Tool
    • Foreground and Background Color Selector
    • Quick Mask Mode (Q)
  • Photoshop Interface & Workspace
    • Overview of workspaces, tool panels, and navigation.
    • Customizing workspaces, saving, and organizing frequently used tools.
    • Keyboard shortcuts and efficiency tips.
  • File Management & Basics
    • Creating and saving projects: Understanding file types (PSD, JPEG, PNG, TIFF).
    • Resolution types: Image quality, DPI/PPI, and best practices.
    • Color modes: RGB, CMYK, and Grayscale.
    • Navigating the canvas: Zoom, pan, rotate, and understand guides and rulers.
• Module 2: Understanding Layers & Masks
  • Layer Basics
    • Tools: Layers Panel, Lock, Blend Modes, Opacity.
    • Creating, organizing, merging, and linking layers.
    • Understanding layer properties (opacity, blending modes, styles).
  • Smart Objects & Groups
    • Tools: Smart Object Tool, Layer Grouping.
    • Creating layer groups and converting layers to smart objects.
    • Using smart filters for non-destructive editing.
  • Masking Techniques
    • Tools: Layer Mask Tool, Vector Mask Tool.
    • Introduction to masking: Layer mask and vector mask basics.
    • Creating clipping masks for image overlays.
• Module 3: Selections & Transformations
  • Selection Techniques
    • Tools: Marquee Tool, Lasso Tools (Polygonal, Magnetic), Quick Selection Tool, Magic Wand Tool.
    • Using selection tools for basic and complex selections.
  • Transformations & Adjustments
    • Tools: Free Transform Tool (Ctrl/Cmd + T), Skew, Distort, Warp.
    • Transformations: Scale, rotate, distort, skew.
    • Content-Aware Fill Tool, Puppet Warp Tool.
    • Perspective and warp transformations for advanced effects.
• Module 4: Advanced Brush & Drawing Techniques
  • Brush Tools & Customization
    • Tools: Brush Tool (B), Mixer Brush Tool, Pencil Tool, Eraser Tool.
    • Brush settings: Size, hardness, opacity, and blending options.
    • Creating and saving custom brushes.
  • Digital Painting & Effects
    • Tools: Gradient Tool (G), Smudge Tool, Paint Bucket Tool.
• Module 5: Photo Editing & Retouching Techniques
  • Image Adjustments & Corrections
    • Tools: Adjustment Layers (Levels, Curves, Brightness/Contrast, Hue/Saturation), Dodge Tool, Burn Tool.
    • Color corrections for image enhancements.
  • Retouching & Repair Tools
    • Tools: Spot Healing Brush Tool, Healing Brush Tool, Patch Tool, Clone Stamp Tool.
    • Retouching images and frequency separation for skin smoothing.
    • Enhancing images using dodge and burn techniques.
  • Filter Techniques & Smart Edits
    • Tools: Filter Menu (Blur, Sharpen, Noise, Liquify).
    • Applying and modifying filters for creative effects.
    • Using smart filters for non-destructive effects.
• Module 6: Typography & Creative Text Effects
  • Text Basics & Styles
    • Tools: Horizontal & Vertical Type Tools, Character & Paragraph Panels.
    • Adding text and formatting character properties.
    • Advanced text settings: Spacing, alignment, and styles.
  • Creative Typography
    • Tools: Warp Text, 3D Extrusion for text.
    • Warping text for creative effects.
    • 3D text effects and using blending modes.
• Module 7: Working with Colors, Gradients & Swatches
  • Understanding Colors & Gradients
    • Tools: Color Picker, Swatches Panel, Gradient Editor.
    • Working with color selections, swatches, and gradient fills.
• Module 8: Vector Techniques & Shape Tools
  • Shape Tools & Vector Graphics
    • Tools: Shape Tools (Rectangle, Ellipse, Polygon), Pen Tool (P).
    • Drawing basic and custom vector shapes.
  • Advanced Path Editing
    • Tools: Path Selection Tool, Direct Selection Tool, Convert Point Tool.
    • Path operations for designing icons, buttons, and graphics.
• Module 9: Compositing & Special Effects
  • Blending & Compositing
    • Tools: Blending Modes, Layer Mask, Selection Tools.
  • Special Effects & Filters
    • Tools: Effects Panel, Blur Tools, Noise Filters.
    • Creating glow, shadow, and reflection effects.
  • Texture Application & Design
    • Applying and blending textures using different layer effects.
• Module 10: Smart Objects, Actions & Workflow Automation
  • Smart Objects & Linked Elements
    • Converting layers into smart objects for flexible workflows.
    • Embedding, linking, and updating smart objects.
  • Actions & Automation
    • Tools: Actions Panel.
    • Recording, saving, and playing actions for repetitive tasks.
  • Creating GIFs & Animated Elements
    • Tools: Timeline Panel for animations.
    • Creating frame-based animations and exporting GIFs.
• Module 11: Advanced Photo Manipulation & 3D
  • Advanced Masking & Blending Techniques
  • Photo Manipulation Projects
    • Tools: Adjustment Layers, Blending Modes.
  • 3D Techniques & Perspective
    • Tools: 3D Panel, Perspective Grid, Vanishing Point.
    • Working with 3D layers and perspective techniques.
• Module 12: Design Projects & Layouts
  • Design for Print & Digital Media
    • Creating posters, banners, flyers, web, and social media posts.
  • Exporting & Optimizing Designs
    • Export settings for web, print, and devices.
    • Optimizing files for different platforms.
  • Practice Projects
    • Creating passport size photos
    • Designing different styles of Menu Bars
    • Designing Logos & Banners
    • Designing Buttons & Icons
    • Designing Web Layouts

2. Figma

• Module 1: Introduction to Figma
  • What is Figma?
  • Overview and benefits of using Figma
  • Figma vs. other design tools (Sketch, Adobe XD)
  • Getting Started with Figma
    • Creating a Figma account
    • Navigating the Figma interface
    • Understanding Figma’s cloud-based collaboration
  • Basic Concepts and Terminology
    • Frames, Artboards, and Layers
    • Components and Instances
    • Constraints and Layout Grids
• Module 2: Working with Frames and Layouts
  • Frames and Artboards
    • Creating and resizing frames
    • Organizing designs with frames
  • Layout Grids and Constraints
    • Setting up layout grids for responsive design
    • Using constraints to create flexible designs
  • Alignment and Positioning
    • Smart guides and snapping
    • Distributing and aligning elements
• Module 3: Designing with Shapes and Layers
  • Basic Shapes and Vector Networks
    • Creating shapes (rectangles, circles, lines, etc.)
    • Combining and subtracting shapes (Boolean operations)
  • Advanced Vector Editing
    • Pen tool for custom vector shapes
    • Editing paths and anchor points
  • Layer Management
    • Organizing layers for better workflow
    • Locking, hiding, and grouping layers
• Module 4: Typography and Color
  • Typography in Figma
    • Text styles and hierarchy
    • Creating and managing text components
  • Color Systems and Styles
    • Using color palettes and global styles
    • Applying gradients and shadows
  • Accessibility Considerations
    • Contrast ratios and legibility
    • Designing for color blindness
• Module 5: Components and Variants
  • Understanding Components
    • Creating reusable components
    • Instances and overrides
  • Using Variants for Dynamic Components
    • Setting up variants (e.g., button states)
    • Managing complex UI elements with variants
  • Component Libraries and Design Systems
    • Building and maintaining design systems
    • Sharing component libraries across teams
• Module 6: Prototyping and Interactions
  • Prototyping Basics
    • Creating clickable prototypes
    • Setting up interactions and transitions
  • Advanced Prototyping Techniques
    • Using overlays and interactive components
    • Scrollable frames and animations
  • User Testing and Feedback
    • Sharing prototypes for user testing
    • Collecting and implementing feedback
• Module 7: Collaboration and Handoff
  • Real-Time Collaboration
    • Multi-user collaboration and commenting
    • Version history and file management
  • Developer Handoff
    • Using Inspect mode for CSS properties
    • Exporting assets and design specifications
• Module 8: Advanced Design Techniques
  • Micro-Interactions and Animations
  • Responsive Design Techniques
  • Designing for Accessibility
• Module 9: Real-World Projects and Case Studies
  • Designing Mobile App UI
  • Website Design and Landing Pages
  • Redesigning Existing Interfaces
• Module 10: Best Practices and Career Guidance
  • UI/UX Design Best Practices
  • Portfolio and Career Building

3. Adobe Dreamweaver

• Software Installation
• Introduction to Adobe Dreamweaver
• Overview of Workspace
• Overview of Interface
• Create a new Page
• Code View & Design View & Split View
• Panels
• Overview of preferences
• Overview of keyboard shortcuts
• Rulers, Grids and Guides
• Checking Browser Compatibility
• Common Panel
• Hyperlink
• Email Link
• Named Anchor
• Horizontal Rule
• Table
• Insert Div Tag
• Images
  • Image
  • Image Placeholder
  • Rollover Image
  • Hotspot
    • Draw Rectangle Hotspot
    • Draw Oval Hotspot
    • Draw Polygon Hotspot
• Date
• Comment
• Head
• Script
• No Script
• Tag Chooser
• Layout
  • Insert Div Tag
  • Draw Ap Div
  • Spry Menu Bar
  • Spry Tabbed Panels
  • Spry Accordion
  • Spry Collapsible Panel
  • Table
    • Insert Row Above
    • Insert Row Below
    • Insert Column to the left
    • Insert Column to the right
  • IFrame
  • Frames (deprecated)
• Forms
  • Form
  • Text Field
  • Hidden Field
  • Checkbox
  • Checkbox Group
  • Radio Button
  • Radio Group
  • Select (List / Menu)
  • Jump Menu
  • Image Field
  • File Field
  • Button
  • Label
  • Fieldset
  • Spry Validation Textarea
  • Spry Validation Checkbox
  • Spry Validation Select
  • Spry Validation Password
  • Spry Validation Confirm
  • Spry Validation Radio Group
• Using Dreamweaver Template (DWT)
  • Make Template
  • Make Nested Template
  • Editable Region
  • Optional Region
  • Repeating Region
  • Editable Optional Region
  • Repeating Table

4. Visual Studio Code

• Introduction to VS Code
  • What is VS Code?
  • Installing VS Code (Windows, Mac, Linux)
  • Understanding the VS Code Interface
  • Basic Features & Navigation
  • Opening and creating files/projects
  • Sidebar and Explorer panel
  • Command Palette (Ctrl + Shift + P)
  • Customizing themes and layout
• Working with Code
  • Writing and saving code
  • Syntax highlighting and IntelliSense
  • Code formatting and auto-completion
  • Using snippets for faster coding
• Extensions & Customization
  • Installing and managing extensions
  • Popular extensions for different languages
  • Configuring settings (settings.json)
• Version Control with Git
  • Setting up Git in VS Code
  • Cloning repositories
  • Committing and pushing code
  • Viewing version history
• Debugging in VS Code
  • Understanding breakpoints
  • Running and debugging code

5. Fundamentals of Web Technology

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

6. 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

7. XHTML

• XHTML
• Differences between HTML and XHTML

8. 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
• Module-wise Project 1: HTML & CSS

9. 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
• Module-wise Project 2: HTML5 & CSS3 Responsive Project with Floats
• Module-wise Project 3: HTML5 & CSS3,4 Responsive Project with Flexbox
• Content will be updated as per latest updates

10. 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
• Module-wise Project 5: JavaScript Project

11. Async / Await

• Callbacks
• Asynchronous
• Promises
• Async / Await

12. Ajax

• Introduction
• XMLHttpRequest
• Request
• Response
• JSON
• REST API
• HTTP Methods

13. JSON

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

14. 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

15. 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
• Module-wise Project 5: Bootstrap / Tailwind CSS Responsive Project

16. jQuery and jQuery UI (Optional)

• Introduction
  • What is jQuery
  • Downloading and Installing jQuery
  • Creating a Simple Page in jQuery
  • Overview of jQuery Features
  • The Document Ready Function
  • How to use Custom Scripts?
• Selectors
  • How to use Selectors?
  • Name
  • #ID
  • .Class
  • Universal (*)
  • Multiple Elements E, F, G
  • Attribute Selector
• jQuery Effects
  • hide/show
  • fade
  • slide
  • animate
  • toggle
  • stop
  • Callback
  • Chaining
• DOM Traversing
  • Ancestors
  • Descendants
  • Siblings
  • Filtering
• Form Selectors
• HTML
  • Get
  • Set
  • Add
  • Remove
• CSS Classes
  • css()
  • Dimensions
• jQuery Events
• noConflict() Method
• AJAX Methods
  • load()
  • $.get()
  • $.post()
  • $.getScript()
  • $.getJSON()
  • $.ajax()
• AJAX Events
  • ajaxComplete()
  • ajaxStart()
  • ajaxError()
• jQuery UI Library Overview
• jQuery Theme Roller

17. Social Media Integrations

18. Search Engine Optimization

19. Google Analytics Integration

20. Developer Tools and Debugging

21. Postman

22. Generative AI

23. CMS (Content Management System): WordPress

24. Website Maintenance

25. Photoshop Document(PSD) to HTML, CSS (Dreamweaver Layout Conversion)

26. Module-wise Project 1: HTML & CSS

27. Module-wise Project 2: HTML5 & CSS3 with Float

28. Module-wise Project 3: HTML5 & CSS3,4 with Flex

29. Module-wise Project 4: JavaScript

30. Module-wise Project 5: Designing and Developing Responsive Website (Bootstrap)

31. Module-wise Project 6: CMS (Content Management System): WordPress

32. Domain Registration & Web Hosting

33. PHP, MySQL

34. Angular JS (Outdated)

Advanced User Interface (UI):

35. 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.

36. 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

37. SASS, SCSS:

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

38. Angular / 39. Ngrx / 40. 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

41. Angular Material

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

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

44. JSON Web Token (JWT)

45. User Authentication (Login / Logout) and Authorization

46. Developer Tools and Debugging

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

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

49. Postman

50. Figma

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

52. Module-wise Project 7: Angular