Module 1: HTML

• HTML
• What is HTML
• What is a Web Browser
• What are Versions of HTML
• What can you Do with HTML
• HTML Development Environments
• Writing Code with a Text Editor
• Publishing Documents

• Review of HTML Elements
• Rules of Syntax
• Making your Code Readable
• Making your Code XHTML Compliant
• Building a Document
• Using Colors
• Adding Color to your Page
• Using Headings
• Using Paragraphs
• Aligning Block-Level Elements

• Inserting Spaces and Line Breaks
• Displaying Preformatted Text
• Formatting with Inline Elements
• Controlling Fonts
• Introducing List Elements
• Creating Unordered Lists
• Creating Ordered Lists
• Nesting Lists

• What is an HTML Table
• Building a Table
• Cell Padding and Cell Spacing
• Controlling Table and Cell Width
• Aligning a Table on the Page
• Aligning Tables and Text
• Aligning Table Data
• Spanning Columns and Rows
• Nesting Tables
• Using Tables as a Design Tool

• Creating a Hyperlink
• Understanding and Using URLs
• Linking to a Web Document
• Linking to a Local Document
• Linking to Anchors
• Opening a New Browser Window

• Image Formats
• Optimizing Image and File Size
• Inserting Inline Images, Image Map, Sprite Image
• Aligning and Formatting Images
• Using Images to Anchor Links
• Creating a Look-and-Feel
• Sizing and Scaling Images
• Using Transparent Images
• Using GIF Animation

• Forms and Controls
• Forms and Form Elements
• Form Actions, Form Methods, Form Design

Module 2: CSS

• Introduction to CSS 3
• Border
• border-image
• border-radius

• CSS Shadows
• Text-shadow
• Box-shadow

• Background
• background-clip
• background-size
• background-origin
• background-image

• Outline Transitions
• transition
• transition-delay
• transition-duration
• transition-property

• 2D Transforms
• transform
• matrix ()
• translate (x, y)
• scale (x, y)
• rotate(angle)
• skew (x-angle, y-angle)

• 3D Transforms
• transform
• transform-style
• perspective
• transform-origin

• Animations
• @keyframes
• animation
• animation-direction
• animation-duration
• animation-name

• Selectors
• CSS combinations
• Pseudo Elements

• Gradients
• Linear Gradients
• Radial Gradients

• Multiple Columns
• column-count
• column-fill
• column-gap
• column-width
• columns
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width

• User Interface
• resize
• box-sizing
• outline-offset

• CSS Filters
• Blur
• Brightness
• Contrast
• Grayscale
• Hue-rotate
• Invert
• Opacity
• Saturate
• Sepia

• Media Query
• What is Responsive Web Design
• Intro to the Viewport
• The Viewport Tag
• Media Queries
• Fluid Layouts
• Tablet Styles
• Mobile Styles
• Making a Mobile Drop-down Menu
• Responsive Images & Poly fills

• Web Fonts
• @font-face
• font-family
• src
• font-stretch
• font-style
• font-weight

• Flexbox
• flex-grow
• flex-shrink
• flex-basis
• flex
• flex-wrap
• flex-direction
• flex-flow
• justify-content
• align-items
• order

Module 3: JavaScript

• Introduction to JavaScript
• Syntax
• Statements
• Comments

• Enabling in various browsers Popup Boxes
• Alert
• Confirm
• Prompt

• Variables Operators
• Arithmetic
• Assignment
• Comparison
• Logical
• Relational
• Ternary

• Conditional Statements
• If else
• if...else if...else
• nested if
• Switch
• Loops
• While
• do...while
• for
• for...in Statement
• Break
• Continue

• Functions
• User-defined Functions
• Function Syntax
• Function with Arguments
• Returning Values from Functions
• Built-in Functions

• Events
• Introduction
• Mouse
• Events
• Keyboard Events
• Form Events
• Document/Window Events

• Built-in Objects
• Number
• Strings
• Math
• Arrays
• Associative
• Array
• Array Properties and Methods
• Date
• Boolean
• Reg exp

• Introduction to OOP concept
• Prototype, Module pattern
• Argument type
• Closure
• ES 6 Introduction
• Let & Const
• Arrow Functions
• Class and Inheritance
• Rest and Map Operators
• Export & Import
• Modules

Module 4: JQuery

• Getting Started with jQuery

• Selecting Elements

• Manipulating the Page

• Traversing the DOM and Chaining

• jQuery Utility Methods

• Handling Events and Event Delegation

• AJAX, JSON, and Deferred

• Enhancing with Animation Effects

• Grids, Tables with Ajax, Pagination, JQuery UI

• jQuery Best Practices

Module 5: HTML 5

• Introduction
• Laying out a page with HTML5
• Page Structure
• New HTML5 Structural Tags
• Page Simplification

• Html 5 - How we got here
• The Problems HTML 4 Addresses
• The Problems XHTML Addresses
• New Features of HTML5
• The HTML5 Spec(s)
• Current State of Browser Support

• Sections and Articles
• The section Tag
• The article Tag
• Outlining
• Accessibility

• Html5 Audio and Video
• Supported Media Types
• The audio Element
• The video Element
• Accessibility
• Scripting Media Elements
• Dealing with Non-Supporting Browsers

• Html5 Forms
• Modernizr
• New Input Types

• Html5 New Form Attributes
• autocomplete
• novalidate

• Html5 New Form Field Attributes
• required
• placeholder
• autofocus
• autocomplete
• form
• pattern

• New Form Elements
• data list
• progress and meter

• Html5 Web Storage
• Overview of HTML5 Web Storage
• Web Storage
• Other Storage Methods

• Html5 Canvas
• Getting Started with Canvas
• Drawing Lines
• Color and Transparency
• Rectangles
• Circles and Arcs
• Quadratic and Bezier Curves
• Images
• Text

• Integrated API
• Offline Application API
• Drag and Drop API

Module 6: Bootstrap 5 (HTML, CSS, and JS Library)

• Introduction
• Quick Styles After Dark
• Our First Web Page
• What's Inside
• Scripts and Styles
• Core Concepts
• Summary

• Layout with Bootstrap
• Introduction
• Grid Layouts
• Simple Layout
• Fixed Grids
• Fluid Grids
• Responsive Design
• Responsive Utilities
• Inspiration
• Summary

• Everyday Bootstrap
• Introduction
• Typography
• Tables
• Forms
• Buttons
• Images and Icons
• Summary

• Bootstrap Component
• Introductions
• Drop down Menu
• Buttons with Menus
• Tabs and Pill
• The Navbars
• Hero, Badges, Labels, and Media
• Summary

• Bootstrap and JavaScript
• Introduction
• More Buttons
• Modals
• Tooltips and Popovers
• Carousel
• Summary

Module 7: Adobe Photoshop

• Adobe Photoshop Basic & Advanced Concepts

• Introduction of Stock Photography

• Types of Images and Image Editing Tools

• Introduction to Adobe Photoshop

• Using Photoshop Tools

• Layers, Actions and Filters

• Creating Custom Effects

• Design Banners for Website

• Basic Website Layout

• 12 Grid Layouts (For Desktops and Tablets)

• 6 Grid Layouts (For Smartphones)

• PSD to HTML Conversion

Module 8: Web Hosting

• Fundamental of Web Hosting

• Types of Hosting Packages

• Linux and Windows Control Panel

• Using FTP Client

• Maintaining a Website

• Domain Names Registration, Subdomain

• What is SEO & its scope.

• Keyword Research and Analysis (Tools and Implementation)

• Website Analysis

• Website Performance Monitoring

• Google Analytics/Webmaster

• XML Sitemap

• Use of Meta Tags