UI/UX - Syllabus

Introduction


● UI Developer roles and Responsibilities
● UX designer roles
● Technologies needed
● Power of UI
● Current market requirements on UI
● Sample Web Pages
● Crawling and meta tags


Basics


● DOM
● Structure of HTML Page
● Mandatory tags in html page (html, head, body)
● What is CSS
● Different ways of applying css for elements, and priority chain of css
● Heading tags(H1…H6), Tags and attributes(Class, Id, style..etc)
● Inline and block level elements


More Tags in html


● Including external page links in a page using anchor tags and its properties
● Working with row and column data using table tags
● Hiding and unhiding elements using display property

● img tag, p tag, ul and ol tags, li, nobr, hr, br etc
● Layouts, forms, buttons
● Input fields (textbox, radio button, checkbox, dropdown, textarea etc)


More CSS properties


● Adding borders, font, pseudo classes
● Positioning elements (absolute, relative, fixed and static)
● Image spriting
● Boxmodel (margins, padding)
● Floating elements (float left, right etc.)
● Including external resources
● Absolute and Relative paths
● Including external resources like css, images etc


Form Elements


● Get & Post
● Validating input values in a form
● Form action and type


JavaScript


● Introduction
● Dynamic creation and manipulation of dom elements using js
● Adding dynamic event listeners to dom elements
● Event capturing and event bubbling


jQuery Framework


● Onload and onready difference
● jQuery selectors
● Multiple ways of referring dom elements using jQuery selectors
● jQuery methods
● Adding dynamic properties for dom elements
● Toggling elements
● Creating dynamic elements using jQuery jQuery Traversing
Methods
● Finding elements using jQuery techniques


Events using jQuery


● Binding events
● Dynamic binding
● List of events been supported in jQuery(blur, change, click, dbclick….etc)


HTML5


● Difference between HTML5 and HTML 4

● List of Browsers support HTML5
● Doctype
● Media tags (audio and video tags)
● Graphics using Canvas tag
● Working on locations lat and lng using Geolocation


CSS 3


● Difference between CSS2 and CSS3
● Adding borders and backgrounds
● Advanced text effects(shadow)

● 2D and 3D Transformations
● Adding Transitions to elements
● Adding animations to text and elements


Responsive Designs


● Difference between multiple devices, making a page to work on multiple devices
● Media queries
● Introduction to Bootstrap CSS API


Mini Project
● Sample web application using all the able technologies