UI

Technologies
Course
Brochure
 Topics Covered
Syllabus:

1) Web development basic and IDES

2) HTML
3) CSS
4) Bootstrap
5) JavaScript
6) DOM
 Web development basic and IDES
1) Basic in Web Design:
2) History of Internet
3) World Wide Web
4) Why create website
5) Web standards
6) Requirements
7) IDE (INTEGRATED DEVELOPMENT ENVIRONMENT)
8) Introduction about IDE
9) Benefits of ides
10) Difference between IDE and Text Editor
11) IDES
a) Visual Studio Code
b) NetBeans
c) Atom by GitHub
d) Brackets
e) SUBLIME TEXT 3
f) NOTEPAD++
g) PyCharm
h) IntelliJ IDEA
 HTML
Syllabus:

1) HTML
2) Web Application
a) Front-End
b) Back-End
3) Static Response vs Dynamic Response
4) HTML Basics
5) Structure of HTML Page
6) HTML Comment
7) Heading Tags
a) Paragraph tag:<p>
b) Legacy Tags
c) Advanced Tags
8) HTML Lists
a) Ordered List
b) Unordered List
c) Nested Lists
9) Div And Span Tags
10)Attributes
11)Setting Image inside HTML
12)Creating Hyper Links by using Anchor Tag: <a>:
13)Table Creation
14)Creation of HTML Forms
15)Creation of Labels for HTML Elements
a) required Attribute
b) action Attribute
16)How to include Spaces in HTML
17)How to Declare Multiple Submit Buttons in the Form
18)HTML Validations
 CSS
Syllabus:

1) Various ways to define Style for HTML Elements

a) In Line
b) By using style tag
c) By using css file
2) Basic Structure of CSS File
3) How to define Comments in CSS File
4) Various Possible Ways to Specify Color
5) Setting Background and Borders
6) Color vs Background
7) How to Set Background Image
8) Various Properties while setting Image
9) How to Set Border
10) Basic CSS Selectors
a) Element Selectors
b) ID Selectors
c) Class Selector
11)Advanced CSS Selectors
a) * selector
b) Descendant Selector
c) Adjacent Selector
d) Attribute Selector
e) nth of type Selector
12)CSS Inheritance
13)CSS Specificity
14)CSS Styles Assignment-1
15)CSS Styles Assignment-2
16)Fonts and Text in CSS
a) font-family
b) font-size
c) font-weight
d) line-height
e) text-align
f) text-decoration
17)How to use Custom Fonts in CSS
18)The Box Model
19)Chess Board Implementation
20)Tic-Tac-Toe Implementation
21)Photo Album
22)Blog Design by using HTML and CSS
 Bootstrap
Syllabus:

1) Bootstrap 3 vs Bootstrap
2) How to connect Bootstrap with HTML
a) By using CDN (Content Delivery Network)
b) Locally
3) Bootstrap- Buttons
a) Container Class
b) Button Classes
c) Jumbotron Classes
4) How to use Bootstrap Success Style for Our Buttons
5) Usage of Button related Classes for Anchor Tag
6) Usage of Button related Classes for Input Tag
7) How to Change Default Styles of Bootstrap
8) Bootstrap Forms
a) form-group
b) form-control
9) Form Development by using Bootstrap Elements
10) Bootstrap: Navbars
11) How to create Navbar Template
12) How to add Brand to the Navbar
13) How to add remaining Items to the Navbar
14) How to add Items to the Right Hand Side
15) How to Position navbar Items Properly
16) How to Fix navbar always at Top Even in Scroll Down
17) How to Inverse Color of Navbar
18) How to implement Hamburger to Navbar
19) Bootstrap: Grid System
20) How to implement Grid
21) How to define Grid for multiple Screens simultaneously
22) Nested Grids
23) Bootstrap Photo Gallery Application
24) How to add Bootstrap Glyphicons to HTML
25) How to Change jumbotron Background Color and Text Color
26) How to add Icons from fontawesome.com
 JavaScript
Syllabus:

1) Java Script Developer's Console

2) How to Launch JavaScript Console
3) The 5 Basic Javascript Primitive Data Types
a) Numbers
b) string
c) boolean
4) JavaScript Variables
5) null and undefined
6) The 3 most commonly used Java Script Functions
a) alert()
b) prompt()
7) How to write JavaScript to a separate File and connect to HTML
8) Demo Application: Age and Death Calculator
9) Operators
a) Arithmetic Operators
b) Comparison Operators
c) Logical Operators
10) Difference between == and ===
11) NaN (Not a Number)
12) Conditional Statements
13) Iterative Statements
14) while vs for Loop
15) Secret Agent Application
16) FUNCTIONS
17) Functions with Arguments
18) Functions with Default Arguments
19) Function with Return Values
20) JavaScript Scopes
a) Global Scope
b) Local Scope
21) Higher Order Functions
22) Anonymous Functions
23) JavaScript Arrays
24) Accessing Array Elements by using Index
25) Updating Array Elements by using Index
26) Adding New Elements to the Array by using Index
27) How to Create an Empty Array
28) How to find Length of Array
29) Is JavaScript Array can hold only Homogeneous Elements
30) Important Methods related to JavaScript Arrays
a) push()
b) pop()
c) unshift()
d) shift()
e) indexOf()
f) slice()
31) Multi-Dimensional Arrays
32) Book Management Application
33) Retrieving Elements of Array
a) while loop
b) for loop
c) for-of loop
d) forEach method
34) for Loop vs forEach Function
35) How to Delete Array Elements based on Index
36) Immutability vs Mutability
37) Write a JavaScript Function to take an Array as Argument and Print its
38) Elements in Reverse Order?
39) Write a JavaScript Function to check whether the Elements of given Array are
40) Identical (same) OR not?
41) Write a JavaScript Function to find Maximum Value of the given Array?
42) Write a JavaScript Function to find the Sum of Elements present in given
43) Array?
44) Book Management Application
45) JavaScript Objects
46) How to access Values from Object
a) obj["key"]
b) obj.key
47) How to create and initialize JavaScript Objects
48) How to Update Values
49) Iterating Objects
50) Differences between Arrays and Objects
51) Nested Objects and Arrays
52) Object Methods
53) this Keyword
54) Mini Application
 DOM
Syllabus:

1) DOM Structure
2) To display Document to the Console
3) To Display DOM Objects on the Console
4) How to grab HTML Elements from the DOM?
5) Important DOM Attributes
a. document.URL
b. document.body
c. document.head
d. document.links
6) Important Methods of DOM
a. document.getElementById()
b. document.getElementsByClassName()
c. document.getElementsByTagName()
d. document.querySelector()
e. document.querySelectorAll()
7) On the JavaScript Developer's Console
8) querySelector() vs querySelectorAll()
9) Write DOM based JavaScript Code to change Color of h1 Tag
10) Demo Application to grab HTML Elements into JavaScript
11) Color Changer Application
12) DOM: Content Interaction
13) How to Change Text?
14) How to Change HTML Code?
15) How to Change Attributes
a. element.getAttribute('attributeName')
b. element.setAttribute('attributeName','attributeValue')
16) Changing All Links Properties of google.com
17) To replace Google Logo without customized logo
18) Event Handling by using DOM
19) How to implement Event Handling
20) To Change Color of h1 on Single Click Operation
21) To Change Color of h1 on Double Click Operation
22) To Change Color of h1 on Mouse over Operation
23) To Change Color of h1 on Mouse out Operation
24) To Change Content and Color as Blue on Mouse over Operation
25) Body Color Changer Application
26) Demo Application for Random Names and Random Colors