WEB DESIGNING USING REACT
WEB DESIGNING USING REACT
Description
|
COURSE INTRODUCTION
|
|||||||||||
|
S.No |
Chapter Name |
Topic |
|||||||||
|
1 |
Getting Started with HTML |
Introduction to the Internet |
|||||||||
|
|
|
Introduction to HTML Terminology |
|||||||||
|
|
|
Options for Writing HTML |
|||||||||
|
|
|
Unicode Transformation Format (UTF) |
|||||||||
|
|
|
HTML5 Resources |
|||||||||
|
|
|
|
|||||||||
|
2 |
New for HTML5 |
What’s Different in HTML5? |
|||||||||
|
|
|
<!DOCTYPE> in HTML5 |
|||||||||
|
|
|
|
|||||||||
|
3 |
Designing a Home Page |
Design Considerations and Planning |
|||||||||
|
|
|
Basic Tags and Document Structure |
|||||||||
|
|
|
HTML Tags |
|||||||||
|
|
|
Head Tags |
|||||||||
|
|
|
Title Tags |
|||||||||
|
|
|
Body Tags |
|||||||||
|
|
|
Metadata |
|||||||||
|
|
|
Saving an HTML Page |
|||||||||
|
|
|
|
|||||||||
|
4 |
Web Page Formatting |
Adding a New Paragraph |
|||||||||
|
|
|
Adding a Line Break |
|||||||||
|
|
|
Inserting Blank Space |
|||||||||
|
|
|
Preformatted Text |
|||||||||
|
|
|
Changing a Page’s Background Color |
|||||||||
|
|
|
Div Element |
|||||||||
|
|
|
|
|||||||||
|
5 |
Text Items and Objects |
Headings |
|||||||||
|
|
|
Comments |
|||||||||
|
|
|
Block Quotes |
|||||||||
|
|
|
Horizontal Lines |
|||||||||
|
|
|
Special Characters |
|||||||||
|
|
|
|
|||||||||
|
6 |
Creating Lists |
Numbered (Ordered) Lists |
|||||||||
|
|
|
Bulleted (Unordered) Lists |
|||||||||
|
|
|
Nested Lists |
|||||||||
|
|
|
Definition Lists |
|||||||||
|
|
|
|
|||||||||
|
7 |
Working With Links |
What are Links? |
|||||||||
|
|
|
Text Links |
|||||||||
|
|
|
Image Links |
|||||||||
|
|
|
Opening a Page in a New Window or Tab |
|||||||||
|
|
|
Setting all Links on a Page to Open in a New Window or Tab |
|||||||||
|
|
|
Linking to an Area on the Same Page (Bookmarks) |
|||||||||
|
|
|
Linking to an E-mail Address |
|||||||||
|
|
|
Linking to Other Types of Files |
|||||||||
|
|
|
|
|||||||||
|
8 |
Working With Images |
Introduction to Images for Webpages |
|||||||||
|
|
|
Adding Images to Webpages |
|||||||||
|
|
|
Resizing an Image |
|||||||||
|
|
|
Alternative (ALT) Text |
|||||||||
|
|
|
Image Labels |
|||||||||
|
|
|
|
|||||||||
|
9 |
Working With Tables |
Inserting a Table |
|||||||||
|
|
|
Table Borders |
|||||||||
|
|
|
Table Headers |
|||||||||
|
|
|
Table Artibutes |
|||||||||
|
|
|
|
|||||||||
|
10 |
Working With IFrames |
What is an Iframe? |
|||||||||
|
|
|
Inserting Iframes |
|||||||||
|
|
|
Setting Height and Width |
|||||||||
|
|
|
Using an Iframe for a link target |
|||||||||
|
|
|
|
|||||||||
|
|
|
|
|||||||||
|
|
|
|
|||||||||
|
11 |
Working With Forms |
About Forms |
|||||||||
|
|
|
Sending to E-mail |
|||||||||
|
|
|
Text Boxes |
|||||||||
|
|
|
Text Areas |
|||||||||
|
|
|
Check Boxes |
|||||||||
|
|
|
Menu Lists |
|||||||||
|
|
|
Radio Buttons |
|||||||||
|
|
|
The Submit Button |
|||||||||
|
|
|
The Reset Button |
|||||||||
|
|
|
Changing the Tab Order |
|||||||||
|
|
|
|
|||||||||
|
12 |
Inserting Video and Audio |
About Video and Audio Files |
|||||||||
|
|
|
Linking to Video and Audio Files |
|||||||||
|
|
|
Adding Video |
|||||||||
|
|
|
Adding Audio |
|||||||||
|
|
|
Using YouTube to Display Video |
|||||||||
|
|
|
|
|||||||||
|
|
|
|
|||||||||
|
13 |
CSS-Introduction |
Benefits of CSS |
|||||||||
|
|
|
CSS Versions History |
|||||||||
|
|
|
CSS Syntax |
|||||||||
|
|
|
External Style Sheet using < link > |
|||||||||
|
|
|
Multiple Style Sheets |
|||||||||
|
|
|
Value Lengths and Percentages |
|||||||||
|
|
|
ID and Class |
|||||||||
|
|
|
Linking to a CSS |
|||||||||
|
|
|
|
|||||||||
|
|
|
|
|||||||||
|
14 |
Working With Text in CSS |
Emphasizing Text (Bold and Italic) |
|||||||||
|
|
|
Decoration |
|||||||||
|
|
|
Indentation |
|||||||||
|
|
|
Transformation |
|||||||||
|
|
|
Text Alignment |
|||||||||
|
|
|
Fonts |
|||||||||
|
|
|
Font Sizes |
|||||||||
|
|
|
Letter Spacing (Kerning) |
|||||||||
|
|
|
Line Spacing (Leading) |
|||||||||
|
|
|
Text Color |
|||||||||
|
|
|
Margins |
|||||||||
|
|
|
Padding |
|||||||||
|
|
|
Borders |
|||||||||
|
|
|
Styling Links |
|||||||||
|
|
|
Number and Bullet Styles |
|||||||||
|
|
|
Sizing Elements |
|||||||||
|
|
|
Text Wrapping |
|||||||||
|
|
|
Shadowing |
|||||||||
|
|
|
|
|||||||||
|
|
|
|
|||||||||
|
15 |
Creating Backgrounds in CSS |
Colors |
|||||||||
|
|
|
Images |
|||||||||
|
|
|
Fixed Images |
|||||||||
|
|
|
|
|||||||||
|
16 |
Working With Images in CSS |
Opacity |
|||||||||
|
|
|
Floating Images |
|||||||||
|
|
|
Image Galleries |
|||||||||
|
|
|
Image Sprites |
|||||||||
|
|
|
|
|||||||||
|
17 |
Working With Box Model in CSS |
What is a box model? |
|||||||||
|
|
|
Margin |
|||||||||
|
|
|
Padding |
|||||||||
|
|
|
Border |
|||||||||
|
|
|
Outline |
|||||||||
|
|
|
|
|||||||||
|
18 |
Working With Elements in CSS |
Display and Visibility |
|||||||||
|
|
|
Grouping and Nesting |
|||||||||
|
|
|
Dimensions of Elements |
|||||||||
|
|
|
Positioning |
|||||||||
|
|
|
Floating |
|||||||||
|
|
|
Pseudo-Classes/Pseudo-Elements |
|||||||||
|
|
|
|
|||||||||
|
|
|
|
|||||||||
|
19 |
Working With Table in CSS |
Borders |
|||||||||
|
|
|
Collapsed Borders |
|||||||||
|
|
|
Table Width and Cell Height |
|||||||||
|
|
|
Table Color |
|||||||||
|
|
|
Table Text Element |
|||||||||
|
|
|
Table Padding |
|||||||||
|
|
|
|
|||||||||
|
20 |
Working With Transforms in CSS |
What are Transforms? |
|||||||||
|
|
|
2D Transforms |
|||||||||
|
|
|
3D Transforms |
|||||||||
|
|
|
|
|||||||||
|
|
|
|
|||||||||
|
21 |
Transitions and Animations in CSS |
Transitions |
|||||||||
|
|
|
Animations |
|||||||||
|
|
|
|
|||||||||
|
|
|
|
|||||||||
|
22 |
Adding a Navigation Bar in CSS |
CSS Visibility |
|||||||||
|
|
|
CSS Display |
|||||||||
|
|
|
CSS Scrollbars |
|||||||||
|
|
|
CSS Positioning |
|||||||||
|
|
|
Static Positioning |
|||||||||
|
|
|
Fixed Positioning |
|||||||||
|
|
|
Relative Positioning |
|||||||||
|
|
|
Absolute Positioning |
|||||||||
|
|
|
CSS Layers with Z-Index |
|||||||||
|
|
|
|
|||||||||
|
|
|
|
|||||||||
|
23 |
Introduction To J Query |
What You Should Already Know |
|||||||||
|
|
|
What is jQuery ? |
|||||||||
|
|
|
Adding the jQuery Library to Your Pages |
|||||||||
|
|
|
Basic jQuery Example |
|||||||||
|
|
|
Downloading jQuery |
|||||||||
|
|
|
Alternatives to Downloading |
|||||||||
|
|
|
jQuery Syntax |
|||||||||
|
|
|
The Document Ready Function |
|||||||||
|
|
|
How to use Custom Scripts? |
|||||||||
|
|
|
Using Multiple Libraries |
|||||||||
|
|
|
jQuery – noConflict() Method |
|||||||||
|
|
|
|
|||||||||
|
24 |
jQuery – Basics |
String |
|||||||||
|
|
|
Numbers |
|||||||||
|
|
|
Boolean |
|||||||||
|
|
|
Objects |
|||||||||
|
|
|
Arrays |
|||||||||
|
|
|
Functions |
|||||||||
|
|
|
Arguments |
|||||||||
|
|
|
Scope |
|||||||||
|
|
|
Built-in Functions |
|||||||||
|
|
|
|
|||||||||
|
25 |
jQuery – Selectors |
jQuery – CSS Element Selector and ID Selector |
|||||||||
|
|
|
jQuery – CSS Element Class Selector and Universal Selector |
|||||||||
|
|
|
jQuery – CSS Multiple Elements E, F, G Selector |
|||||||||
|
|
|
jQuery Callback Functions |
|||||||||
|
|
|
|
|||||||||
|
26 |
jQuery – DOM Attributes |
Get Attribute Value |
|||||||||
|
|
|
Set Attribute Value |
|||||||||
|
|
|
|
|||||||||
|
|
|
|
|||||||||
|
27 |
jQuery – DOM Traversing |
Find Elements by index |
|||||||||
|
|
|
Filtering out Elements |
|||||||||
|
|
|
Locating Descendent Elements |
|||||||||
|
|
|
JQuery DOM Traversing Methods |
|||||||||
|
|
|
|
|||||||||
|
28 |
jQuery – CSS Methods |
Apply CSS Properties and Multiple CSS Properties |
|||||||||
|
|
|
Setting Element Width & Height |
|||||||||
|
|
|
JQuery CSS Methods |
|||||||||
|
|
|
|
|||||||||
|
29 |
jQuery – DOM Manipulation Methods |
Content Manipulation |
|||||||||
|
|
|
DOM Element Replacement |
|||||||||
|
|
|
Removing DOM Elements |
|||||||||
|
|
|
Inserting DOM elements |
|||||||||
|
|
|
DOM Manipulation Methods |
|||||||||
|
|
|
Binding event handlers |
|||||||||
|
|
|
Removing event handlers |
|||||||||
|
|
|
Event Types |
|||||||||
|
|
|
The Event Object and Attributes |
|||||||||
|
|
|
|
|||||||||
|
30 |
jQuery – Effects |
JQuery Effect Methods, Hide and Show |
|||||||||
|
|
|
jQuery Toggle |
|||||||||
|
|
|
jQuery Slide – slideDown, slideUp, slideToggle |
|||||||||
|
|
|
jQuery Fade – fadeIn, fadeOut, fadeTo |
|||||||||
|
|
|
jQuery Custom Animations |
|||||||||
|
|
|
|
|||||||||
|
31 |
jQuery – AJAX |
load() |
|||||||||
|
|
|
get() |
|||||||||
|
|
|
post() |
|||||||||
|
|
|
ajax() |
|||||||||
|
|
|
|
|||||||||
|
32 |
jQuery – JSON |
getJSON() |
|||||||||
|
|
|
|
|||||||||
|
33 |
Introduction to React JS |
|
|||||||||
|
|
· History of front end libraries |
|
|||||||||
|
|
· Motivation for using React |
|
|||||||||
|
|
· Key differentiators (Virtual DOM, One way binding) |
|
|||||||||
|
|
· Thinking in React |
|
|||||||||
|
|
· Modern Javascript (ES6) for React |
|
|||||||||
|
34 |
React Components |
|
|||||||||
|
|
· React component |
|
|||||||||
|
|
· Render function |
|
|||||||||
|
|
· Component API |
|
|||||||||
|
|
· Component lifecycle |
|
|||||||||
|
|
· State |
|
|||||||||
|
|
· Props |
|
|||||||||
|
|
· Mixins |
|
|||||||||
|
|
· JSX |
|
|||||||||
|
35 |
React internals |
|
|||||||||
|
|
· Reconciliation algorithm |
|
|||||||||
|
36 |
Component inter communication |
|
|||||||||
|
|
· Component composition |
|
|||||||||
|
|
· Pass data from parent to child |
|
|||||||||
|
|
· Pass data from child to parent |
|
|||||||||
|
37 |
Component styling |
|
|||||||||
|
|
· Radium |
|
|||||||||
|
|
· CSS Modules |
|
|||||||||
|
|
· LESS/SASS |
|
|||||||||
|
38 |
Unit testing components |
|
|||||||||
|
|
· Jasmine |
|
|||||||||
|
|
· React test utilities |
|
|||||||||
|
39 |
Performance optimizations |
|
|||||||||
|
|
· PureRenderMixin |
|
|||||||||
|
|
· Expensive DOM manipulations |
|
|||||||||
|
|
· Performance tools |
||||||||||