Very simple presentation for beginners on Front End Development. Quick introduction about HTML5, CSS3 and Javascript.

1. Know & Learn
FED

2. About Me
Arunraj Natarajan
Senior UI Developer
Working at Cognizant Technologies

3. What is FED?
Front End Development is:
• Doing Program that runs in a
browser
• Browsers can be anywhere
i.e.
Desktop, Laptop, Tablet, Phable
t, Smartphone, Google Glass
and any device that has
browser
• Crafting applications or
websites for all resolutions

4. Languages of FED
Unlike other
programming
languages, you
can see it in your
browser

5. Languages of FED
Front-end code tells your browser what to do. Then, the
languages are -

6. Languages of FED
Combo of these three languages makes
Front End Technology

7. Web Browsers
Universal languages allow you to design across browsers
WebKit - Gecko - Trident - Presto

8. Know HTML5
• HTML5 is the latest version of HTML
• Passed through Candidate Recommendation of W3C by Dec 2012
• Compatible with Chrome, Safari, Opera, Firefox and IE9 browsers
HTML5 Features
About HTML5
Storing data in the
cache or to make
data persistent
between user
sessions and when
reloading and
restoring pages
More meaningful
tags and structural
elements. New
Form types and
attributes.
Dedicated syntax
for Audio and
Video enables
multimedia in
HTML5. There will
be no need to for
third party plug-
ins.
More efficient connectivity
means more real-time
chats, faster games, and
better communication.
Web Sockets and Server-
Sent Events are pushing
(pun intended) data
between client and server
more efficiently than ever
before.
There are many
new features
which deal with
graphics in the
HTML5: 2D
Canvas, WebGL, S
VG, 3D CSS
transforms, and
SMIL
(Synchronized
Multimedia
Integration
Language
).
Enables deeper
integration with
OS. HTML APIs
helps to Drag and
Drop, Input by
speech, Geo
location and
Device
orientation.

9. Know CSS3
• CSS3 is the latest version of CSS. CSS is used to control the User Interface
style and layout
• Compatible with Chrome, Safari, Opera, Firefox and IE9 browsers
• Some of the CSS styles supported by browsers using their own prefixes like –
webkit- , -moz-, -ms- and –o-. These fixes will be wiped out once W3C
recommendation has a stable version.
CSS3 Features
About CSS3
@font-face Box Shadow Border Radius Gradient Transform
TransitionMultiple Background ImagesText ShadowRGBA
Media Queries Pseudo Classes Flex Box and so on …

10. Know JavaScript
• It’s an interaction programming language and its original name is ECMA
Script.
• JavaScript is used with HTML to make it more dynamic and interactive.
• There are plenty of JavaScript frameworks built especially for HTML5 apps.
For Ex. Mordernizr, jQuery, Sencha, BackBone, DoJo
Usage of JavaScript in Front End
About JavaScript
• User Interaction like page navigation, Tab, drop down, pop ups, tool tips
• Form run time validation, date picker, color picker, slider etc.,
• Auto Suggest and populate using AJAX method
• JSON object for data interchange between server
• MVC framework makes application more maintainable
• All HTML5 features ends with fine JS APIs
• Advanced JS craft helps to make Single Page Application works like native
apps

11. Exercise 1: Create basic HTML5 Page

12. Exercise 2: Make it Responsive

13. Thank You!
Feel free to contact me
Gmail:
arungetz@gmail.com
Facebook:
https://www.facebook.com/itsR1