Professional UI Development

For clarifications, contact ANIL AILANI SIR-9819704277 OFFICE-022-66730730/9892841512

Click here to download the .pdf file for HTML5-CSS3-Bootstrap contents

Click here to download the .pdf file for JS-JQuery contents

 

Professional Responsive Web Designing with HTML5, CSS3 and Twitter Bootstrap – Course Contents

Introduction to HTML5

  • Browser-Server architecture of Web Applications and the role of HTML
  • Evolution of HTML (HTML, XHTML, HTML5)
  • Browser Support
  • The DOCTYPE tag
  • Basic HTML Tags (head, body, div, p span,a -hyperlink, relative, absolute and bookmarks)
  • Attributes
  • A basic introduction to HTML tables (header, footer, body, colspan, rowspan)
  • Handling reserved characters with HTML entities
  • Applying styles (colors, fonts etc…) – inline styles, the <styles> section and basic CSS syntax
  • Introduction to CSS files and the need for CSS files.

CSS3 Selectors

  • .class
  • #id
  • Element selector
  • Group selector
  • Descendant selector
  • Child selector
  • Attribute selector
  • Pseudo selector
  • Pseudo element selector

Working with DIV tags

  • Margin and Paddings
  • Positioning
  • Float Property
  • Display Property

HTML5 Semantic Elements and related SEO concepts

  • Layout Elements
      • <article>
      • <aside>
      • <details>
      • <figcaption>
      • <figure>
      • <footer>
      • <header>
      • <main>
      • <mark>
      • <nav>
      • <section>
      • <summary>
      • <time>
  • Semantic significance of Heading Tags
  • Understanding semantic significance of Bold,Italics, Underline, Strong, Emphasized
  • Understanding HTML5 comments, computercode,quotations,citation, address, abbreviations, blockquotes and bidirectional text
  • Fallbacks for older browsers

HTML5 Forms 2.0 Elements

  • Form (meaning of action and method)
      • Input
      • Text
      • Submit,Radio
      • CheckBox
      • Date,Color
      • Password
      • DateTime
      • DateTime-Local
      • Email
      • Month
      • Number
      • Range
      • Search
      • Tel
      • Time
      • URL
      • Week
  • HTML5 Attributes -Restrictions and Validations
      • value
      • readonly
      • disabled
      • size
      • maxlength
      • autocomplete
      • autofocus
      • form
      • formaction
      • formenctype
      • formmethod
      • formnovalidate
      • formtarget
      • height and width
      • list
      • min and max
      • multiple
      • pattern (regexp)
      • placeholder
      • required
      • step
  • Textarea
  • Label
  • Fieldset
  • Legend
  • Select
  • Option
  • Optgroup
  • Button
  • Datalist
  • Keygen
  • Output
  • How to provide support for older browsers

Working with Images and Creating Professional Web Layouts

  • CSS3 Properties
      • Text Properties
      • Web Font
      • Box Properties
      • Transparency
      • Multiple Backgrounds
      • Gradients
      • Transforms
      • Transitions and Basic Animations
      • Flexbox
  • Working with Image Loading Techniques
      • Working with Sprites
      • Building Navigation using Sprites
      • Creating a HTML5 layout from a PSD

Working with HTML5 Graphics and Media elements

  • HTML Canvas
  • HTML SVG
  • HTML Media
  • HTML Video
  • HTML Audio
  • HTML Plugins
  • HTML Youtube

Other HTML Concepts

  • URL Encode
  • Charsets
  • Language Codes
  • Country Codes
  • Color Names
  • Color Mixer
  • Events
  • Messages
  • px,em and percent with conversion

Working with Advanced HTML APIs

(Will entail a short introduction to Javascript/JQuery)

  • Geolocation
  • Drag/Drop
  • Local Storage
  • Web Cache
  • Web Workers
  • SSE

Creating responsive site using Media Queries & Grids

  • Viewport
  • Densities
  • Importing External Files
  • What are Media Queries?
  • Types of media
  • Working with Grid Layouts (fluid grids)
  • Types of grid layout & frameworks
  • Applying condition with CSS
  • Making Images Responsive
  • Creating layout for desktop broswer, tablet & mobiles

Working with Twitter Bootstrap

  • What is Twitter Bootstrap
  • Working with grids
  • Applying Navigation
  • Working with Javascript
  • Styling (overriding) page elements

Working with LESS And SASS

  • What is LESS and Sass
  • Working with LESS variables and operator
  • Defining nested CSS rules LESS built-in function
  • Working with Sass variables and operator
  • Defining nested CSS rules
  • Importing external les

 

JQuery Course Contents

Refresher/Walkthrough of Javascript

  • What is Javascript? What is it used for?
  • Explaining the browser Document Object Model
  • Invoking Javascript on Load Event of Page in the right way
  • Invoking Javascript on events like TextBox KeyUp and Button Click
  • Form Validation on Submit using Javascript
  • An example of a Loan Calculator using Javascript that explains common javascript tasks like
      • Input Validations
      • Mathematical Calculations
      • Setting the contents and visibility of specific areas of the form

 Introduction to JQuery

  • What is JQuery?
  • Why JQuery?
  • Browser Compatibility
  • Getting Started With JQuery
      • Downloading JQuery Library
      • Referencing JQuery from Web Pages
      • Using CDNs to improve performance

Programming with JQuery

  • Basic Jquery syntax
  • Calling a JQuery function on Page Load and Document Ready events
  • Jquery Selectors (covers all 47 JQuery selectors)
  • Extending JQuery to create custom selectors
  • Handling common events like hover,click etc. with Jquery
  • Using the “on” method to attach multiple events and event handlers
  • DOM Traversal with JQuery
      • Ancestors
      • Descendants
      • Siblings
      • Filtering
  • DOM Manipulation with JQuery
      • Adding, Removing Changing contents like text value and attributes
      • Manipulating CSS classes
      • Modifying Dimensions
  • JQuery Effects
      • Hide/Show
      • Fade
      • Slide
      • Animate
      • stop
      • Callback
      • Chaining
  • Using Jquery with other libraries (noconflict)
  • Handling Drag and Drop with JQuery

JSON and JQuery

  • Introduction to JSON
  • Traversing and Accessing JSON elements with JQuery
  • Manipulating JSON data with Jquery

AJAX and JQuery

  • Introduction to AJAX
  • Making a AJAX calls using Javascript and XMLHttpRequest
  • Calling Load Method to load HTML content and its significance in responsive UI design’
  • JQuery AJAX get and post requests
  • Combining AJAX calls with when() and then()

JQuery Plugins

  • Finding, evaluating and using common JQuery plugins from the Developer community. Examples covered are -
      • Accordian
      • Tabs
      • DateTime
      • Timespan
      • Autocomplete
      • Modal Popup
  • Creating cutsom plugins
      • Creating a basic Plug-in
      • Creating a Stateful Plugin
      • Creating a Stateful Plugin with AJAX

Building Cross-Platform Mobile Pages with jQuery Mobile

  • Structuring pages with HTML5 data-* attributes
  • Saving space with listviews and collapsible blocks
  • Initializing pages and handling touch events
  • Creating and validating Mobile forms