Course Curriculum
UI – COURSE CONTENT
(HTML,CSS, JAVASCRIPT, JQUERY,BOOTSTRAP)
Session-1
UI Technologies Course Content
• Introduction of UI Technologies
•UI Developer roles and Responsibilities
•Technologies around HTML
Basics of HTML & CSS
•Document Object Model (DOM)
• Structure of HTML Page
•Mandatory tags in the HTML page (HTML, head, body)
•What is CSS
•Different ways of applying CSS for elements, and priority chain of CSS
•Heading tags(H1…H6), Tags and attributes(Class, Id, style..etc)
• Inline and block-level elements
HTML Tags
• Including external page links in a page using anchor tags and its properties
•Working with row and column data using table tags
•Hiding and unhiding elements using display property
• image tag, p tag, ul and ol tags, li, nobr, hr, br etc
• Layouts, forms, buttons
• Input fields ( text box, radio button, checkbox, dropdown, text area etc)
HTML5
• List of Browsers support HTML5
•Media tags (audio and video tags)
•Graphics using Canvas tag
•Drag and Drop features
•Working on locations lat and long using Geolocation
• Storing user preferences using LocalStorage.
Form Elements
CONTACT : 9160040789/9182622217 Mail to:info@careerit.co.in
•Get & Post
•Validating input values in a form
• Form action and type
Session-2
CSS properties
•Adding borders, font, pseudo classes
• Positioning elements (absolute, relative, fixed and static)
• Image spriting
• Box model (margins, padding)
• Floating elements (float left, right etc.)
• Including external resources
• Absolute and Relative Paths
• Including external resources like CSS, images etc
CSS 3
• Difference between CSS2 and CSS3
• Adding borders and backgrounds
• Advanced text effects(shadow)
• 2D and 3D Transformations
• Adding Transitions to elements
• Adding animations to text and elements
• Responsive Designs
• Difference between multiple devices, making a page to work on multiple devices
• Media queries
Session-3
Bootstrap
• What is Bootstrap Framework
• Advantages of Bootstrap Framework
• What is Responsive web page
• What is Mobile-First Strategy
• Setting up Environment
• How to apply Bootstrap to Applications
Bootstrap Grid
• What is Bootstrap Grid & How to apply Bootstrap Grid
• What is Container
• What is Offset Column
• How to change class properties
• How to use Typography
• What is Bootstrap Tables
• What is Bootstrap Form Layout
• How to hide or show the text in Bootstrap
Bootstrap Components
• Why Bootstrap Components & Advantages
• What are the different types of Bootstrap Components
• How to use Glyphicons Component
• What is Bootstrap Dropdown Menu Component
• How to use Button Groups and Button Toolbar
• What are different Input Groups Components
• What is Navigation Pills & Tabs Components
• How to build a Responsive Navbar
• How to Add Forms and other controls to Navbar
• What is Jumbotron / Page Header Components
• How to Create Progress Bar
• What is Media Objects Component
• What is Bootstrap List Group Component
• What is Bootstrap Panel Component
Session-4
JavaScript
• Introduction
• Data types and data structures in Js
• Control structures, if, if-else, while, for, switch case statements
• Dynamic creation and manipulation of DOM elements using JS
• Adding dynamic event listeners to DOM elements
• Event capturing and event bubbling
• Validations using key char codes
• JavaScript Supported Data structures
• Arrays & Objects
• Predefined methods in arrays
• Strings and predefined methods
Session-5: Advanced JavaScript
• Adding methods for an object
• Module Introduction
• Understanding “let” and “const”
• Arrow Functions
• Exports and Imports
• Understanding Classes
• Classes, Properties and Methods
• The Spread & Rest Operator
• Destructuring
• Reference and Primitive Types Refresher
• Refreshing Array Functions
• Wrap Up
• Next-Gen JavaScript – Summary
• JS Array Functions
jQuery (Optional)
• Onload and onready difference
• jQuery selectors
• Multiple ways of referring DOM elements using jQuery selectors
• jQuery methods
• Adding dynamic properties for DOM elements
• Toggling elements
• Creating dynamic elements using jQuery
• Finding elements using jQuery techniques
• Filtering elements
Events using jQuery
• Binding events
• Dynamic binding
• List of events been supported in jQuery(blur, change, click, dbclick….etc
REACT JS
Session-6
Getting Started
• Introduction
• What is React?
• Real-World SPAs & React Web Apps
• Writing our First React Code
• Why Should we Choose React?
• React Alternatives
• Understanding Single Page Applications and Multi PageApplications
• Course Outline
• How to get the Most out of This Course
• Useful Resources & Links
Session-7
Understanding the Base Features & Syntax
• Module Introduction
• The Build Workflow
• Using Create React App
• Understanding the Folder Structure
• Understanding Component Basics
• Understanding JSX
• JSX Restrictions
• Creating a Functional Component
• Components & JSX Cheat Sheet
• Working with Components & Re-Using Them
• Outputting Dynamic Content
• Working with Props
• Understanding the Children Property
• Understanding & Using State
• Props & State
• Handling Events with Methods
• To Which Events Can You Listen?
• Manipulating the State
• Using the useState() Hook for State Manipulation
• Stateless vs Stateful Components
• Passing Method References Between Components
• Adding Two Way Binding
• Adding Styling with Stylesheets
• Working with Inline Styles
• Assignment 1: Time to Practice – The Base Syntax
Session-8
Working with Lists and Conditionals
• Module Introduction
• Rendering Content Conditionally
• Handling Dynamic Content “The JavaScript Way”
• Outputting Lists (Intro)
• Outputting Lists
• Lists & State
• Updating State Immutably
• Lists & Keys
• Flexible Lists
• Wrap Up
• Assignment : Time to Practice – Lists & Conditionals
Styling React Components & Elements
• Module Introduction
• Outlining the Problem Set
• Setting Styles Dynamically
• Setting Class Names Dynamically
• Adding and Using Radium
• Using Radium for Media Queries
• MUST READ: Enabling CSS Modules
• Enabling & Using CSS Modules
• More on CSS Modules
• Adding Pseudo Selectors
• Working with Media Queries
Debugging React Apps
• Module Introduction
• Understanding Error Messages
• Finding Logical Errors by using Dev Tools & Source-maps
• Working with the React Developer Tools
• Using Error Boundaries (React 16+)
Session-9
Diving Deeper into Components & React Internals
• Module Introduction
• A Better Project Structure
• Splitting an App Into Components
• Comparing Stateless and Stateful Components
• Class-based vs Functional Components
• Class Component Lifecycle Overview
• Component Creation Lifecycle in Action
• Component Update Lifecycle (for props Changes)
• Component Update Lifecycle (for state Changes)
• Using useEffect() in Functional Components
• Controlling the useEffect() Behaviour
• Cleaning up with Lifecycle Hooks & useEffect() • Cleanup Work with useEffect() – Ex
• Using shouldComponentUpdate for Optimisation
• Optimising Functional Components with React.memo()
• When should you optimise?
• PureComponents instead of shouldComponentUpdate
• How React Updates the DOM
• Rendering Adjacent JSX Elements
• Windows Users Must Read
• Using React.Fragment
• Higher Order Components (HOC) – Introduction
• Another Form of HOCs
• Passing Unknown Props
• Setting State Correctly
• Using PropTypes
• Using Refs
• Refs with React Hooks
• Understanding Prop Chain Problems
• Using the Context API
• ContextType & useContext()
• Wrap Up
• Useful Resources & Links
Session-10
Reaching out to the Web (Http / Ajax)
• Module Introduction
• Understanding Http Requests in React
• Understanding our Project and Introducing Axios
• Creating a Http Request to GET Data
• Rendering Fetched Data to the Screen
• Transforming Data
• Making a Post Selectable
• Fetching Data on Update (without Creating Infinite Loops)
• POSTing Data to the Server
• Sending a DELETE Request
• Fixing a Bug
• Handling Errors Locally
• Adding Interceptors to Execute Code Globally
• Removing Interceptors
• Setting a Default Global Configuration for Axios
• Creating and Using AxiosInstances
Session-11
Multi-Page-Feeling in a Single-Page-App: Routing
• Module Introduction
• Routing and SPAs
• Setting Up Links
• Setting Up the Router Package • react-router vs react-router-dom
• Preparing the Project For Routing
• Setting Up and Rendering Routes
• Rendering Components for Routes
• Switching Between Pages
• Using Links to Switch Pages
• Using Routing-Related Props
• The “withRouter” HOC & Route Props
• Absolute vs Relative Paths
• Absolute vs Relative Paths (Article)
• Styling the Active Route
• Passing Route Parameters
• Extracting Route Parameters
• Parsing Query Parameters & the Fragment
• Using Switch to Load a Single Route
• Navigating Programmatically
• Additional Information Regarding Active Links
• Understanding Nested Routes
• Creating Dynamic Nested Routes
• Redirecting Requests
• Conditional Redirects
• Using the History Prop to Redirect (Replace)
• Working with Guards
• Handling the 404 Case (Unknown Routes)
• Loading Routes Lazily
• Lazy Loading with React Suspense (16.6)
• Routing and Server Deployment
• Assignment : Time to Practice – Routing
Session-12: Forms and Form Validation
• Module Introduction
• Analysing the App
• Creating a Custom Dynamic Input Component
• Setting Up a JS Config for the Form
• Dynamically Create Inputs based on JS Config
• Adding a Dropdown Component
• Handling User Input
• Handling Form Submission
• Adding Custom Form Validation
• Fixing a Common Validation Gotcha
• Adding Validation Feedback
• Improving Visual Feedback
• Showing Error Messages
• Handling Overall Form Validity
• Working on an Error
• Fixing a Bug
Session-13 : Redux
Session-14: Redux Advanced
Session-15: Testing
Session-16: Bonus: Building the Burger Builder Project
Angular JS
Session-17: AngularJS Introduction
Session-18: Dependency Injection
Session-19: Single Page Applications
Angular
Session-20 : Getting Started
Session-21: The Basics
Session-22: Components & Data-binding Deep Dive
Session-23: Directives Deep Dive
Session-24: Using Services & Dependency Injection
Session-25: Changing Pages with Routing
Session-26: Understanding Observables
Session-27: Handling Forms in Angular Apps
Session-28 : Reactive: Setup
Session-29: Using Pipes to Transform Output
Session-30: Making Http Requests
Session-31: Authentication & Route Protection in Angular Apps
Session-32: Using Angular Modules & Optimising Apps
Session-33: Deploying an Angular App
Session-34: A Basic Introduction to Unit Testing in Angular Apps
Session-35: Custom Project & Workflow Setup
