React, Context & Sass Build a Real World Responsive Website

Course Curriculum

Chapter 1: Download Tools

Lecture 1: Download Node JS & Text Editor

Lecture 2: Install VS Code Extensions

Lecture 3: Download Source Code

Chapter 2: FlexBox Basics

Lecture 1: Section Intro

Lecture 2: Create Folder Structure

Lecture 3: What is Flexbox

Lecture 4: Try Flexbox Practically

Lecture 5: Flex Wrap

Lecture 6: Flex Direction

Lecture 7: Flex Align Horizontal

Lecture 8: Flex Align Vertical

Chapter 3: Sass/Scss Basics

Lecture 1: What is SASS ?

Lecture 2: Setup SASS Environment

Lecture 3: Compile SCSS to Pure CSS

Lecture 4: SCSS/SASS Variables

Lecture 5: SASS vs SCSS

Lecture 6: SCSS Partials

Lecture 7: Access SCSS Variables in Partials

Lecture 8: SCSS Nested Rules

Lecture 9: BEM Methodology

Lecture 10: SCSS Extends

Lecture 11: SCSS Mixins

Lecture 12: SCSS If Else Statements

Lecture 13: SCSS Loops

Chapter 4: React Basics

Lecture 1: Section Intro

Lecture 2: What is React

Lecture 3: Create React App

Lecture 4: React Folder Structure

Lecture 5: What is JSX

Lecture 6: Enable Emmet in JSX

Lecture 7: React State

Lecture 8: Update React State

Lecture 9: Loop Array in JSX

Lecture 10: Conditional Statements in JSX

Lecture 11: CSS in React

Lecture 12: React Props

Chapter 5: Project Setting

Lecture 1: Section Intro

Lecture 2: Create React App

Lecture 3: Install Sass Package

Lecture 4: Create Script for SCSS

Lecture 5: Choose Google Font

Lecture 6: CSS rem Unit

Lecture 7: Reset Padding and Margin

Chapter 6: React Routing

Lecture 1: Section Intro

Lecture 2: Install React Router Dom

Lecture 3: Exact Path Match

Lecture 4: Not Found Page

Chapter 7: Header Section

Lecture 1: Section Intro

Lecture 2: Add Background Video

Lecture 3: Style Background Video

Lecture 4: Create Mixin for Positions

Lecture 5: Video Poster Attribute

Lecture 6: Create Awesome Shape For Header Section

Lecture 7: Add Contents in the Header Section

Lecture 8: Style Header Contents

Lecture 9: Pass Data as Props into Header Component

Lecture 10: Style Button

Lecture 11: Animate Heading

Lecture 12: Animate Sub Heading

Lecture 13: Add Logo

Lecture 14: Add Space Between Heading, Sub Heading & Button

Chapter 8: Context API & Create Modal

Lecture 1: Section Intro

Lecture 2: Create Modal

Lecture 3: SCSS @forward Rule

Lecture 4: What is Context API

Lecture 5: Create Context Object

Lecture 6: Create Global State or Store

Lecture 7: Access Global State or Store

Lecture 8: Open Modal

Lecture 9: Close Modal

Lecture 10: Animate Modal

Lecture 11: Move Global State & Functions to a Separate Component

Lecture 12: Implement Reducer Function

Lecture 13: Call Reducer Function with Dispatch

Lecture 14: Move Reducer Function into a Separate File

Lecture 15: Create Types

Lecture 16: Create Register Form

Lecture 17: Style Register Form

Lecture 18: Style Register Button

Lecture 19: Create Login Form

Lecture 20: Open a Specific Modal

Lecture 21: Open Login Form

Lecture 22: Bind Register Form Fields

Lecture 23: Bind Login Form Fields

Chapter 9: Create Navigation

Lecture 1: Section Intro

Lecture 2: Create Transparent Layer

Lecture 3: Create Navigation

Lecture 4: Style Navigation Links

Lecture 5: Create Nav Context & Provider

Lecture 6: Access Data from NavProvider in Nav Component

Lecture 7: Create Toggle Component