HTML CSS JavaScript Syllabus

This is a confidential document. This is created and owned by Evensiva Digital Services.

This course provides a comprehensive introduction to HTML5, CSS3, and JavaScript,

the foundational technologies of modern web development. HTML5 serves as the backbone
for creating interactive and responsive web applications, featuring tools like geolocation,
local storage, and advanced graphics. The course emphasizes not only the functionality of
these features but also the best practices for building robust websites.

CSS3 enhances web design by introducing sophisticated layout options and effects
through its modular approach, covering key areas like Selectors and Transitions. JavaScript
adds interactivity, enabling dynamic content and real-time user engagement. Participants
will learn to manipulate the DOM, handle events, and utilize AJAX for server
communication. By the end of the course, you will be equipped to create engaging,
responsive web experiences essential for today’s digital landscape.

HTML5 and CSS3 Training Course Prerequisite

Basic understanding of computer programming

HTML5 and CSS3 Training Course Objectives

1. As we start this course, let us dive into the objectives and what we aim to
accomplish. First, we will introduce you to the essentials of HTML5—the foundation
of everything on the web, providing a solid structure for your web content.

2. HTML5 is the universal language of the web, supporting everyone from mobile app
developers to those creating dynamic, interactive experiences. With HTML5, you’ll
unlock the potential to make your projects accessible, powerful, and responsive on
any device or platform.

3. Next, we will explore CSS to bring design and style to your web pages, transforming
basic HTML into engaging and visually appealing layouts. You will learn how CSS
makes it possible to craft a consistent look and feel across your pages, ensuring
they’re both beautiful and user-friendly.

4. Finally, we’ll jump into JavaScript, the programming language that breathes life into
web pages, making them dynamic and interactive. JavaScript is what allows users to
interact with content seamlessly, adding functionality and creating memorable
experiences.

By the end of this course, you’ll have a well-rounded foundation in HTML, CSS, and
JavaScript, equipping you to build modern, responsive, and interactive web applications
from scratch.

HTML5 and CSS3 Course Duration

 45 days, daily one and half hours
HTML5, CSS3 and JavaScript Course Content
Introduction to WEB
 W3C and W3C Members

 Why WHATWG?

 What is Web?

HTML Basics
Introduction Formatting
Parts in HTML Document Links
Editors Head
Basic CSS
Elements Images
Attributes Tables
Headings JavaScript
Basics HTML XHTML
Paragraphs HTML4 Drawbacks

HTML5 Introduction
HTML5 HISTORY Power of HTML5:
New Features and groups m or mobi or touch domains
Backward Compatibility Common Terms in HTML5
Why HTML5?

HTML5 Syntax
 The DOCTYPE:

 Character Encoding:

Obsolete Elements/Deprecated Elements

<acronym> <frameset>
<applet> <isindex>
<basefont> <noframes>
<big> <s>
<center> <strike>
<dir> <tt>
<font> <u>
<frame> <xmp>

HTML5 New Elements

New Semantic/Structural Elements <header>
<article> <mark>
<aside> <meter>
<bdi> <nav>
 <command> <progress>
<details> <ruby>
<dialog> <rt>
<summary> <rp>
<figure> <section>
<figcaption> <time>
<footer> <wbr>

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

HTML5 SVG
What is SVG? Differences Between SVG and
Canvas
SVG Advantages Comparison of Canvas and SVG
HTML5 Drag/Drop
 Introduction

 Make an Element Draggable

 What to Drag? Where to Drop?

HTML5 Geo location

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

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

HTML5 Audio
Introduction Audio Formats and Browser
Support
Audio on the Web HTML5 Audio Tags
How It Works?
HTML5 Input Types
Introduction number
color range
date search
datetime tel
datetime-local time
email url
month week

HTML5 Form Elements

 <datalist>

 <keygen>

 <output>

HTML5 Form Attributes

 New attributes for <form> and <input>New attributes for <form>:

 autocomplete

 novalidate

New attributes for <input>

autocomplete height and width
autofocus list, min and max
form, formaction multiple
formenctype,formmethod pattern (regexp)
formnovalidate placeholder
formtarget required, step

HTML5 Semantic
Introduction <section>
What are Semantic Elements? <article>
non-semantic elements: <div> and <aside>
<span>
semantic elements: <form>, <table>, and <figcaption>
<img>
New Semantic Elements in HTML5 <figure>
<header> <footer>
<nav>

HTML5 Web Storage

 What is HTML5 Web Storage?

 Browser Support
  The localStorage Object

 The sessionStorage Object

HTML5 App Cache

 What is Application Cache?

 Cache Manifest Basics

 HTML5 Cache Manifest

HTML5 Web Workers

 What is a Web Worker?

 Check Web Worker Support

 Create a Web Worker File

 Terminate a Web Worker

HTML5 SSE
 One Way Messaging

 Browser Support

 The EventSource Object

HTML Media
New Media Elements <source>
<audio> <embed>
<video> <track>

HTML Multimedia
What is Multimedia? Video Formats
Browser Support Sound Formats
Multimedia Formats

HTML5 – MathML
 Introduction

 Using MathML Characters

 Matrix Presentation

 Math Formulas
CSS 1.0 and 2.0
CSS Basics Styling Text, Styling Fonts, Links, Styling
Lists and Styling Tables
CSS Introduction CSS Border
CSS Syntax,CSS Id, Class and CSS
Styling,Styling Backgrounds

CSS3
Introduction Text Effects
CSS3 Modules 2D/3D Transformations
Selectors Animations
Box Model Multiple Column Layout
Backgrounds and Borders User Interface

Borders
 border-radius

 box-shadow

 border-image

CSS3 Backgrounds
 background-size

 background-origin

CSS3 Text Effects

 text-shadow

 word-wrap

CSS3 Fonts
 @font-face Rule

 font-stretch

 font-weight

CSS3 2D Transforms
How Does it Work? rotate()
Browser Support scale()
2D Transforms skew()
translate() matrix()
CSS3 3D Transforms
 rotateX()

 rotateY()

CSS3 Transitions
 How does it work?

 transition-property, duration and delay

CSS3 Animations
 CSS3 @keyframes Rule

 Browser Support

 Animation, animation-duration

CSS3 Multiple Columns

 column-count

 column-gap

 column-rule

CSS3 User Interface

 resize

 box-sizing

 outline-offset

JAVASCRIPT
Introduction to JavaScript
Introduction of client-side script Prompt
Introduction of JavaScript Variables, Arrays and
Operators
Cross browser issues. Variables
Declaration syntax of JavaScript Operators
Statements Arithmetic
Comments Assignment
Popup Boxes Comparison
Alert Logical
Confirm
Document object model
 Functions and types

 Conversion functions
Conditional statements
 if

 if…else

 if…else if…else

 Switch

Loops
while for…in Statement
do…while Break
for Continue

Window object Document object Arrays

 Associative Arrays

 Array Properties and Methods

Advanced JavaScript
Date object Form validation
This object Expressions
Event object Email validation
State management Dynamic functionalities of
html controls
Cookie
Introduction to jQuery