Scribd
Upload
10 views8 pages

Front End Development

The document provides a comprehensive overview of front-end development, covering key topics such as HTML, CSS, JavaScript, Bootstrap, and React. It includes detailed sections on various aspects of each technology, including syntax, components, state management, and hooks in React. The document serves as a guide for developers looking to understand and implement front-end technologies effectively.

Uploaded by

Akshit Goel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views8 pages

Front End Development

The document provides a comprehensive overview of front-end development, covering key topics such as HTML, CSS, JavaScript, Bootstrap, and React. It includes detailed sections on various aspects of each technology, including syntax, components, state management, and hooks in React. The document serves as a guide for developers looking to understand and implement front-end technologies effectively.

Uploaded by

Akshit Goel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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

You might also like