React, Context & Sass Build a Real World Responsive Website

Learn React.js, Context API, Flexbox and SASS/SCSS, Create Multi Pages Responsive Website

3.85 (49 reviews)
Udemy
platform
English
language
Web Development
category
instructor
387
students
16.5 hours
content
Jul 2021
last update
$54.99
regular price

What you will learn

Learn React JS library from beginners level

Context API from beginners level

CSS Flexbox from beginners level

Sass or Scss from beginners to advanced

React Routing

Vanilla JavaScript scroll animations

Accordion with pure React js

Image lazy loading with React js

SEO optimized React pages with Helmet

Description

Welcome to React.js, Context API & SCSS course, in this comprehensive course you will learn React.js library, Context API, Flexbox, and Sass/Scss from absolute beginner level, after taking this course you will be compatible with React, Context API, and Sass, before this course no React.js and Sass knowledge is required. In this course first, we will learn CSS Flexbox which is the most widely used CSS layout, don't worry if you don't know CSS Flexbox because I will explain to you Flexbox from scratch.  Second, you will learn Sass or Scss which is a preprocessor language, SCSS will supercharge your skills because it's very flexible we can use variables, functions, loops, inheritance, and lots more features with the help of SCSS. Finally, you learn the React.js library which is the most popular library in the market nowadays, React.js is the front-end library for building user interfaces and it's created by Facebook a well known social network, many large companies are using React.js library such as Facebook itself, Udemy, Medium, PayPal, Payoneer, etc.

Now let me summarize that what you will learn in this course.

  1. CSS Flexbox from beginners level

  2. SASS or SASS from beginners level

  3. React.js library from beginners level

  4. Context API from beginners level

  5. React Routing

  6. React Image Lazy Loading

  7. JavaScript Scroll Animations

  8. Gallery Lightbox with React.js

  9. Deployment to Netlify

Content

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

Screenshots

React, Context & Sass Build a Real World Responsive Website - Screenshot_01React, Context & Sass Build a Real World Responsive Website - Screenshot_02React, Context & Sass Build a Real World Responsive Website - Screenshot_03React, Context & Sass Build a Real World Responsive Website - Screenshot_04

Reviews

Man
November 5, 2022
Please speak English with a better much and have to caption English because you speak English is very bad
Laurent
February 28, 2022
Very pleasant course to follow along, everything seems so naturally fluid, because instructor explanations are crystal clear.
Or
October 8, 2021
Learned A LOT. Very Very Good Course. Explaining very clear and enjoyable. Great JOB . Waiting for your next Courses!!!

Charts

Price

React, Context & Sass Build a Real World Responsive Website - Price chart

Rating

React, Context & Sass Build a Real World Responsive Website - Ratings chart

Enrollment distribution

React, Context & Sass Build a Real World Responsive Website - Distribution chart

Related Topics

3615770
udemy ID
11/5/2020
course created date
7/21/2021
course indexed date
Bot
course submited by