UI/UX Designing

Module 1 - HTML & CSS2

HTML & XHTML (Extensible Hyper Text Markup Language)

Difference between HTML and XHTML.

Why XHTML? not HTML.

Understanding DOCTYPE.

Understanding basic XHTML tags

General form of a tag.

HTML attributes.

Basic text styling.

HTML Heading.

HTML Paragraph.

HTML fonts.

HTML colour codes.

Hexadecimal colour coding.

Working with table.

Adding image to webpage.

Working with Anchor, Image and Iframe tag.

Working with HTML forms.

Basic layout design using tables.

Learning about the various deprecated tags in XHTML.

Adobe Dreamweaver

Introduction to Dreamweaver.

Understanding the 3 modes (Design, Split, and Code).

Coding and adding elements using Dreamweaver.

Basic Templates in Dreamweaver.

CSS2 (Cascading Style sheet)

Use of CSS.

Three types of CSS.

Basic CSS properties.

Basic text styling using CSS.

CSS Background Properties.

CSS box model.

Tag selector, Id selector, Class selector, Attribute selectors.

Grouping and Nesting of selectors.

Pseudo classes and Pseudo elements.

Working with DIV tags.

Understanding DIV alignment, float and clear properties.

Understanding CSS positions.

Layout and template design (Building Table less websites).

Creating Simple drop down menus.

Fixing the compatibility issues is Various Browsers.

Module 2 - Javascript & JQuery

JavaScript

Use of JavaScript.

JavaScript Popup boxes.

JavaScript Events.

Events handling.

Manipulating DOM with JavaScript.

JavaScript Operators.

Control Structure.

Writing functions.

Tag and ID selector.

JavaScript Objects.

Making Light box with JavaScript.

Making an image viewer with JavaScript

Working with arrays.

JavaScript Timers.

Making JavaScript Image Slide Show

JavaScript Date and Time Functions.

JavaScript form validations using Regular Expression.

Application of JavaScript.

JQuery

JQuery syntax.

JQuery selectors.

Creating, inserting, and manipulating web page content.

JQuery predefined functions.

Understanding JQuery plugins.

Using event ready handlers that work across browsers.

Working with JQuery effects, such as showing, hiding, sliding and fading page elements.

JQuery callback functions.

Creating custom animations with specialized properties and options.

JQuery events.

Understanding Elements Hierarchy.

Using the JQuery UI plug-in to give pages a polished look.

Developing JQuery applications and Plugins (like Facebook and Twitter).

Making JQuery sliding menus.

Making JQuery lightbox.

Making JQuery image slider.

Making JQuery image slideshow.

Making jQuery Image Carousel.

Making JQuery Image Zoom viewer.

Making JQuery Collapsable Menu.

Module 3 - HTML5 & CSS3

CSS 3

Understanding CSS3.

Using CSS3 advance Tag and Attributes selectors.

Clearfix with CSS3.

CSS3 Rounded Coners.

CSS3 Box shadow properties.

CSS3 Text Shadow properties.

CSS3 Background Gradients.

Making beautiful buttons using CSS3.

CSS3 Transformations Properties.

CSS3 Rotate , Translate, Skew, Scale properties.

CSS3 transitions.

CSS3 transitions delays.

CSS3 transition functions.

CSS3 keyframes.

Creating animations Using Keyframes

Animating webpages using CSS3.

Mixing CSS3 and JQuery animations to create advance plugins.

CSS3 Image slideshow.

CSS3 Media Queries.

Understanding Responsive Layouts.

Making Basic Responsive Layout in CSS3 Media Query.

Making Advance Website Template in CSS3 Media Query.

HTML5

What is HTML5?

How is HTML5 different from XHTML.

Drawbacks of XHTML.

HTML5 future uses.

Understanding HTML5 doctype.

HTML5 Basic tags.

HTML5 Advance Tags.

Replacing XHTML Divs with HTML5 advance tags.

Making a website template using HTML5.

Fixing HTML5 compatibility issues in different browsers.

HTML5 SHIV.

Making HTML5 compatible in IE-8 and lesser using HTML5 SHIV.

HTML5 custom data attributes.

Holding custom data in HTML5 data attributes.

Working with HTML5 data attributes and jQuery.

Understanding HTML5 Canvas.

Working with HTML5 Canvas using JavaScript and jQuery.

Drawing runtime graphics and Animations using HTML5 Canvas.

Playing with HTML5 canvas animations and characters using JavaScript and jQuery.

Module 4 - Twitter Bootstrap

Twitter Bootstrap 3 Framework

Downloading and Installing Bootstrap 3 framework.

Understanding various Components of Bootstrap Framework.

Working with Bootstrap Components

Navbar

Menu

Buttons

Jumbotron

Input groups

Buttons

Page Header

Page Footer

Forms

Panels

Making jQuery Slider in Bootstrap 3.

Making Responsive GRID layout using Bootstrap GRID.

Making a final Website Layout.

Website Hosting

Webhosting basics.

Hosting packages.

File Manager.

Creating Email accounts.

Using FTP client.

Working with FileZilla.

Making your website LIVE.

Understanding Compatibility issues

Issues with different browser versions.

Issues with CSS.

Testing a website in different browsers.

SEO (Search Engine Optimization)

Understanding SEO and its scope.

Difference between On page and Off page SEO.

Understanding Google Search Engine.

Meta Description and Keywords.

Enhancing SEO of your website.

Tools and IDE used

Notepad++

Dreamweaver

Adobe Photoshop.

Module 5 - Adobe Photoshop

Introduction to Adobe Photoshop

Types of tools.

Using Photoshop tools.

Understanding Layers in Photoshop.

Image gradient with Photoshop.

Creating Custom effects.

Merging two images in Photoshop.

Removing and Changing backgrounds of Images.

Making transparent backgrounds.

Changing colour of images.

Compressing images for use in websites.

Image opacity.

Creating animated banners (gif images).

Developing Banners and Headers for websites.

PSD to HTML Conversion

Understanding a PSD file.

Using Slice Tool to get various website images.

Converting a full PSD to HTML Website.