Know & learn FED


Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Know & learn FED

  1. 1. Know & Learn FED
  2. 2. About Me Arunraj Natarajan Senior UI Developer Working at Cognizant Technologies
  3. 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. 4. Languages of FED Unlike other programming languages, you can see it in your browser
  5. 5. Languages of FED Front-end code tells your browser what to do. Then, the languages are -
  6. 6. Languages of FED Combo of these three languages makes Front End Technology
  7. 7. Web Browsers Universal languages allow you to design across browsers WebKit - Gecko - Trident - Presto
  8. 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. 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. 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. 11. Exercise 1: Create basic HTML5 Page
  12. 12. Exercise 2: Make it Responsive
  13. 13. Thank You! Feel free to contact me Gmail: Facebook:
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.