UI UX Training Overview

Attend UX UI Training by Real-Time Expert with Real-Time Scenario’s and from the basics to Understanding, Creating a different Websites using UI UX  Skills.User Experience usually called as UX, mainly focusing on how user engaging with Product ( Website, Apps..etc ), That is to simple to understanding, Use etc.User Experience designing is the process of development and improvement of quality interaction between the user and product. User Experience deals with the research, testing, development, and content to develop Quality Interaction between the User and Products.User interface usually called as a UI design or User interface Engineering is the design of websites, Computer, Appliances, mobile communication devices and apps mainly focusing on user experience and interaction

Objectives of the Course

• Understand the UI Concepts in detail
• Understand the Development of  UI for Different websites

Pre-Requisites of the Course

• Basic Knowledge of HTML  and CSS is and added advantage

Duration of the Course

• 40 Hrs

UI UX Course Content

Introduction to UI / UX

• Roles of UI Developer
• Roles of UI Designer
• Difference between UI Developer & UI Designer
• Technologies required for UI Development

Tools Used for UI / UX

• Notepad++, Atom, Sublime Text, Brackets
• Visual Studio Code, WebStorm IDE
• Live Server using npm
• All tools installation and usage

Basics of UI

• Introduction to Web

Introduction to HTML 5

• How it works
• Structure of an HTML Doc
• HTML First Application
• Rules of HTML coding
• Header Tags, Paragraph tag
• DIV tag, Span Tag, Text Formatting
• Unordered List, Ordered List
• Images, Tables, Links, HTML Entities, Iframes
• Mini Project (The Great India Website)

Forms in HTML 5

• Introduction, Form Elements
• Input Types, Attributes
• Mini Project (Online Job Application)

Semantic Elements in HTML 5

• Introduction
• <Section>, <Article>, <Header> <Footer>
• <Aside>, <nav>, <figure>, <figcaption>
• <Details>, <Summary>, <time>, <main>
• Mini Project (Company Website)

Media Elements in HTML 5

• <audio>, <video>

Introduction to CSS3

• Introduction,
• CSS Selectors, CSS Pseudo classes selection
• Inline CSS, Internal CSS, External CSS
• Div, Id, Classes, Colors, Borders
• Margins, Paddings, Text-formatting
• Fonts, Lists, Styling Links, Tables, Box Model
• Display, Position, Float, Align, Pseudo Elements
• Navbars, Tooltips, Forms, Opacity, Image Gallery

2D Transforms in CSS 3

• Introduction
• translate(), rotate(), scale(), skewX(), skewY()
• skew(), matrix()

3D Transforms in CSS 3

• Introduction
• RotateX, RotateY, RotateZ

Transitions in CSS3

• Introduction
• Transition & Transformation
• Speed Curve, Delay Transition

Animations in CSS3

• Key frames rule, Delay Animation
• Specify animation speed curve
• Animation shorthand

Images in CSS3

• Rounded Images, Thumbnail Images, Image Text

Buttons in CSS3

• Basic Button Styling, Buttons Colors, Button Sizes,
• Rounded Buttons, Hover able Buttons
• Shadow Buttons, Disabled Buttons
• Button Groups, Animated Buttons
• Mini Project (Technology Portal Website)

Basic JavaScript

• Introduction to JavaScript
• JavaScript features
• Understanding Runtime Env
• Why to Learn JavaScript
• Interesting Facts of JS
• History of JavaScript
• Setting up Development Env
• JavaScript Basics
• Inline JavaScript
• Internal JavaScript
• External JavaScript
• Variable Declaration in JS
• JS Data Types and Operators
• JS Conditional Statements
• JS Objects, Arrays and Functions
• JS Math & Date Objects
• JS DOM Manipulation

Advanced JavaScript

• JS Scopes Concepts
• JS Advanced functions
• JS Closures
• JS Objects advanced
• JS Prototypes
• JS Objects Inheritance
• Mini Project (Typing Speed Tester App)

jQuery

• Introduction
• JQuery selectors, Events, and Effects
• JQuery with HTML

ECMA Script 6 Features

• Default Parameters
• Template Strings
• Let & Const
• For….of loops
• Lambdas
• Destructing
• The Spread Operator
• Computed Properties

TypeScript Development

• Introduction to TypeScript
• TypeScript Overview
• Differences between JavaScript and TypeScript
• TypeScript Editors
• Installing TypeScript
• Project Setup in TypeScript
• TypeScript Hello World
• TS Data Types, Enums and Functions
• TS Default Arguments and Optional Arguments
• TS Function Overloading
• TS Interfaces, Classes, Constructors and Methods
• TS Getters & Setters
• TS Lambda Expressions

Bootstrap 4 Development

• Introduction
• What is Bootstrap?
• Features of Bootstrap
• History of Bootstrap
• Bootstrap Overview and Installation
• Tools Used for Web Development
• Setting Development Environment
• Bootstrap First Application and Components Overview
• Basic Typography
• Text Alignment & Display
• Floats Position in Bootstrap
• Colors Background
• Spacing in Bootstrap
• Sizing in Bootstrap
• Breakpoints in Bootstrap
• Buttons in Bootstrap
• Navbars in Bootstrap
• List groups and Badges in Bootstrap
• Forms in Bootstrap
• Input groups in Bootstrap
• Alerts & Progress bars in Bootstrap
• Tables & Pagination in Bootstrap
• Cards in Bootstrap
• Media Objects
• Grid System in Bootstrap and Alignments in Bootstrap
• Flex boxes in Bootstrap
• Auto margin & wrapping order in
• Carousels in bootstrap
• Collapse classes in Bootstrap
• Tooltips in Bootstrap
• Popovers in Bootstrap
• Modals in bootstrap

Introduction to Angular JS

• Introduction
• What is Single Page Application?
• Declarative vs Imperative Programming
• How Angular Application Works
• First Angular JS Application
• Angular Directives, Controllers and Modules
• Dependency Injection
• Two way Data binding
• Examples of Two way Data binding
• Mini Project (Simple Angular JS App + Bootstrap 4)
• Major Real Time Projects & live Coding

1) Online Resume Website

2) UI Dashboard Website

3) Corporate Website

Course Highlights

1. Please note we are going to develop 6 Mini Projects and 3 Major Projects with live coding
   in this entire course.
2. Laptops are mandatory for attending this
   course.
3. Each Technology will be covered from Zero to
   Hero strategy.
4. Each Technology is perfectly organized with
   Starter Template and Completed Template.
5. Real Time Oriented Course Structure.
6. Complete Source code will be provided to you
7. time to time after completion of each technology.