2. HTML5
Not case Sensitive
Features:
- Drag and drop
- Geolocation API
- New elements: <header>,<footer> & <section>
- Tags: <script>,<link>
- Document Tags: Figure, Nav, Article
- Supports event handlers like document load, windows focus
3. HTML VERSIONS
Content HTML 1.2 (1993) HTML 4.0.1(1999) HTML 5 (2012)
Heading Yes Yes Yes
Paragraph Yes Yes Yes
Address Yes Yes Yes
Anchor Yes Yes Yes
List Yes Yes Yes
Image Yes Yes Yes
Table No Yes Yes
Style No Yes Yes
Script No Yes Yes
Audio No No Yes
Video No No Yes
Canvas No No Yes
Error Handling No No Yes
7. CSS Versions
CSS (1996) CSS2 (1998) CSS3 (1999)
Adding font properties Adding styles for page
layout designing
Adding presentation-style
properties
A single document Applying to many modules
web-safe fonts web-safe fonts Special fonts like Google
fonts and type cast
Rounded borders and split
text sections into multiple
columns
8. CSS 3 - Animations
Include properties that are already built into CSS and are widely supported across all
browsers.
Provide visual feedback and enhance user experience.
This can be classified as
- Transitions
- Transforms
9. Transitions
Act as the foundation of animations.
Use transitions when using transforms to get smooth animation.
Classification:
- transition-property (required)
- transition-duration (required)
- transition-timing-function
- transition-delay
10. Transition – Property
- Specifies property to be transitioned.
- Eg : element {
transition-property: border-color;
transition-property: all;
}
Transition – Duration
- Specifies the time span of the transition.
- Eg: element {
transition-duration: 0.5s;
}
11. transition-timing-function
- Specifies the speed of the transition over the duration and by default timing is set to ease.
- Other pre-defined timing-function values : linear, ease-in,ease-out, ease-in-out, step-start,
and step-end.
- Link : https://easings.net/
- Eg: element {
transition-timing-function: ease-in;
}
13. Transforms
Allow us to move or change the appearance of an element on a
2D plane.
Use transforms with transitions to produce a smooth animation.
Classification : Rotate, Skew, Scale and Translate
14. Rotate
- Rotates an element clockwise or counterclockwise by a specified
number of degrees (deg).
- Eg: element {
transition: transform 1s ease-in-out;
}
element:hover {
transform: rotate(90deg);
transform: rotate(-30deg);
}
15. Skew
- Tilts an element based on values provided on the X and Y axes.
- A positive X value tilts the element left, while a negative X value tilts it right.A
positive Y value tilts the element down, and a negative Y value tilts it up.
- Eg: element {
transition: transform 0.3s ease;
}
element:hover {
transform: skew(90deg);
transform: skewX(90deg);
transform: skewY(-50deg);
transform: skew(90deg, -50deg);
}
16. Scale
- Increases or decreases the size of an element.
- A number larger than 1 will increase the size of the element and a decimal less than 1 will decrease the
size of the element.
- Eg: element {
transition: transform 1s ease;
}
element:hover {
transform: scaleX(0.5);
transform: scaleY(2);
transform: scale(0.5);
transform: scale(0.5, 2);
}
17. Translate
- The translate transform moves an element right, left, up or down.
- A positive X value moves the element to the right and a negative X value moves the
element to the left.A positive Y value moves the element downwards and a negative Y value moves
the element upwards.
- Eg: element {
transition: transform 0.5s linear;
}
element:hover {
transform: translateX(15px);
transform: translateY(50px);
transform: translate(15px, -40px);
}
18. Media in CSS 3
Uses the @media rule to include a block of CSS properties only if a certain
condition is true.
Add breakpoints where certain parts of the design will behave differently on
each side of the breakpoint.
Change layout of a page depending on the orientation of the browser
Support in Desktop.Laptop,Tablet and Mobile
19. Media tags in HTML5
<audio> and <video> tags
Video formats:
- Ogg
- mp4
Audio formats:
- mp3
Use <source> tag to specify media along with media type and attributes.
20. Javascript
Object Oriented Client Side Scripting language and light weight
programming language.
React to events
Interactive web page
Get information about user’s computer
Case sensitive
21. Built-in regular expressions.
Contained within web page and integrates with HTML/CSS
Syntax:- function name()
{
statement1;
statement2;
}
Code runs on the client’s browser.It focuses on user interfaces and interacting
with a document.
22. Why Javascript is needed?
Controls functionality and behaviour of web page.
It will be useful for
Search engines
Ecommerce
Content management system
Responsive design
Social media and phone apps
23. Fundamentals
- Code Structure
- “use strict”
- Variables
- Keywords: let and var
- Data types
- Eg: number, bigint, string, Boolean, null, undefined, objects
.
24. - Type Conversion
- Switch between different types
- Eg : let num = "3872";
num = Number(num);
- Operators
- Eg: AND (&), OR (|) ,XOR (^) , NOT (~), LEFT SHIFT (<<),RIGHT SHIFT (>>),
ZERO-FILL RIGHT SHIFT (>>>)
- Comparisons - Eg: >,>=,<,<=,==,!=
- Popup boxes : - alert, prompt, confirm
- Conditionals
- Loops
26. Objects
Collection of properties and named values
Eg: let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Using new keyword
Eg: let person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Objects are mutable
27. Properties:
- Changed,Edited and deleted.Some are read only.
- Syntax : object.property;
object[property];
for..in statement
this keyword
Built-in methods
Object.Values()
JSON.stringify()
28. Prototype
Add & inherit properties & methods to object constructors.
Associated with every functions and objects
All JavaScript objects inherit properties and methods from a prototype:
- Date objects inherit from Date.prototype
- Array objects inherit from Array.prototype
- Person objects inherit from Person.prototype
29. Classes
Template for creating objects.
Pass a class into a function, return it from a function, and assign it to a
variable.
31. Promises
An object that contains both the producing code and calls to the consuming
code.
It can be classified into three states:
- Pending
- Fulfilled
- Rejected
Two properties: State and Result
32. Used to handle multiple asynchronous operations and provide better error
handing than callbacks and events.
Constructor which takes a function that will be executed immediately and
passed into two functions: Resolve and Reject
Event notification system
It has a return method “then”
34. Callbacks
A function which passes an argument to another function
This does not return a value, it just executes the callback with the
result.
This can be created by using the Callback() function at the end of
the function
This helps us develop asynchronous JavaScript code and keeps us
safe from problems and errors.
36. Sample codes in Javascript
Audio and Video in Javascript.zip
JSON Stringfy.html Functions.html Popup boxes.html
Exception Handling.html Promises.html