User Interface Development

An online course intended to make you a specialist in creating client interface and realize all that is required to make UI web solutions and create GUIs in perfect, organized and viable configuration

About the Course

User interface is the field of human-machine interaction. The goal of user interface design is to make the user’s interaction as simple and efficient. It reduces the gap between requirements and iterative implementation, produces structured systems and associated with code generation method. UI developer will enhance the ability to create browser-based user interfaces and UI web solutions from the requirements stage to deployment onto the production web farm.

In the decade leading up to 2020, a record number of businesses will launch new computer systems and applications to gain a competitive advantage in the increasingly cloud-based digital world. Demand for talented user interface developers will flourish in all programming-centric domains, including web, software and mobile application development.

This as simply as I can describe the different skills required for each role:

• User Experience (UX) Designer= Research + Design
• UI Developer= Design + HTML/CSS/JS/J Query/Bootstrap/Angular JS
• Application Developer= Back-End coding + HTML/CSS/JS etc.

To further expand the distinction between the roles:

• UX Designers focus on the structure and layout of content, navigation and how users interact with them. These don’t normally (but can) try to be perfect from a visual perspective. The types of deliverables they produce include site-maps, user flows, prototypes and wireframes, which are more focussed on the underlying structure and purpose of the software. The visual appearance does impact on these, but can be created as a separate layer that is applied over the top.
• UI Developers focus on the way the functionality is displayed and the fine detail of how users interact with the interface. They produce the visual comps and functioning front-end code. This is very much about polished final production quality outputs.

Web Application 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

HTML4

• Introduction to html
• Syntax of html
• Creating simple web page using html
• Introduction 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,dd,dt
• table,tr,td,th,caption
• div, span
• form,input,textarea
• select, option, optgroup
• button,fieldset,legend,label
• iframe
• HTML Entities

XHTML

• Intro to XHTML
• Need of XHTML
• XHTML in real web sites
• Rules-set of XHTML
• DOCTYPE

CSS2.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
• Table styles
• Internal, inline, external styles

Java Script

• Intro to JavaScript
• Need of JavaScript in real web sites
• Operators
• Control statements
• Dialog boxes
• Random
• User-defined functions
• Event handling
• Click, dblclick, focus, blur
• Mouseover, mouseout, mousemove
• Keyup, keypress, change, onload
• Updating CSS using JavaScript
• Setinterval
• External JavaScript
• Simple validations using JavaScript
• Important string methods in JavaScript

HTML5

• Introduction to HTML 5
• Need of HTML 5 in real web sites
• Removed elements
• Remove attributes are meter, progress, figure,figcaption
• details, summary
• datalist, output
• New input types
• New attributes of input tag
• audio, video
• LocalStorage, SessionStorage
• Geo location
• App cache
• Web workers
• Server sent events
• Drag and drop
• Important canvas and SVG concepts

CSS3

• Introduction to CSS 3
• rgba
• Border radius
• Box shadow, text shadow
• Word wrap
• Resize
• Font face
• Multiple columns
• Transitions
• Animations
• 2D Transformations
• Gradient colors

Responsive Web Design

• Introduction 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
• Targeting CSS file to various resolutions
• header,nav,section,aside,footers

jQuery

• Introduction to jQuery
• Need of jQuery in real web sites
• Advantages of jQuery
• jQuery versions
• jQuery production vs development
• Downloading jQuery
• Event Handling jQuery
• Disabling cut, copy, paste using jQuery
• Disabling right click using jQuery
• Filtering characters in a textbox using
• 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
• Html, text, append, prepend, after, before
• AppendTo, prependTo, insertAfter,insertBefore, clone
• Wrap, wrapAll, empty, remove,replace

jSON

• Introduction to jSON
• jSON syntax
• Need of jSON in real web sites
• jSON object
• jSON array
• jSON complex object / array

jQuery UI

• Introduction to jQuery UI
• Need of jQuery UI in real web sites
• Downloading jQuery UI
• Importing jQuery UI
• Using important jQuery UI widgets / plug-ins
• jQuery UI themes
• Customizing jQuery UI widgets / plug-ins
• jQuery UI with CDN

jQuery Validations

• Introduction to jQuery validation plug-in
• Using jQuery validation plug-in
• Important regular expressions

jQuery AJAX

• Introduction to AJAX
• Need of AJAX in real web sites
• Getting database data using jQuery-AJAX
• Inserting, Updating, Deleting database data using jQuery-AJAX

Web Services jQuery Mobile

• Introduction 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

Bootstrap

• Introduction to Bootstrap
• Need of Bootstrap in real web sites
• Downloading Bootstrap
• Grid system
• Typography
• Tables
• Forms
• Navigation bar
• Button dropdown
• Jumbotron
• Alerts
• Progress bar

KnockoutJS

• Introduction to KnockoutJS
• Need of KnockoutJS in real web sites
• Downloading KnockoutJS
• MVVM architecture
• Creating view model
• data-bind
• Observable property
• Computed property
• Subscribe
• Working with jSON arrays

Angular JS

• Introduction to AngularJS
• Need of AngularJS in real web sites
• Downloading AngularJS
• AngularJS expressions
• AngularJS directives
• AngularJS controllers
• AngularJS filters
• AngularJS AJAX
• AngularJS Tables
• Ng-disabled
• Ng-show
• Ng-click

Best Practice in HTML, CSS, Java Script

Best practices in HTML

Best practices in CSS

Best practices in JavaScript

Mini Project