HTML 4
XHTML
CSS 2.1
JavaScript
HTML 5
CSS 3
Static Web Design
Responsive Web Design
jQuery and jQuery UI
Bootstrap
AJAX
AngularJS
1) Intro to Web UI Development
- Introduction
- Client-side programming (vs) Server-side programming
2) HTML 4
- Intro to html
- Syntax of html
- Creating simple web page using html
- Intro to html elements / html tags
- Syntax of Tag
- html, head, title, body
- h1, h2, h3, h4, h5, h6
- b, i, u, strike, strong, em, sup, sub
- abbr, bdo, br, hr, img, a
- head, title, meta>
- ul, ol, li, dl, dt, dt
- table, tr, td, th, caption
- div, span
- form, input, All input types and attributes, textarea, select, option, optgroup
- button, fieldset, legend, label
- iframe
- Deprecated tags
- HTML Entities
- DOCTYPE
3) XHTML
- Intro to XHTML
- Need of XHTML
- XHTML in real web sites
- XHTML rules
4) CSS 2.1
- Intro to CSS 2.1
- Need of CSS in real web sites
- Syntax of CSS
- Color, background-color, background-image, background-repeat, background-position, background-attachment, types of colors
- Font-family, font-size, font-weight, font-style, letter-spacing, word-spacing
- Line-height, text-decoration, text-transform, text-align, text-indent, span tag
- List-style-type, list-style-image
- DIV tag, width, height, float, clear, border, margin, padding, opacity
- Box model
- Block level tags (vs) Inline tags
- Introduction toCSS selectors
- Tag selector, ID selector, class selector, compound selector, grouping selector, child selector, direct child selector, direct child selector, adjacent siblings selector, attribute selector, hover, focus, universal selector
- first-child, last-child, nth-child, even, odd, before, after, selection,
- position, static, absolute, relative, fixed, z-index
- display, visibility, overflow, a:link, a:hover, a:visited, a:active
- Overflow, visibility
- Internal, inline, external style sheets
- Style precedence
5) Static Web Design
- DIV-based Static Page Template
- Header, nav, container, leftcol, pagecontent, footer
6) Responsive Web Design
- Intro to responsive web design
- Need of RWD in real web sites
- Extra-small, small, medium, large devices
- Media queries in CSS file
- Viewport meta tag
7) JavaScript
- Intro to JavaScript
- Need of JavaScript in real web sites
- Syntax of JavaScript
- Variables
- Operators
- Control statements
- Noscript
- Alert, Confirm
- Functions, arguments and return
- What is DOM?
- Overview of DOM manipulations
- Getting elements: getElementById, getElementsByName, getElementsByClassName
- Attributes: setAttribute, getAttribute, removeAttribute, List of attributes
- Manipulating CSS
- Introduction toEvent handling
- Click, dblclick, focus, blur
- Mouseover, mouseout, mousemove
- Keyup, keypress, change
- Focus and blur
- Contextmenu, cut, copy, paste
- This keyword
- Adding elements, removing elements
- Random
- Important String functions
- Important Date functions
- Validations using JavaScript
- Overview of Regular expressions
- External JavaScript
- JSON objects, JSON arrays
- JavaScript OOP: Classes, Objects, Properties, Methods, Inheritance
8) HTML 5
- Intro to HTML 5
- Need of HTML 5 in real web sites
- Removed elements
- Remove attributes
- New DOCTYPE for HTML 5
- New input types: color, date, time, datetime-local, month, week, search, number, range, email, url
- New input attributes: placeholder, autofocus, required, pattern, min, max, step, novalidate, formaction, formmethod, formtarget, form, autocomplete
- audio, video
- article, header, nav, section, aside, footer
- meter, progress, figure, figcaption
- details, summary
- datalist, output
- LocalStorage, SessionStorage
- Geo location
- App cache / Offline Apps
- Web workers
- Server sent events
- Drag and drop
- Introductionto canvas and SVG
9) CSS 3
- Intro to CSS 3
- Resize
- Word wrap
- rgba
- Border radius
- Box shadow, text shadow
- Multiple columns
- Transitions
- Animations
- 2D Transformations
- Overview of Gradient colors
- Google Fonts
10) Bootstrap
- Introduction to Bootstrap
- Need of Bootstrap in real web sites
- Bootstrap First Example
- Bootstrap Lead
- Bootstrap Alignment
- Bootstrap Text colors
- Bootstrap Tables
- Bootstrap Table background colors
- Bootstrap Buttons
- Bootstrap Glyphicons
- Bootstrap Show
- Bootstrap Hidden
- Bootstrap Images
- Bootstrap Jumbotron
- Bootstrap Paging
- Bootstrap Panels
- Bootstrap NavBar
- Bootstrap Grid system (Responsive Web Design)
11) 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 toggle
- Show, hide, toggle
- Slide down, slide up, slide toggle
- jQuery chaining
- Manipulating CSS: addClass, removeClass, toggleClass, hasClass, css
- Manipulating Attributes: set attr, get attr, removeAttr
- jQuery animations
- Important jQuery selectors and filters
- append, prepend, after, before
- AppendTo, prependTo, insertAfter, insertBefore
- Wrap, wrapAll, empty, remove, replaceWith
12) 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
- Spinner
- Tabs
- Tooltip
- Color Animation
- Easing Effects
- addClass
- removeClass
- Effects
- jQuery UI themes
- Downloading other third-party plugins
- jQuery validation plugin
13) AJAX
- Intro to AJAX
- Need of AJAX in real web sites
- XMLHttpRequest: properties and events.
- Understanding GET, POST, PUT, DELETE
- $.ajax( essential options )
14) AngularJS
- Intro to AngularJS
- Need of AngularJS in real web sites
- Downloading AngularJS
- AngularJS first example
- Expressions
- AngularJS built-in directives: ng-app, ng-init, ng-bind, ng-model, ng-show, ng-hide, ng-if, ng-disabled, ng-src, ng-
class, ng-click, ng-dblclick, ng-focus, ng-blur, ng-keyup, ng-keypress, ng-mouseover and ng-mouseout, ng-mousemove, ng-change
- MVC architecture
- Understanding model, view, controller
- Modules and Module architecture
- Creating multiple AngularJS modules and bootstrapping
- $scope (vs) $rootScope
- Data bindings
- Working with forms
- Login form
- Pre-defined filters: uppercase, lowercase, number, currency, orderBy
- ng-repeat
- AJAX: GET, POST, PUT, DELETE
- $watch
- Animations: ng-enter-, ng-enter-active, ng-leave, ng-leave-active
- Validations: dirty, pristine, touched, untouched, valid, invalid
- $q
- Custom values
- Custom factories
- Custom services and dependency injection
- Factories (vs) Services
- Custom filters
- Custom directives
- Custom providers
- AngularJS Routing
- AngularJS Architecture and Startup Process
