React is a frontend library which helps in building a rich user interface.
Nodejs uses a speed optimized V8 engine to address bulk requests that are handled through callback functions to ensure quality and quantity.
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
emo: 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
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
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
Working with Canvas
Coordinates
Path and Curves
Drawing Lines, Rectangles and Circles
Text and Font
Color Gradations
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
Working with CSS
Introduction to CSS
Understanding Document Object Model
Introduction to style sheets
CSS Syntax
CSS Comments
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
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
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
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 rotate
Working with rotate
CSS3 Transitions and Animations
Working with Animations
Working with Transitions
jQuery–Introduction
jQuery Library
First jQuery Example
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 Drop down 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 framework
Live examples
Working with Bootstrap4
Introduction to Bootstrap 4
Bootstrap History
Why Bootstrap?
Embedding Bootstrap into page
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
BS Button Groups
Vertical Button Groups
Nesting Button Groups & Drop-Down Menus
Bootstrap Glyph icons
Glyph icon 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
Understanding Tools
Introduction to Photoshop
User centered design. Interaction with digital design.
Colors and design.
Design elements.
Icon creations.
Concept of Presentation to client.
UI design process.
Questioning Visualizing Client Requirement.
Getting Online with Adobe
Portfolio and Behance.
Portfolio Development.
Psychology and Human Factors.
UI Design Process.
Resources
Get to know MongoDB
CRUD Operations
Data Modelling
Administration
Scalability and Availability
Indexing and Aggregation Framework
MongoDB Security
6.3 MVC
Getting Started
Introduction
What is React?
Real-World SPAs & React Web Apps
Adding the Right React Version to Codepen
Writing our First React Code
Why Should we Choose React?
React Alternatives
Understanding Single Page Applications and Multi Page Applications
Refreshing Next Generation JavaScript (Optional)
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
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
Functional (Stateless) vs class (Stateful) Components
Passing Method References Between Components
Adding Two Way Binding
Adding Styling with Stylesheets
Working with Inline Styles
Time to Practice – The Base Syntax
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
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
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 & Sourcemaps
Working with the React Developer Tools
Using Error Boundaries
Diving Deeper into Components & React Internals
Module Introduction
A Better Project Structure
Splitting an App Into Components
Comparing Stateless and Stateful Components
Understanding the Component Lifecycle
Converting Stateless to Stateful Components
Component Creation Lifecycle in Action
componentWillUnmount()
Component Updating Lifecycle Hooks
Component Updating Lifecycle in Action
Updating Lifecycle Hooks (Triggered by State Changes)
Performance Gains with PureComponents
How React Updates the App & Component Tree
Understanding React’s DOM Updating Strategy
Returning Adjacent Elements (React 16+)
React 16.2 Feature: Fragments
Understanding Higher Order Components (HOCs)
Windows Users Must Read – File Downloads
A Different Approach to HOCs
Passing Unknown Props
Using setState Correctly
Validating Props
Available PropTypes
Using References (“ref”)
More on the Ref API (React 16.3)
The Context API (React 16.3)
Updated Lifecycle Hooks (React 16.3)
A Real App: The Burger Builder (Basic Version)
Module Introduction
Planning an App in React – Core Steps
Planning our App – Layout and Component Tree
Planning the State
Setting up the Project
Creating a Layout Component
Starting Implementation of The Burger Builder Container
Adding a Dynamic Ingredient Component
Adding Prop Type Validation
Starting the Burger Component
Outputting Burger Ingredients Dynamically
Calculating the Ingredient Sum Dynamically
Adding the Build Control Component
Outputting Multiple Build Controls
Connecting State to Build Controls
Removing Ingredients Safely
Displaying and Updating the Burger Price
Adding the Order Button
Creating the Order Summary Modal
Showing & Hiding the Modal (with Animation!)
Implementing the Backdrop Component
Adding a Custom Button Component
Implementing the Button Component
Adding the Price to the Order Summary
Adding a Toolbar
Using a Logo in our Application
Adding Reusable Navigation Items
Creating a Responsive Sidedrawer
Working on Responsive Adjustments
More about Responsive Adjustments
Reusing the Backdrop
Adding a Sidedrawer Toggle Button
Adding a Hamburger Icon
Improving the App – Introduction
Prop Type Validation
Improving Performance
Using Component Lifecycle Methods
Changing the Folder Structure
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 Axios Instances
Burger Builder Project: Accessing a Server
Module Introduction
Firebase & The Right Database
Creating the Firebase Project
Creating the Axios Instance
Sending a POST Request
Displaying a Spinner while Sending a Request
Handling Errors
Retrieving Data from the Backend
Removing Old Interceptors
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
Routing and Server Deployment
Time to Practice – Routing
Adding Routing to our Burger Project
Module Introduction
Building the Checkout Container
Setting Up Routing & Routes
Navigating to the Checkout Page
Navigating Back & To Next Page
Passing Ingredients via Query Params
Navigating to the Contact Data Component
Order Submission & Passing Data Between Pages
Adding an Orders Page
Implementing Navigation Links
Fetching Orders
Outputting the Orders
Forms and Form Validation
Module Introduction
Analyzing 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
Redux
Module Introduction
Understanding State
The Complexity of Managing State
Understanding the Redux Flow
Setting Up Reducer and Store
Dispatching Actions
Adding Subscriptions
Connecting React to Redux
Connecting the Store to React
Dispatching Actions from within the Component
Time to Practice – Dispatching Actions
Passing and Retrieving Data with Action
Switch-Case in the Reducer
Updating State Immutably
Updating Arrays Immutably
Immutable Update Patterns
Outsourcing Action Types
Combining Multiple Reducers
Understanding State Types
Time to Practice – Redux Basics
Combining Local UI State and Redux
Adding Redux to our Project
Module Introduction
Installing Redux and React Redux
Basic Redux Setup
Finishing the Reducer for Ingredients
Connecting the Burger Builder Container to our Store
Working on the Total Price Calculation
Redux & UI State
Adjusting Checkout and Contact Data
Redux Advanced
Module Introduction
Adding Middleware
Using the Redux Devtools
Executing Asynchronous Code – Introduction
Introducing Action Creators
Action Creators & Async Code
Handling Asynchronous Code
Restructuring Actions
Where to Put Data Transforming Logic?
Using Action Creators and Get State
Using Utility Functions
A Leaner Switch Case Statement
An Alternative Folder Structure
Diving Much Deeper
Redux Advanced: Burger Project
Module Introduction
Installing the Redux Devtools
Preparing the Folder Structure
Creating Action Creators
Executing Asynchronous Code
Fetching Ingredients Asynchronously
Initializing Ingredients in the BurgerBuilder
Changing the Order of our Ingredients Manually
Adding Order Actions
Connecting Contact Data Container & Actions
The Order Reducer
Working on Order Actions
Redirect to Improve UX
Combining Reducers
Handling Purchases & Updating the UI
Resetting the Price after Purchases
Fetching Orders (via Redux)
Checking our Implemented Functionalities
Refactoring Reducers
Refactoring Reducers Continued
Adding Authentication to our Burger Project
Module Introduction
Understanding Authentication in Single Page Applications
Required App Adjustments
Adding an Auth Form
Adding Actions
Getting a Token from the Backend
Adding Sign-In
Storing the Token
Adding a Spinner
Logging Users Out
Accessing Protected Resources
Updating the UI Depending on Auth State
Adding a Logout Link
Forwarding Unauthenticated Users
Redirecting the User to the Checkout Page
Persistent Auth State with localStorage
Fixing Connect + Routing Errors
Ensuring App Security
Guarding Routes
Displaying User Specific Orders
Improving our Burger Project
Module Introduction
Fixing the Redirect to the Frontpage
Using updateObject in the Entire App
Sharing the Validation Method
Using Environment Variables
Removing console.log()s
Adding Lazy Loading
Testing
Module Introduction
What is Testing?
Required Testing Tools
What To Test?
Writing our First Test
Testing Components Continued
Jest and Enzyme Documentations
Testing Components Correctly
Testing Containers
How to Test Redux
Deploying the App to the Web
Module Introduction
Deployment Steps
Building the Project
Deploying on Firebase
Bonus: Working with Webpack
Module Introduction
Important: Use Webpack 3
Introducing Webpack
How Webpack works
Basic Workflow Requirements
Project & npm Setup
Creating a Basic Folder & File Structure
Creating the Basic React Application
Installing Production Dependencies
Setting Up the Basic Webpack Config
Adding File Rules
Introducing Babel
Adding CSS File Support
Creating Rules for Images
Lazy Loading
Injecting the Script into the index.html File
Creating the Production Workflow
Bonus: Next.js
Module Introduction
Understanding Server Side Rendering
Setting Up a Project
Understanding the Basics
Next.js & Components & Pages
Styling our App in Next.js
Handling (404) Errors
A Special Lifecyle Hook
Deploying our App
Bonus: Animations in React Apps
Module Introduction
Preparing the Demo Project
Using CSS Transitions
Using CSS Animations
CSS Transition & Animations Limitations
Using ReactTransitionGroup
Using the Transition Component
Wrapping the Transition Component
Animation Timings
Transition Events
The CSSTransition Component
Customizing CSS Classnames
Animating Lists
Alternative Animation Packages
Bonus: A Brief Introduction to Redux Saga
Module Introduction
Installing Redux Saga
Creating our First Saga
Hooking the Saga Up (to the Store and Actions)
Moving Logic from the Action Creator to a Saga
Moving More Logic Into Sagas
Handling Authentication with a Saga
Handling Auto-Sign-In with a Saga
Moving the BurgerBuilder Side Effects into a Saga
Moving the Orders Side Effects into Sagas
Why Sagas can be Helpful
Diving Deeper into Sagas
Bonus: Building the Burger CSS
Building the Burger CSS Code
Next Steps and Course Roundup
Module Introduction
React Rocks! Where to find more Examples
More Inspiration: Real-World Projects Built with React
Static React Apps with Gatsby.js
Introducing React Native
Component Libraries (Example: Material UI)
Smaller Apps with Preact
Comparing React with Preact
Node Js Course Content: