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

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