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
