In this presentation, I have explained about Front End Technologies like HTML5,CSS3 and Javascript with real time examples

1. Front End Technologies
By
Bhagath Gopinath

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

4. References
 https://www.w3schools.in/

5. CSS (Cascading Style Sheets)
 Layer of styling over HTML elements
 Classification:
- Inline Style sheet
- Eg: <h1 style="color:blue;">A Blue Heading</h1>
- Internal Style Sheet
- Eg: <style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>

6.  External Style Sheet
Eg : <link rel="stylesheet" href="styles.css">

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;
}

12.  Transition-delay
- specifies when the transition will start.
- Eg: element {
transition-delay: 1s;
}

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

25. - Switch statements
- Functions
- Function expressions
- Arrow functions
References: https://dottedsquirrel.com/javascript/fundamentals-javascript/

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.

30. Error Handling
 Classification:
- Syntax errors (Parsing errors)
- Runtime errors (Exceptions)
- Logical errors (Exception Handling)

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”

33. Benefits
- Improves code readability
- Better handling of asynchronous operations
- Better Error Handling

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.

35. Sample codes in HTML5 & CSS3
Hello.html
Sample.zip Animations.html Transforms.html

36. Sample codes in Javascript
Audio and Video in Javascript.zip
JSON Stringfy.html Functions.html Popup boxes.html
Exception Handling.html Promises.html