Course Curriculum

• 1. Adobe Photoshop
• 2. Figma
• 3. Adobe Dreamweaver
• 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 and jQuery UI
• 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. Capstone Project 1: Photoshop Document (PSD) to HTML, CSS (Dreamweaver Layout Conversion)
• 26. Capstone Project 2: HTML & CSS
• 27. Capstone Project 3: HTML5 & CSS3 with Float
• 28. Capstone Project 3: HTML5 & CSS3,4 with Flex
• 29. Capstone Project 4: JavaScript
• 30. Capstone Project 5: Designing and Developing Responsive Website (Bootstrap)
• 31. Capstone Project 6: CMS (Content Management System): WordPress
• 32. Domain Registration & Web Hosting
• 33. ECMAScript
• 34. TypeScript
• 35. SASS / SCSS
• 36. React(JavaScript & TypeScript) / Material UI / Jest / Redux / Next.js (React Framework)*****
• 37. CRUD (Create, Read, Update, Delete)
• 38. RESTful APIs to fetch, send, and manipulate data from the server
• 39. JSON Web Token (JWT)
• 40. User Authentication and Authorization
• 41. Developer Tools and Debugging
• 42. AI: ChatGPT, CoPilot, Gemini, HackerRank
• 43. Postman
• 44. Figma
• 45. Version Control & Project Management Tools
  • 1. Bitbucket / GitHub (Version Control with Git)
  • 2. Jira
  • 3. Confluence
• 46. Generative AI
• 47. Capstone Project 7: React
• 48. Deployment: GCP / AWS Cloud / Jenkins

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
• Capstone 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
• 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

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

27. Capstone Project 2: HTML5 & CSS3 with Float

28. Capstone Project 3: HTML5 & CSS3,4 with Flex

29. Capstone Project 4: JavaScript

30. Capstone Project 5: Designing and Developing Responsive Website (Bootstrap)

31. Capstone Project 6: CMS (Content Management System): WordPress

32. Domain Registration & Web Hosting

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

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

35. SASS, SCSS:

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

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

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

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

39. JSON Web Token (JWT)

40. User Authentication and Authorization

41. Developer Tools and Debugging

42. AI: ChatGPT, CoPilot, Gemini, HackerRank

43. Postman

44. Figma

45. Version Control & Project Management Tools

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

46. Generative AI

47. Capstone Project 7: React

48. Deployment: GCP / AWS Cloud / Jenkins