Atlogys Academy Series presents latest test talk from senior web developer on HTML5 and CSS3 with know-how on how to migrate your existing sites to these latest frontend technologies.

1. HTML
ATLOGYS
HTML5 INTRODUCTION PROGRAMME
RAMANI VINOTH
SENIOR WEB DEVELOPER

2. HTML
Things you expect to know !!!
 New Features that can be used today
 Best Practices of HTML5 Development
 New aspects of CSS3
 Mobile friendly Website
3/25/2015 2

3. HTML
What is HTML5 ?
3/25/2015 3
Where the web is going ?
Everything new and interesting on web ?
Just some new markups ?
Here is the Future!!!
Here is the Browser!!!

4. HTML
How HTML5?
3/25/2015 4
HTML CSS
JavaScript
APIs+ + =
 Markup
 Forms
 ARIA
 Microdata
 Canvas
 Video
etc...
 Selectors
 Media Queries
 Fonts
 Transforms
 Transitions
 Animations
etc...
 Geolocation
 Web Storage
 Web Sockets
 FileAPI
 Media Capture
 IndexedDB
etc...
HTML

5. HTML
Technology Areas of HTML5
3/25/2015 5
Performance Multimedia
3D Effects
Semantics
Offline & Storage Device Access
Styling
Connectivity

6. HTML
3/25/2015 6

7. HTML
New Elements
3/25/2015 7
Article
Aside
Audio
Canvas
Command
Datalist
Embed
Figcaption
Figure
Footer
Header
Hgroup
Keygen
Mark
Meter
Output
Progress
rp
Rt
Ruby
Section
Source
Summary
Time
wbr

8. HTML
5 HTML5 Features Every Developer
Should Know
 Audio & Video Elements
 Canvas Elements
 New Input types
 Form Features
 Custom Data Attributes
3/25/2015 8

9. HTML
SHALL WE HAVE A BREAK?
3/25/2015 9

10. HTML
Layouts and Animations
 Layouts
Legacy Layout
 Positioning
 Display
 Float
 z-index
 Flexbox Layout
Horizontal and
vertical
Packing
Alignment
Flex
wrapping
 Grid Layout
 Power of tables
but
implemented in
css
 Absolute rows
and columns
 Fractional rows
and columns
 Spanning
 Alignments
3/25/2015 10

11. HTML
Layouts and Animations (cont’d)
 Animations
Transforms
 rotate
 skew
 scale
 translate
Transitions
Animations
3/25/2015 11

12. HTML
Mobile Website
 Building sites on multi- device web
 Responsive images
3/25/2015 12

13. HTML
Building sites on multi- device web
 Breakpoint
 Using Media Queries
<link rel=“stylesheet” media=“(min-width: 500px)” href=“min-
500px.css”>
<style>
@media (min-width: 500px) {
}
</style>
 Meta Viewport Tag
<meta name=“viewport” content=“width=device-width, intial-
scale=1”>
3/25/2015 13

14. HTML
Responsive Images
 Background image in css
.example {
background-image: url(“phone.png”);
}
@media (min-width: 500px) {
body {
background-image: url(“india.png”);
}
.example {
background-image: url(“tablet.png”);
}
}
3/25/2015 14

15. HTML
 Media queries for 2x images
.logo {
background-image: url(“logo.png”);
}
@media (min-resolution: 2dppx)
(-webkit-min-device-pixel-ratio:2) {
.logo {
background-image: url(“logo@2x.png”)
}
}
3/25/2015 15

16. HTML
 Image-set()
.example {
background-image: url(‘icon1x.png’);
background-image: -webkit-image-set(url(“icon1x.png”) 1x,
url(“icon2x.png”) 2x)
 srcset
<img src=“photo.png” srcset=“photo.png 1x, photo2x.png
2x”/>
3/25/2015 16

17. HTML
QUESTIONS?
3/25/2015 17
IF ANY…

18. HTML
3/25/2015 18
THANK YOU