Know & learn FED
Upcoming SlideShare
Loading in...5
×
 

Know & learn FED

on

  • 194 views

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

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

Statistics

Views

Total Views
194
Slideshare-icon Views on SlideShare
194
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Know & learn FED Know & learn FED Presentation Transcript

    • Know & Learn FED
    • About Me Arunraj Natarajan Senior UI Developer Working at Cognizant Technologies
    • 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
    • Languages of FED Unlike other programming languages, you can see it in your browser
    • Languages of FED Front-end code tells your browser what to do. Then, the languages are -
    • Languages of FED Combo of these three languages makes Front End Technology
    • Web Browsers Universal languages allow you to design across browsers WebKit - Gecko - Trident - Presto
    • 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.
    • 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 …
    • 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
    • Exercise 1: Create basic HTML5 Page
    • Exercise 2: Make it Responsive
    • Thank You! Feel free to contact me Gmail: arungetz@gmail.com Facebook: https://www.facebook.com/itsR1