HTML Basics

• Introduction
• Overview and Prerequisites
• What Is HTML and Basic of HTML
• Parts in HTML Document
• Editors
• Basic tags
• Elements
• Attributes
• Headings
• Paragraphs
• Formatting
• Links
• Head
• CSS
• Images
• List
• Tables
• Block and Inline Elements
• Layout
• HTML4 Drawbacks
• HTML4 vs. HTML5

→HTML5 Introduction

• Introduction to HTML5 HISTORY
• New Features and API
• Why HTML5?
• What Is HTML5?
• HTML5 Platform
• What: Structural Elements
• Structural Elements

→ HTML5 Syntax and Semantics

• Specifying the DOCTYPE
• Specifying the Character Set
• Specifying the Language
• Optimizing scripts and links

→HTML5 Canvas

• What is Canvas?
• Create a Canvas
• Canvas Coordinates
• Canvas – Paths
• Canvas – Text
• Canvas – Gradients
• Canvas – Images

→HTML5 SVG

• What is SVG?
• SVG Advantages
• Differences Between SVG and Canvas
• Comparison of Canvas and SVG

→HTML5 Drag/Drop

• Introduction
• Make an Element Draggable
• What to Drag?Where to Drop?

→HTML5 Geolocation

• Introduction
• Locate the User’s Position
• Handling Errors and Rejections
• The getCurrentPosition()
• Geolocation object

→ HTML5 Video

• Introduction
• Video on the Web
• How It Works?
• Video Formats and Browser Support
• HTML5 Video Tags

→HTML5 Audio

• Introduction
• Audio on the Web
• How It Works?
• Audio Formats and Browser Support
• HTML5 Audio Tags

CSS

→Introduction to CSS

• Why CSS?
• Adding Some Styles
• CSS Levels
• Rules
• Simple Selectors
• Other Selectors
• Specifying Property Values

→Cascading and Inheritance in CSS

• Introduction
• The Cascade
• Using the Cascade
• Ordering Rules
• Developer Tools and CSS
• CSS Reset
• Specificity
• Specificity in Action
• Inheritance
• Inheritance in Action

→CSS and the Box Model

• Introduction
• The Big Three
• Border, Margin, Padding
• Top, Right, Bottom, Left
• Vertical Margins Collapse
• Width
• Display and Visibility
• Styling a menu

→Styling Text with CSS

• Introduction
• Font Collections
• Using font-family
• Font Selection
• Font Styling
• Text Properties

→Layout with CSS

• Introduction
• Position
• Relative Positioning
• Absolute and Fixed Positioning
• Float and Clear
• 2 Column Layout
• 3 Column Layout

Javascript

→ Introduction to javascript

• Introduction of javascript
• Work Engins
• What javascript can do at browser side
• Developer Console
• IDE and Lightweight editors
• Declaration syntax of javascript
• Statements
• Comments
• Popup Boxes
• Alert
• Confirm
• Prompt
• Variables, Arrays and Operators
• Variables,Const,let
• Operators
• Arithmetic, Assignment
• Comparison
• Logical

→ Data Type

• Number
• String
• Boolean
• Null,Undefined
• Typeoff Operator

→ Document object model DOM

• DOM manipulation Functions
• Conversion functions

→ Functions

• Function and Callback
• Return statement
• Function declaration vs expression
• Arrow Function

→Conditional statements

• if
• if…else
• if…else if…else
• Switch

→Loops

→ Object

• Introduction to Object
• Introduction to JSON
• Copy by reference
• Compare by reference
• Const Object
• Garbage Collector

→Window object Document object Arrays

• Associative Arrays
• Array Properties and Methods

→Advanced JavaScript

• Date object
• This object
• Event object
• State management
• Cookie
• Form validation
• Expressions
• Email validation
• Dynamic functionalities of html controls

→Code Quality and debugging

• Google Developer Tool
• The source
• Console
• Developer console