The Complete Web Development Masterclass Course Content

HTML/HTML5

• What is HTML?
• Why to Learn HTML?
• HTML Editors
• HTML Browser
• HTML Versions
• HTML Document Structure
• The <!DOCTYPE> Declaration
• HTML The Head Element
• HTML The Body Element
• HTML Meta Tags
• Charset
• Name
• Content
• Http-equiv (refresh)
• What is an HTML Element?
• What is HTML Tags
• Container tag (opening and closing tag)
• Empty Tag (only opening tag)
• HTML Attributes
• HTML Comments
• HTML Style Guide
• HTML Headings
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6
• HTML Paragraphs
• HTML Line Breaks
• HTML Styles
• HTML Style Sheet
• HTML Fonts Tag
• Color, Size, Face
• HTML Text Formatting Elements
• <b> and <strong> Elements
• <i> and <em> Elements
• <small> Element
• <mark> Element

• <del> Element
• <ins> Element
• <sub> Element
• <sup> Element

• HTML Quotation and Citation Elements
• <blockquote> for Quotations
• <q> for Short Quotations
• <abbr> for Abbreviations
• <address> for Contact Information
• <cite> for Work Title
• <bdo> for Bi-Directional Override
• HTML Preformated (pre) & Horizontal (hr) rule
• HTML Links (Anchor Tag)
• target
• href
• download
• link (parent div attr)
• vlink (parent div attr)
• alink (parent div attr)
• HTML Link in Internal Page (#id)
• HTML File Paths
• HTML Images
• Src
• Alt
• Width
• height
• HTML Image Links
• HTML Figure and Figcaption Tag
• HTML Email Links
• HTML Telephone Links
• HTML Favicon
• HTML Tables
• thead
• tbody
• tfoot
• tr
• th
• Td
• Colspan
• Rowspan
• Table fully styles
• Nested Table in HTML
• HTML Lists
• Unordered HTML List
• Unordered Nested
• Ordered HTML List
• Ordered Nested
• Description Lists
• HTML Block and Inline Elements
• HTML class Attribute
• HTML id Attribute
• HTML Iframes
• HTML Nested Iframes
• HTML Backgrounds
• HTML Entities Code
• HTML Responsive Viewport meta
• HTML Computer Code Elements
• <code> for Code Elements
• <kbd> For Keyboard Input
• <samp> For Program Output
• HTML JavaScript
• HTML Character Sets
• HTML Semantic Elements / Tags
• <header> Element
• <footer> Element
• <nav> Element
• <section> Element
• <article> Element
• <aside> Element
• <figure> and <figcaption> Elements Etc..
• HTML Marquees
• Direction
• Behavior
• Scrolldelay
• Scrollamount
• Loop etc..
• HTML Forms
• Form Elements
• Form Attributes
• Input Types
• Placeholder
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Textarea
• Submit and Reset Button
• Autocomplete 
• Required
• Disabled
• minlength and maxlength etc..
• HTML New Input Type
• color
• Number
• Range

• Date
• Datetiime-local
• Month
• Week
• Time
• Email
• Search
• Tel
• Url
• Image etc..

• HTML Progress Tag
• HTML Media
• Video
• Source
• Autoplay
• Controls
• Loop
• Muted
• Src
• Poster
• Audio
• Source
• Autoplay
• Controls
• Loop
• Muted
• src
• YouTube Videos

CSS/CSS3

• What is CSS?
• Why to Learn CSS?
• Why Use CSS?
• Advantages of CSS
• What is CSS Syntax
• CSS Selectors
• Simple selectors
• Combinator selectors
• Pseudo-class selectors
• Pseudo-elements selectors
• Attribute selectors
• Grouping Selectors
• Universal selectors  (*)
• How To Add CSS
• External CSS
• Internal CSS
• Inline CSS
• CSS Comments
• CSS Colors
• RGB Colors
• HEX Colors
• HSL Colors
• CSS Backgrounds
• background-color
• background-image
• background-repeat
• background-position
• background-attachment
• background 
• CSS Fonts Style
• font-family
• font-style
• font-variant 
• font-weight 
• font-size
• font 
• CSS Text Style
• color
• direction 
• letter-spacing
• word-spacing
• text-align
• text-decoration
• text-transform
• white-space
• text-shadow
• text-indent
• CSS Box Model
• CSS Borders
• border-style
• border-width
• border-color
• border-left
• border-right
• border-top
• border-bottom
• border
•   CSS Margins
• margin-bottom
• margin-top
• margin-left
• margin-right
• margin 
•   CSS Padding
• padding-bottom
• padding-top
• padding-left
• padding-right
• padding              
•   Difference between Margin and Padding
•   CSS Box-Sizing
•   Multiple Style Sheet or Priority of Style Sheets 
•   Reset Default Browser CSS
• CSS Width
• max-width
• min-width
• CSS Height
• max-height
• min-height
• CSS Links Style
• :link
• :visited
• :hover
• :active
• CSS Outline
• outline-width
• outline-style
• outline-color
• outline-offset
• Outline
• CSS Tables Style
• border-collapse
• border-spacing
• caption-side
• empty-cells
• table-layout
• Vertical Align Property
• CSS Lists Style
• list-style-type
• list-style-position
• list-style-image
• list-style
• CSS Display Property
• inline
• inline-block
• block
• flex
• table
• table-row
• table-cell
• list-item
• none, etc….
• CSS Float Property
• CSS Clear Property
• CSS Cursors Style
• CSS Overflow Property
• overflow-x
• overflow-y
• overflow
• CSS Position Property
• CSS Z-index Property
• CSS Align Text/Image
• CSS Combinators
• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)
• CSS Opacity Property
• CSS Menu Bar
• CSS Dropdowns
• CSS Forms Style
• CSS Counters
• counter-reset
• counter-increment
• Content
• CSS !important Rule
• CSS Units
• (em,rem,vh, vw,vmax,vmin and more)
• CSS Math Functions

CSS Advanced:-

• CSS Pseudo Classes
• :link
• :visited
• :hover
• :active
• :focus
• :focus-within
• :enabled
• :disabled
• :checked
• :required
• :read-only / :read-write
• :root
• :first-child
• :last-child
• :nth-child()
• :nth-of-type()
• :first-of-type
• :last-of-type
• :nth-last-of-type()
• :nth-last-child()
• :only-of-type
• :empty
• ::first-letter
• ::first-line
• ::marker (UL/OL List)
• ::selection
• CSS Pseudo Elements
• ::before
• ::after
• CSS ::placeholder 
• CSS Visibility Property
• Difference between display none and visibility hidden
• CSS Attr() function
• CSS User-Select
• CSS @ Rules
• @import
• @font-face
• CSS Rounded Corners
• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius
• border-radius
• CSS Rounded Styling Images
• CSS Border Images
• CSS Multiple Backgrounds
• CSS Gradients
• CSS Accent-Color
• CSS filter Property
• CSS Media Types
• @media print
• @media screen
• CSS Color Keywords
• transparent Keyword
• currentcolor Keyword
• inherit Keyword
• CSS Shadow Effects
• Text Shadow
• Box Shadow
• CSS Text Effects
• text-overflow
• word-wrap
• word-break
• writing-mode
• white-space
• CSS Web Fonts
• @font-face
• CSS with Google Fonts
• CSS 2D Transforms
• translate() Method
• rotate() Method
• scale() Method
• skew() Method
• matrix() Method etc…
• CSS 3D Transforms
• rotateX() Method
• rotateY() Method
• rotateZ() Method
• CSS Transitions
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• CSS Animations
• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• Animation
• CSS Tooltip
• CSS object-fit Property
• CSS object-position Property
• CSS Buttons Styling
• CSS Pagination Examples
• CSS Multiple Columns
• column-count
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• CSS User Interface
• resize
• outline-offset
• CSS Variables
• CSS Flexbox
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

• CSS Grid
• CSS Scrollbar Styling 
• CSS with Icon Fonts (Font Awesome) 
• CSS Cross Browser Capability

JavaScript

  Chapter 1 – Basic JavaScript

• The HTML DOM (Document Object Model)
• HTML DOM getElementById() Method
• HTML DOM getElementsByTagName () Method
• HTML DOM getElementsByClassName () Method
• HTML DOM  getElementsByName () Method
• HTML DOM  querySelector () Method
• HTML DOM  querySelectorAll () Method
• HTML DOM innerHTML Property
• HTML DOM  innerText   Property
• HTML DOM  textContent     Property
• Differences between innerText, innerHTML and textContent
• outerHTML in javascript
• outerText  in javascript
• Changing the Value of an Attribute
• JavaScript is Case Sensitive
• The JavaScript Console
• JavaScript console.log()
• JavaScript warn.log()
• JavaScript console.error()
• JavaScript console. clear()
• JavaScript Debugging
• The console.log() Method
• Setting Breakpoints
• The debugger Keyword
• JavaScript var
• JavaScript Arrays
• Declare Array with Keyword new
• JavaScript Avoid new Array()
• Use [] instead new Array()
• Access the Elements of an Array
• Changing an Array Element
• Access the Full Array
• How to Recognize an Array
• Array Properties and Methods
• Looping Array Elements
• JavaScript Array push() Method
• JavaScript Array pop() Method
• JavaScript Array unshift() Method
• JavaScript Array shift() Method
• JavaScript Objects
• Creating Objects in JavaScript
• By object literal
• By creating instance of Object directly (using new keyword)
• By using an object constructor (using new keyword)
• JavaScript undefined
• JavaScript Empty Values
• JavaScript Null Values
• Difference between null, undefined in JavaScript
• JavaScript Functions
• Why Functions?
• How to Create a Function in JavaScript?
• Invokes the Function
• JavaScript Function with Parameters
• Function Parameters and Arguments
• Parameter Rules
• Function Argument Missing in JavaScript
• Default Parameter in a Function
• arguments object in JavaScript function
• Rest parameter in JavaScript function
• Difference between Rest Parameter and   Arguments Object in JavaScript
• Passing a function as a parameter in JavaScript
• Functions Used as Variable Values
• Functions Can Be Used as Values
• JavaScript Function Invocation
• JavaScript dialog boxes
• Alert Dialog Box
• Confirmation Dialog Box
• Prompt Dialog Box
• JavaScript Page Redirection
• What is Page Redirection?
• Finding a String in a String
• Searching for a String in a String
• Extracting String Parts
• The slice() Method
• The substring() Method
• The substr() Method
• Replacing String Content
• The concat() Method
• String.trim()
• Extracting String Characters
• The charAt() Method
• The charCodeAt() Method
• Property access []
• Converting Arrays to Strings
• toString()
• join()
• Deleting Elements from Array
• Converting a String to an Array
• Splicing an Array
• Merging (Concatenating) Arrays
• Slicing an Array
• Sorting an Array
• Reversing an Array
• The History Object
• History back() Method
• History forward() Method
• History go() Method
• History length Property
• Numeric Sort
• The Compare Function
• Find the Highest (or Lowest) Array Value
• Sorting Object Arrays
• Array.map()
• Array.filter()
• Array.find()
• Array.findIndex()
• Array.reduce()
• Array.reduceRight()
• Array.every()
• Array.some()
• Using Math.max() & Math.min() on an Array
• JavaScript Array includes() Method
• Array valueOf() Method
• JavaScript Array fill() Method
• The toString() Method
• Converting Variables to Numbers
• The Number() method
• The parseInt() method
• The parseFloat() method
• JavaScript JSON
• JavaScript JSON parse() Method
• JavaScript JSON stringify() Method
• HTML Attributes
• HTML DOM setAttribute() Method
• HTML DOM getAttribute() Method
• HTML DOM hasAttribute() Method
• HTML DOM removeAttribute() Method

Chapter 2 – Advance JavaScript

• How JavaScript Works
• What is Execution Context
• What is Execution Stack
• What is Creation Phase
• What is Execution Phase
• Phase of execution context
• Creation Phase
• Execution Phase
• Property of execution context
• Variable Object
• Scope Chain
• 'this' Variable
• Function Hoisting in JavaScript
• Variable Hoisting in JavaScript
• Scope Chain & Lexical Scoping in JavaScript
• this in JavaScript
• JavaScript Object
• JavaScript Objects Are Mutable
• JavaScript Object Properties
• Accessing JavaScript Properties
• JavaScript Object Loop
• Adding/Deleting New Properties in Object
• JavaScript Object Methods
• Accessing Object Methods
• Adding a Method to an Object
• JavaScript Object.values()
• JavaScript JSON.stringify()
• JavaScript Stringify Functions/Array
• JavaScript Object Accessors
• JavaScript Accessors (Getters and Setters)
• Why Using Getters and Setters?
• JavaScript Object Constructors
• JavaScript Object Prototypes
• JavaScript Data Types
• Primitive data type
• Non-primitive (reference) data type
• Pass by Value Vs Pass by Reference in JavaScript
• Shallow copy and Deep copy in JavaScript
• Functions is First Class Citizens
• Callback Function in JavaScript
• Higher Order Function in JavaScript
• Immediately Invoked Function Expression - IIFE
• Advantages of IIFE
• Closure in JavaScript
• Call Method in JavaScript
• Apply Method in JavaScript
• The Difference Between call() and apply()
• Bind Method in JavaScript
• forEach() Method in JavaScript
• for of loop in JavaScript
• for in loop in JavaScript
• localStorage and sessionStorage in JavaScript
• What is HTML Web Storage?
• What is localStorage?
• What is sessionStorage?
• Set/Updating Entries
• Deleting Entries
• Clearing Everything
• Storing Json Objects
• Checking for Items
• Checking for Support
• Iterating Over Items
• What is Synchronous Programming in JavaScript
• What is Asynchronous Programming in JavaScript
• Synchronous vs Asynchronous Programming in JavaScript
• Why Asynchronous?
• Event Loop in JavaScript

Chapter 3 – ES6/ES7/ES8

• What is ECMAScript?
• ECMAScript Editions
• var, let & const
• Template Literals in JavaScript
• Template literals (template strings) Method
• Array Destructuring
• Object Destructuring
• Default Parameters
• Rest Parameters
• Fat Arrow Function
• Spread Operator
• Math.sign()
• Math.trunc()
• Exponentiation Operator
• Numbers & Global Methods
• isFinite() Method
• isNaN() Method
• Number.islnteger() Method
• Class
• Callback hell in JavaScript
• Promises in JavaScript
• Async Await in JavaScript
• Generators in ES6 JavaScript
• What are normal function?
• What are Generators?

CSS Responsive

• What is Responsive Web Design?
• Responsive Web Design The Viewport
• Responsive Web Design Media Queries Breakpoint
• Responsive Web Design Grid-View
• Responsive Web Design Media Queries
• Responsive Web Design Templates

SCSS/SASS

• What is Sass?
• Why Use Sass?
• Sass Installation
• Sass Variables
• Sass Nested Rules
• Sass @import Files
• Sass @mixin and @include
• Sass @extend Directive

jQuery

• What is jQuery?
• Why jQuery?
• How to use jQuery?
• Local Installation
• CDN Based Version
• How to Call a jQuery Library Functions?
•   How to Use Custom Scripts?
• jQuery Syntax
• jQuery Selectors
• The element Selector
• The #id Selector
• The .class Selector etc..
• What are Events?
• click() Event
• dblclick() Event
• mouseenter() Event
• mouseleave() Event
• mousedown() Event
• mouseup() Event
• hover() Event
• focus() Event
• blur() Event
• The on() Method
• jQuery hide()
• jQuery show()
• jQuery toggle()
• jQuery Fading Methods
• fadeIn() Method
• fadeOut() Method
• fadeToggle() Method
• fadeTo() Method
• jQuery Sliding Methods
• slideDown() Method
• slideUp() Method
• slideToggle() Method
• jQuery Effects Animation
• jQuery stop() 
• jQuery Callback Functions
• jQuery Method Chaining
• jQuery Get Content and Attributes
• text()
• html()
• val()
• attr()
• jQuery Set Content and Attributes
• text()
• html()
• val()
• attr()
• jQuery Add Elements                    
• append() Method
• prepend() Method
• after()
• before()
• appendTo()
• prependTo()
• jQuery Remove Elements
• remove() Method
• empty() Method
• jQuery Get and Set CSS Classes
• addClass() Method
• removeClass() Method
• toggleClass() Method
• css() Method
• jQuery Dimensions
• width() Method
• height() Method
• innerWidth() Method
• innerHeight() Method
• outerWidth() Method
• outerHeight() Method
• jQuery parent() Method
• jQuery parents() Method
• jQuery parentsUntil() Method
• jQuery children() Method
• jQuery find() Method
• jQuery siblings() Method
• jQuery next() Method
• jQuery nextAll() Method
• jQuery nextUntil() Method
• jQuery prev() Method
• jQuery prevAll() Method
• jQuery prevUntil() Method
• jQuery first() Method
• jQuery last() Method
• jQuery eq() method
• jQuery filter() Method
• jQuery not() Method

Live Project Training

• Fully Responsive Design across multiple device (ipad , iphone, mobile, large desktop etc)
• Compatibility checking across all / different browsers
• Implementation of animation & effective design techniques using jQuery.
• Design Template
• Use Bootstrap