Front end UI with React online training | Front end UI with React training | Front end UI with React course | SelfpacedTech
- 1. HTML HTML Fundamentals Introduction HTML Text Headings Demo: Headings Block vs. Inline Elements Demo: Block and Inline Elements Whitespace Demo: Whitespace Additional Text Elements Demo: Additional Elements HTML Lists List Types Demo: Creating Lists Demo: List Rendering HTML Links Link concepts Demo: Linking Documents Understanding Targets Demo: Linking to Targets Additional Link Attributes HTML Tables Table Elements Demo: Structuring a Table Table Data Spanning Columns and Rows Formatting Tables Demo: Table Formatting HTML Form And Form Elements Introduction HTTP Get Request HTTP POST Request Form Input Elements
- 2. HTML Forms Fundamentals Form Basics Demo: Form Basics Form Settings Demo: Form Settings HTML Form Inputs Text inputs Demo: Text inputs Selections Demo: Selections Input attributes Demo: Input attributes HTML Images And Objects Image and Object Concepts Demo: Adding Images Demo: Adding Objects HTML5 Introduction to HTML5 Limitations of HTML4 Introduction and Advantages of HTML5 First HTML5 Document Overview of New Features of HTML5 Page Layout Semantic Elements Header Navigation Section & Articles Footer Aside and more Form Elements and Attributes New Input Types New Elements in Form New Attributes in Form Tag New Attributes in <input> Tag
- 3. Working with Canvas Coordinates Path and Curves Drawing Lines, Rectangles and Circles Text and Font Color Gradiations Drawing Images Scalable Vector Graphics (SVG) Understanding SVG Benefits of SVG Using SVG Tag Comparing with Canvas Media - Audio and Video Audio and Source tags Video and Source tags Track tag Mime types supported Browser Compatibility Programming using Javascript Drag and Drop Drag and Drop Events Programming using JavaScript Web Storage Overview Local Storage Session Storage Browser Compatibility CSS Working with CSS Introduction to CSS Understanding Document Object Model Introduction to style sheets CSS Syntax CSS Comments
- 4. The CSS Rules Ways to work with CSS External style sheet Internal style sheet Inline style CSS Selectors The element Selector The id Selector The class Selector Grouping Selectors The CSS Cascade Background Color Background Image Background Image – Repeat Horizontally or Vertically Background Image – Set position and no-repeat CSS Fonts & Typography CSS Font Families Font Style Font Size Text Color Text Alignment Text Decoration Text Transformation Working With Links and List Styling Links Common Link Styles List Item Markers Image as the List Item Marker Working with Table Table Borders Collapse Borders Table Width and Height Text Alignment Table Padding Table Color
- 5. CSS Color & Positioning Web colors Hex colors Color tools CSS Box Model Working with Content Working with Padding Working with Border Working with Margin CSS Display and Positioning CSS Display and Visibility How Elements Float Turning off Float – Using Clear Static Positioning Fixed Positioning Relative Positioning Absolute Positioning CSS3 Working with CSS3 Introduction to CSS3 Selectors Box Model CSS3 Borders Working with border-radius Working with box-shadow Working with border-image CSS3 Backgrounds Background-size Background-origin CSS3 Gradients Linear Gradients Radial Gradients
- 6. CSS3 Text Effects Text-shadow Word-wrap CSS3 Web Fonts Creating custom fonts Font Descriptors CSS3 2D Transforms Working with translate Working with rotate Working with scale Working with skew Working with matrix CSS3 3D Transforms Working with rotateX Working with rotateY CSS3 Transitions and Animations Working with Animations Working with Transitions JavaScript Variables Arrays Strings Loops If/else and equivalence Object Literals JSON Functions Scope and Hoisting JQuerry JQuery – Introduction JQuery Library First jQuery Example
- 7. Document Ready Function How to escape a special character JQuery - Selectors Basic Selectors Precise Selectors Combination of Selectors Hierarchy Selectors Selection Index Filters Visibility Filters Forms Selectors Forms Filters Find Dropdown Selected Item JQuery - Document Traversal Getting a specific DOM element JQuery - Event Events Helpers Attach Event Detaching Events Events Triggering Live Events JQuery – Effects JQuery - HTML Manipulation JQuery – UI Working with UI frame work Live examples Bootstrap 3 Working with Bootstrap 3 Introduction to Bootstrap 3 Bootstrap History Why Bootstrap? Embedding Bootstrap into page
- 8. Bootstrap Grid System Importance of Grid System Grid Classes Bootstrap Stacked/Horizontal Bootstrap Grid Small Bootstrap Grid Medium Bootstrap Grid Large Bootstrap Grid Examples Bootstrap Text/Typography Working with Text Working with Contextual Colors and Backgrounds Bootstrap Images Rounded Corners Circle Thumbnail Bootstrap Jumbotron Inside Container Outside Container Bootstrap Buttons Button Styles btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link Button Sizes btn-lg btn-md btn-sm btn-xs Active/Disabled Buttons BS Button Groups
- 9. Vertical Button Groups Nesting Button Groups & Drop Down Menus Bootstrap Glyphicons Glyphicon Syntax Badges Progress Bars Bootstrap Pagination Basic Pagination Active State Disabled State Pagination Sizing Bootstrap Pager Bootstrap List Groups Bootstrap Forms Bootstrap Inputs Bootstrap Carousel Bootstrap Plugins Overview Transition Plugin Collapsible Plugin Modal Dialog Plugin Dropdown Plugin Scrollspy Plugin Tab Plugin Tooltip Plugin Popover Plugin Alert Plugin Button Plugin Carousel Plugin Affix Plugin Angular JS Introduction to Angular
- 10. Angular Architecture Working with Angular Angular Version and Tools Angular Seed Controllers and Markup Introduction to AngularJS Controllers Controllers and Scope Creating Controllers Working with border-image Working With Colocations in AngularJS Displaying Repeating Information Demo with ng-repeat Working With Events in AngularJS Displaying Repeating Information Demo with ng-repeat Built-In Directives Working with built in directives Other Directives Working With Expressions in AngularJS Expressions Working With Expressions in Filters Understanding Filters Built-in Filters Two Way Binding In AngularJS Impotence of two-way binding Two Way Binding Demo Validation
- 11. Importance of validation Working example Creating and Using Services Introduction of services in AngularJS Understanding importance of Services Working with an Example UNIX System Features Multitasking, Multiuser, Easy Portability, Security, Communication. React with Flux and Redux o Setup boilerPlate SetUp Environment Auto Reloading Installation of NodeJs Setup package.json Editors to use Npm installation Packages Introduce npm Scripts Webpack Set up Use of Babel Use of Express Create Start Script Create Hello world Create Parallel Scripts o Structure Initial App App Layout Creation
- 12. Create First Components Adding Routing Styling React Component Adding Header Adding About Page o Redux Intro Why Redux Core Redux Principles Redux Vs Flux Flow of Redux App o 3 Principle of Redux Actions Store Reducers Immutability Concept Handling Immutability o Adding Redux in React React-redux Introduction mapStateToProps mapDispatchToProps Container vs. Presentational Components o Flow in Redux Create Simple Add Contact Form Binding in ES6
- 13. Actions Reducers Root Reducer Store Instantiate Store and Provider Connect Container o Redux with Async What is a Mock API Library Options in redux Connecting Api using Thunk Setup Mock Api Add Thunk to Store Create Load Courses Thunk Naming Conventions Load Courses in Reducer Dispatch Action on Page Load Create Course List Component Create Manage Course Page Create Manage Course Form Create Form Input Components Use Manage Course Form Create Author Actions Create Author Reducer Map Author Data for Dropdown
- 14. Create Form Change Handler Create Save Course Thunk Handle Creates and Updates in Reducer Dispatch Create and Update Redirect via React Router Context Populate Form via mapStateToProps Update State via componentWillReceiveProps o Error Handling in React AJAX Status Actions Setup Reducer with Ajax Create Preloader Component AJAX in Thunks Use Promises Use Promises to Wait for Thunks Create Form Submission Loading Indicator Display Save Notification Error Handling o Testing React and Redux Setup Testing Frameworks Test Utils use in testing React Testing Connected React Components mapStateToProps Testing Action Creators Testing Reducers Testing
- 15. Thunks Testing Store Testing in React