Download Tools
Download Node JS & Text Editor
Install VS Code Extensions
Download Source Code
FlexBox Basics
Section Intro
Create Folder Structure
What is Flexbox
Try Flexbox Practically
Flex Wrap
Flex Direction
Flex Align Horizontal
Flex Align Vertical
Sass/Scss Basics
What is SASS ?
Setup SASS Environment
Compile SCSS to Pure CSS
SCSS/SASS Variables
SASS vs SCSS
SCSS Partials
Access SCSS Variables in Partials
SCSS Nested Rules
BEM Methodology
SCSS Extends
SCSS Mixins
SCSS If Else Statements
SCSS Loops
React Basics
Section Intro
What is React
Create React App
React Folder Structure
What is JSX
Enable Emmet in JSX
React State
Update React State
Loop Array in JSX
Conditional Statements in JSX
CSS in React
React Props
Project Setting
Section Intro
Create React App
Install Sass Package
Create Script for SCSS
Choose Google Font
CSS rem Unit
Reset Padding and Margin
React Routing
Section Intro
Install React Router Dom
Exact Path Match
Not Found Page
Header Section
Section Intro
Add Background Video
Style Background Video
Create Mixin for Positions
Video Poster Attribute
Create Awesome Shape For Header Section
Add Contents in the Header Section
Style Header Contents
Pass Data as Props into Header Component
Style Button
Animate Heading
Animate Sub Heading
Add Logo
Add Space Between Heading, Sub Heading & Button
Context API & Create Modal
Section Intro
Create Modal
SCSS @forward Rule
What is Context API
Create Context Object
Create Global State or Store
Access Global State or Store
Open Modal
Close Modal
Animate Modal
Move Global State & Functions to a Separate Component
Implement Reducer Function
Call Reducer Function with Dispatch
Move Reducer Function into a Separate File
Create Types
Create Register Form
Style Register Form
Style Register Button
Create Login Form
Open a Specific Modal
Open Login Form
Bind Register Form Fields
Bind Login Form Fields
Create Navigation
Section Intro
Create Transparent Layer
Create Navigation
Style Navigation Links
Create Nav Context & Provider
Access Data from NavProvider in Nav Component
Create Toggle Component
Style Toggle Menu
Open & Close Toggle Navigation
Create Close Icon
HTML Meta Data
Generate Favicon
Destinations
Section Intro
Create Row and Columns
Destination Heading
Style Destination Heading
Destinations Data
Destinations Context
Access Destinations Data from Store
Loop Destinations Data
Style Images
Add Space Between Images
Optimize Images Loading Process
Show Country Name on Card
Create Info Card
Style Explore Link
Create Details Page
Access Destination Id
Destination Details
Details Header
More Details about Destination
More Details about Destination Part 2
Cities Data
Access Cities in Details Page
Create Skewed Background
Loop Cities Array
Package Status
Show Name & Package Duration
Style Price
Show Package Facilities
Buy Now Button
Create Folder For City Components
Divide Cities Component in Sub Components
Display Images in High Resolution
Scroll To Top
Services
Section Intro
Create Skewed Background
Services Heading
Style Services Heading & Paragraph
Services Data
Create React Context for Services Data
Access Services Data from Context API store
Loop Services Array
Styles Services
Show Services Details
Add Animations to Details
Align Services Contents Vertically
Reviews
Section Intro
Setup Reviews Data
Access Reviews Array from Context API Store
Loop Reviews Array
Style Review Component
Rating Function
Load Lazy Images
Images Gallery/LightBox
Section Intro
Setup Gallery Data and Images
Create React Context for Gallery
Create Gallery Component and Loop Gallery Array
Style Gallery Component
Create Lightbox
Show Dynamic Images in Lightbox
Animate Lightbox
Refactor Code
Footer
Section Intro
Create Footer Component
Footer Background Image
Show Logo & Intro in Footer
Footer Links
Loop Footer Links
Handle External Links
Style Footer Links
Create Bootom Footer
Create Pages
Section Intro
Create Page Container
Style Page Container
About Page Image
Contact Page
Scroll Pages to Top
Bind Contact Form Input Fields
Style Not Found Page
Go Back to Home
Scroll Animations
Section Intro
Create Animations Context & Provider
Scroll Event Listener
Add Animation Class
Style Animation Class
Animate Destination Cards
Animate Reviews Block
Animate Gallery & Footer
Animate Details Page
Create Animation Class for Heading
Animate About & Contact Page
Media Queries
Section Intro
What are Media Queries
Max & Min Length in Media Queries
Media Queries in SASS/SCSS
Convert Pixel to Percentage in HTML Selector
REM, EM & Pixel Based Media Queries
Explain EM Unit
Create Breakpoint Variables
Create a Mixin For Media Queries
Let's use Responsive Mixin
Make Container Responsive
Make Grid System Responsive
Make Header Responsive
Make Logo and Toggle Icon Responsive
Make Navigation Responsive
Make Modal Responsive
Make Destinations Heading Responsive
Make Services Section Responsive
Make LightBox Responsive
Make Footer Responsive
Make Headings Responsive
Make Contact and About Page Responsive
Modify Destinations Overlay Cards
Deployment
Upload Source to Github
Access Source Code From GitHub in Netlify