Front End Development
HTML Overview
Getting Started
Structure
Color
Working with Text
Working with Links
Working with Images
Working with Multimedia
Creating Lists
Using Tables
Developing Frames
Employing Forms
Positioning Page Elements
HTML for E-Mail
CSS(Cascading Style Sheet) Overview
Benefits of CSS
CSS Versions History
CSS Syntax
External Style Sheet using < link >
Multiple Style Sheets
Value Lengths and Percentages
CSS2-Selectors
ID Selectors
Class Selectors
Grouping Selectors
Universal Selector
Descendant / Child Selectors
Attribute Selectors
CSS - Pseudo Classes
CSS-Color Background Cursor
background-image
background-repeat
background-position
CSS Cursor
CSS-Text Fonts
color
background-color
text-decoration
text-align
vertical-align
text-indent
text-transform
white space
letter-spacing
word-spacing
line-height
font-family
font-size
font-style
font-variant
font-weight
CSS-Lists Tables
list-style-type
list-style-position
list-style-image
list-style
CSS Tables
border
width & height
text-align
vertical-align
padding
color
CSS-Box Model
Borders & Outline
Margin & Padding
Height and width
CSS Dimensions
CSS-Display Positioning
CSS Visibility
CSS Display
CSS Scrollbars
CSS Positioning
Static Positioning
Fixed Positioning
Relative Positioning
Absolute Positioning
CSS Layers with Z-Index
CSS Floats
The float Property
The clear Property
The clear fix Hack
JavaScript Overview
What is JavaScript?
Javascript History
How to Run JavaScript?
Tools You Need
A Simple JavaScript Program
Hello World! Example
JavaScript Variable
JavaScript Array Methods
JavaScript loops
Conditional Statement
JavaScript Function
JavaScript Cookies
Object Oriented JavaScript(OOJS)
JavaScript DOM(Document Object Model)
Bootstrap Overview
What is Bootstrap
CDN(Content Delivery Manager)
How to Use?
React Overview
What is React?
What's in a Name?
React Component Model
What React Is Not
What You Will Not Find in React
Motivation for Creating React
A React JavaScript Example
One-Way Data Flow
JSX
A JSX Example
The Virtual (Mock) DOM
Only Sub-components that Actually Change are Re-Rendered
React Libraries
ES6 in a Nutshell
What is ES6?
ES6 Features
Using ES6
Transpiling
Major Syntax Changes
let and const
Variable Scope
Shadowing Variables
Arrow Functions
Arrow Functions As Parameters
Using 'this' Within Arrow Functions
Template Literals
Spread Operator
ES6 Classes
Declaring Classes
Declaring Instance Methods
Accessor Methods
Static Methods
Inheritance With Classes
Basic Components and JSX
What is JSX?
JSX Transpilation to React Code Example
Running the Transpiled Code
Babel
The Babel Runtime JavaScript Library
Script Import Skeleton Code
Playing Around in CodePen
React Components
Ways to Create UI Components
Creating a Functional Component Example
Component Names Must Be Capitalized
Creating a React Class-Based Component in ES5
The render Method
Creating a UI Component Using ES6 Class Notation
Using ES6 Classes with React
Which UI Component Creation Syntax Should I Use?
Components vs Elements
Elements Are Immutable
Properties
Property Naming Convention
Properties Default to 'True'
Spread Attributes (an ES6 Feature)
Expressions
Fragments
React Functional Component Concepts
Functional Components
Nesting JSX Elements
Example of JSX Nesting
Comments in JSX Code
Setting CSS Styles Using Classes
Setting CSS Styles Directly
JSX Escapes Values
Working with Lists of Items
Keys in Lists
Example List With Key
Container vs. Presentational Components
State
Types of State Data
State Hierarchy
Lifting State Up
Props vs. State
Pass Down a Function
Immutability
Immutability – Why?
Virtual DOM and State
Setting state
Updating Input fields
Passing Props to Components
Passing Functions to Components
Event Handling
Event Handler Example
Event Binding - DOs
Event Binding – Don'ts
Passing Parameters to Event Handlers
Component Life-cycle
Life-cycle in Functional Components
App Development Workflow – 1/3
App Development Workflow – 2/3
App Development Workflow – 3/3
React Components with ES6 Classes
Classes in ES6
Functional Components
Extending React.Component
The render() Method
state
props
defaultProps
propTypes
Component Lifecycle
Component Life-cycle: Overview
Component Life-cycle – Render Phase
Component Life cycle – Commit Phase
Component Life-cycle – Unmounting
constructor() example
componentDidMount() example
setState( newStateValue )
React Router
Routing and Navigation
react-router
Creating a react-router based project
A Basic Routed Component
Router vs. BrowserRouter
The Route component
<Switch>
Redirect Route
Navigating with <Link>
Navigating with <NavLink>
Route Parameters
Retrieving Route Parameters
QueryString Parameters
Using Router with Redux
State Management for React
React State Basics – Props and State
Props
State in Class Based Components
Managing State with Hooks in Functional Components
The Problem with Props and State
Redux State Library
Redux Advantages
Redux Disadvantages
Basic Rules for State Management
Types of State
Data State
Communication State
Control State
Session State
Location State
Location State Side Effects
Using React Hooks
Functional Component Shortcomings
Hooks Overview
Hook Rules
React Linter Example
Functional Component Props
The useState Hook
Functional Component using the useState hook
useState with Multiple Variables
useState can also be used with Objects
The useEffect Hook
useEffect Hook Example
Using useEffect Hook to Load Data
Restricting when useEffect is Called
The useContext Hook
Additional Hooks
The useReducer Hook
An Example Reducer Function
Calling and Using useReducer
The useMemo Hook
useMemo Example
The useCallback Hook
useCallback Example
The useRef Hook
Using useRef to Hold Values
The useImperativeHandle Hook
useImperativeHandle Hook Example
The useLayoutEffect Hook
Summary
