Web Front End - (HTML5, CSS3, JavaScript) ++

August 12, 2015
© Sreenath H B, 2014
Web Front End
HTML5
CSS3
JavaScript
Ajax
jQuery
Angular, Backbone, Knockout

Agenda
 WWW Explained
 HTML5
 CSS3
 Bootstrap
 JavaScript
 Ajax
 JSON
 jQuery, jQuery UI
 Angular, Knockout, Backbone

WWW
 Computer Networks
 Network Addresses
 Browsers and Web Servers
 Hyper Text Transfer Protocol (HTTP)
 Hyper Text Markup Language (HTML)
 Web Applications

HTML
 Basic Structure
 DTD
 Elements, Tags, Nodes
 Attributes, Properties, Values
 Forms
 GET, POST …

The Rules of HTML
 HTML Attribute Values May Be Case Sensitive
 HTML Is Sensitive to a Single White Space Character
 HTML Follows a Content Model
 Elements Should Have Close Tags Unless Empty
 Unused Elements May Minimize
 Elements Should Nest In Correct Order
 Attribute Values Should Be Quoted
 Browsers Ignore Unknown Attributes and Elements

Core Elements & Attributes
 Headings
 ID, name, class, title, alt
 BR, HR,
 P, SPAN, DIV
 Blockquote, Pre
 Lists – OL, UL

HTML Forms
 Input
 Text
 Password
 Hidden
 Submit
 Button
 Checkbox
 Radio
 Reset
 File
 Image
 Select
 Textarea

HTML5
 New Input Types
 Color, Date, Datetime, Email, Month, Number, Range, Search, Tel, Url,
Week
 New Attributes
 autocomplete, autofocus, autosave, inputmode, list, max, min, multiple,
pattern, placeholder, readonly, required, step
 New Semantic Elements
 section, nav, article, aside, hgroup, header, footer, time, mark, main, data,
math, datalist, progress, meter, menu
 Canvas, SVG
 Video, Audio
 Geolocation API, Local Storage API & Offline Apps
 Full Screen, Vibration, Media, Web Sockets API
 http://diveintohtml5.info/

CSS
 Selection
 Class, ID, Element
 Ancestor Descendent
 Parent > Child
 Inheritance, Cascade & !important
 Ems, pixels and points
 Box Model: Positioning & Display
 Floats & Clearing
 Backgrounds & Sprites
 Border, Padding, Margin
 Typeface
 Pseudo Classes

CSS3
 :before, :after
 Multiple Backgrounds, Gradients, Border-Image
 Transforms, Transitions, Animations
 Box Shadow, Border Radius
 Media Queries & Responsive CSS

Design Philosophies
 Graceful Degradation
 Progressive Enhancement
 Feature Detection using Modernizr
 Accessibility: http://diveintoaccessibility.info/
 Section 508, WCAG

Bootstrap
 http://getbootstrap.com/
 HTML5 / CSS3 Standards Compliant Responsive Web Pages
 CSS: <link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.cs
s">
 JavaScript: <script
src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"><
/script>
 Depends on jQuery

Bootstrap
 Grids
 row & 12 columns
 col-lg-n, col-md-n, col-sm-n, col-xs-n
 Navbars
 Panels
 Lists, Labels & Wells
 Breadcrumbs, Pagination
 Form Styling
 Jumbotron
 Alert, Progress Bars
 Media
 Carousel, Tabs, Collapse, Dropdown, Modal
 Scorllspy, Popover, Tooltip, Affix

JavaScript
 History: http://youtu.be/v2ifWcnQs6M (First 13.5 min only)
 Where to add scripts?
 How to debug JavaScript?
 Waiting for the page to finish loading
 Unobtrusive Programming
 Selection of DOM Elements
 You can change HTML using JavaScript
 You can change CSS using JavaScript
 Hello DHTML
 You can traverse the DOM too!

JavaScript Data
 Data Types – Number, String, Boolean
 Date
 Arrays, Associative Arrays
 If Statement, Truthy & Falsy Values
 Loops – While, Do-While, For, For-In
 Functions
 Scope of Variables
 Objects & JSON
 Regular Expressions
 === & !==, !!
 JavaScript Closures
 Functions with arbitrary params

JavaScript Events
 Events & Listeners
 Event Object & Event Context
 Event Cancellation
 Event Bubbling & Capturing
 Supporting older browsers.
 Call & Apply

Ajax
 XMLHttpRequest
 Open(Type, Url)
 Send(data)
 readyState & readystatechange – 0,1,2,3,4
 status - 200
 responseXML and responseText
 IE 5 & 6 – new ActiveXObject(“Microsoft.XMLHTTP”);
 XMLHttpRequest object is non-reusable
 XSS & CORS

jQuery
 Its just JavaScript!
 CDN, Minification, Local fallback
 DOMReady vs Window Load
 The jQuery Object
 Looping with each();
 this
 Chaining
 Accessing DOM Objects
 Array Subscript – Unsafe
 .get(n)
 Making peace with other libraries – noConflict()
 Caching for performance

Selectors – The Heart of jQuery
 Element Selector: $(“element”)
 ID Selector: $(“#id”)
 Class Selector: $(“.classname”)
 Ancestor Descendant: $(“E F”)
 Parent Child: $(“E > F”)
 Siblings – Adjacent & General
 Adjacent Sibling : $(“E + F”)
 General Siblings : $(“E ~ F”);
 Multiple Selectors: $(“E, F, G”)

Effects & Animations
 Hide, Show
 fadeIn, fadeOut
 Toggle
 slideUp, slideDown
 slideToggle
 .animate()

Working with Forms
 :text
 :checkbox
 :radio
 :image
 :submit
 :reset
 :password
 :file
 :input
 :button
 :enabled
 :disabled
 :checked
 :selected

Selectors Contd..
:first-child, :last-child, :only-child :nth-child(n)
$(“li:first-child”);
$(“tr:last-child”);
$(“img:only-child”);
$(“tr:nth-child(2n)”);
Attribute Selectors
Has Attribute: $(“img[alt]”);
Begins With: $(“a[href^=mailto:]”);
Ends With: $(“a[href$=.pdf]”);
Contains: $(“a[href*=microsoft]”);
Equals: $(“:checkbox[checked=true]”)
 :not(s), :empty, :eq(n), :contains(s)
 :even, :odd

DOM Traversal
 .filter()
 .siblings()
 .parent(), .children(), .parents()
 .next(), .nextAll(), .prev(), .prevAll(), .andSelf()
 .find()
Manipulating Styles
• .addClass()
• .removeClass()
• .css(“height”, “35px”)

Events
 Bubbling using Live, Die & Delegate and On
 Bind, Once
 Shorthand Events
 Passing additional parameters to event listeners
 Compound Events
 Toggle, Hover

DOM Manipulation
 .text()
 .html()
 .val()
 .append(), prepend()
 .remove()
 .empty()
 .attr(), .removeAttr()
 addClass(), removeClass()
 Creating DOM Nodes
 insertAfter, after, insertBefore, before
 prependTo, appendTo
 .wrap()

jQuery AJAX
 .load(“a.html”)
 $.getJSON(“b.json”);
 $.get(“c.xml”);
 $.post(“d.php”);
 $.ajax({
url:””,
type:”GET”,
dataType: “html”,
success: function(data){
},
error: function(xhr){
}
})

Ajax Contd..
 Calling a 3rd Party REST API / Web Service using jQuery Ajax
(http://openweathermap.org/API)
 JSONP & XSS
 JSON to HTML using a for-in loop

Authoring Plugins
(function($){
$.fn.myPlugin = function(options){
var defaults = { };
options = $.extend(defaults, options);
return this.each(function(){
//My Code for selected elements
});
}
})(jQuery);
//Calling
$(“selector”).myPlugin({options})

AngularJS
 MV* Design Patterns Overview
 AngularJS Intro

Other Libraries
 Backbone
 Knockout
 Ember
 Foundation

About Author
 Sreenath H B is the Product Owner for
eIntern LLC in the DC Metro Area.
 He specializes in Cloud Infrastructure
Management, Web Front End Development
and programming using the Micrososft Tech
Stack
 He is an avid traveler and blogger.
 Twitter: @ubshreenath
 Website: http://sreenath.net

Web Front End - (HTML5, CSS3, JavaScript) ++

More Related Content

What's hot (9)

Viewers also liked (20)

Similar to Web Front End - (HTML5, CSS3, JavaScript) ++ (20)

Recently uploaded (20)

Web Front End - (HTML5, CSS3, JavaScript) ++

Editor's Notes