• HTML 4
• XHTML
• CSS 2.1
• JavaScript
• HTML 5
• CSS 3
• jQuery
• jSON
• AJAX
• Bootstrap
• Responsive Web Design
• KnockoutJS
• AngularJS
• jQuery Mobile
• Best Practices in HTML, CSS, JavaScript
Pre-requisites: Any one programming language
Goal of the Course: To makeyou ready to develop a web site / web application using the latest client side web technologies and web standards.
This course will be an added advantage in your .NET, Java, PHP career.
1) Intro to Web App Development
• What is web / internet
• What is web site
• What is web page
• What is web browser
• What is web server
• What is web client
• What is web technology
• Client side web technologies (vs) server side web technologies
2) HTML 4
• Intro to html
• Syntax of html
• Creating simple web page using html
• Intro to html elements / html tags
• <html>, <body>
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• <b>, <i>, <u>, <strong>, <em>, <sup>, <sub>
• <abbr>, <bdo>, <article>
• <br>, <img>, <a>
• <head>, <title>, <meta>
• <ul>, <ol>, <li>, <dl>, <dt>, <dt>
• <table>, <tr>, <td>, <th>, <caption>
• <div>, <span>
• <form>, <input>, <textarea>
• <select>, <option>, <optgroup>
• <button>, <fieldset>, <legend>, <label>
• <iframe>
• HTML Entities
3) XHTML
• Intro to XHTML
• Need of XHTML
• XHTML in real web sites
• Rules-set of XHTML
• <!DOCTYPE>
4) CSS 2.1
• Intro to CSS 2.1
• Need of CSS in real web sites
• Syntax of CSS
• Background properties
• Font properties
• Text properties
• Link properties
• List properties
• Box model (padding, margin, border)
• Display property
• Position property
• Overflow property
• Important CSS selectors
• Opacity
• Float
• Internal, inline, external styles
5) JavaScript
• Intro to JavaScript
• Need of JavaScript in real web sites
• Variables
• Operators
• Control statements
• Dialog boxes
• User-defined functions
• DOM manipulations
• Event handling
• Click, dblclick, focus, blur
• Mouseover, mouseout, mousemove
• Keyup, keypress, change, onload
• Updating CSS using JavaScript
• Updating attributes using JavaScript
• Creating, removing elements
• Setinterval, Settimeout
• Random
• External JavaScript
• Validations using JavaScript
• String methods
• Date methods
6) HTML 5
• Intro to HTML 5
• Need of HTML 5 in real web sites
• Removed elements
• Remove attributes
• <meter>, <progress>, <figure>, <figcaption>
• <details>, <summary>
• <datalist>, <output>
• New input types
• New attributes of <input> tag
• <audio>, <video>
• LocalStorage, SessionStorage
• <header>, <nav>, <section>, <aside>, <footer>
• Geo location
• App cache
• Web workers
• Server sent events
• Drag and drop
• Important canvas and SVG concepts
7) CSS 3
• Intro to CSS 3
• rgba
• Border radius
• Box shadow, text shadow
• Word wrap
• Resize
• Multiple columns
• Transitions
• Animations
• 2D Transformations
• Gradient colors
• Font face
8) Responsive Web Design
• Intro to Page Template Development
• Header, nav, leftcol, pagecontent, footer
• Intro to responsive web design
• Need of RWD in real web sites
• Extra-small, small, medium, large devices
• Media queries
• Targeting CSS file to various resolutions
|
9) jQuery
• Intro to jQuery
• Need of jQuery in real web sites
• Advantages of jQuery
• jQuery versions
• jQuery production vs development
• Downloading jQuery
• val, html, text
• Bind and Unbind
• Click, dblclick, focus, blur, change
• Mousemove, mouseover, mouseout
• Keypress, keyup
• Disabling cut, copy, paste using jQuery
• Disabling right click using jQuery
• Filtering characters in a textbox using jQuery
• Fade in, fade out, fade to, fade toggle
• Show, hide, toggle
• Slide down, slide up, slide toggle
• jQuery chaining
• addClass, removeClass, toggleClass, hasClass, css
• attr, removeAttr
• jQuery animations
• jQuery animations with easing effects
• Important jQuery selectors and filters
• append, prepend, after, before
• AppendTo, prependTo, insertAfter, insertBefore, clone
• Wrap, wrapAll, empty, remove, replaceWith
10) JSON
• Intro to JSON
• JSON syntax
• Need of JSON in real web sites
• JSON object
• JSON array
• Complex JSON objects
• Reading JSON objects using jQuery
11) jQuery UI
• Intro to jQuery UI
• Need of jQuery UI in real web sites
• Downloading jQuery UI
• Importing jQuery UI
• Draggable
• Droppable
• Resizable
• Selectable
• Sortable
• Accordion
• Auto Complete
• Button Set
• Date Picker
• Dialog
• Menu
• Progress Bar
• Slider
• Spinner
• Tabs
• Tooltip
• Color Animation
• Easing Effects
• addClass
• removeClass
• Effects
• jQuery UI themes
• Customizing jQuery UI widgets / plug-ins
• jQuery UI with CDN
• Consuming jQuery Plug-ins from 3rd party web sites
12) jQuery Validations
• Intro to jQuery validation plug-in
• Using jQuery validation plug-in
• Regular expressions
13) jQuery AJAX
• Intro to AJAX
• Need of AJAX in real web sites
• Getting database data using jQuery-AJAX
• Inserting, Updating, Deleting database data using jQuery-AJAX
• Grid Development using jQuery-AJAX
Note: AJAX Demos will be shown with ASP.NET.
14) jQuery Mobile
• Intro to jQuery Mobile
• Need of jQuery Mobile in real web sites
• Downloading jQuery Mobile
• Creating pages
• Header, content, footer
• Forms, control group
• Flip switch, slider, tabs
• Navigation and transitions
• Themes
• Buttons
• Icons
• Grid layout
15) Bootstrap
• Introduction to Bootstrap
• Need of Bootstrap in real web sites
• Bootstrap First Example
• Bootstrap Lead
• Bootstrap Alignment
• Bootstrap Text colors
• Bootstrap Tables
• Bootstrap Buttons
• Bootstrap Glyphicons
• Bootstrap Show
• Bootstrap Hidden
• Bootstrap Images
• Bootstrap Jumbotron
• Bootstrap Paging
• Bootstrap Panels
• Bootstrap DropDown
• Bootstrap NavBar
• Bootstrap Breadcrumbs
• Bootstrap ProgressBar
• Bootstrap Modal Plugin
• Bootstrap Tabs Plugin
• Bootstrap Carousel Plugin
• Bootstrap Grid system (Responsive Web Design)
• Bootstrap Forms
16) KnockoutJS
• Intro to KnockoutJS
• Need of KnockoutJS in real web sites
• Downloading KnockoutJS
• MVVM architecture
• Creating view, view model and model
• data-bind
• Observable property
• Computed property
• Subscribe
• Working with JSON arrays
17) AngularJS
• Intro to AngularJS
• Need of AngularJS in real web sites
• Downloading AngularJS
• AngularJS first example
• AngularJS built-in directives
• AngularJS expressions
• AngularJS modules
• AngularJS controllers
• AngularJS scope
• AngularJS dependency injection
• AngularJS bootstrapping
• AngularJS data bindings
• AngularJS $watch
• AngularJS filters
• AngularJS events
• AngularJS AJAX
• Ng-repeat
• AngularJS with json arrays
• AngularJS registration form and login form
• AngularJS CRUD operations
• AngularJS Animations
• AngularJS validations
• AngularJS $q
• AngularJS custom values
• AngularJS custom factories
• AngularJS custom services
• AngularJS custom directives
• AngularJS custom providers
• AngularJS Routing
• AngularUI Routing
|
