Unwired Learning

Complete Frontend Development with

React & JavaScript
(Learning Path Curriculum)

Doubt in mind?​
WhatsApp us at +917014963730​
​
(Check Page 26 For Certificate information)

💻 Get your membership and start learning today at:​

https://unwiredlearning.com/membership
 2

Level - 1​
HTML5 & CSS3 Masterclass: Build Responsive Website 🔗
Course Introduction
●​ Introduction & Curriculum Walkthrough
●​ Welcome - Let's Get Started!

Resources & Setup

●​ Resources [Important]
●​ How Web Works? [Optional]
●​ Environment Setup

HTML Fundamentals
●​ HTML Introduction
●​ Head Section
●​ Common HTML Tags
●​ Media Tags
●​ Linking Page
●​ Forms I
●​ Forms II
●​ Comments
●​ List
●​ Tables
●​ Inline and Block
●​ Id & Classes

HTML Semantics
●​ Semantics I
●​ Semantics II
●​ HTML Entity

CSS Fundamentals 1.0

●​ Introduction to CSS
●​ CSS Types and Order

www.unwiredlearning.com​
 3

●​ Selectors
●​ Selector Game I
●​ Selector Game II
●​ Specificity
●​ Common Properties
CSS Fundamentals 2.0
●​ Box Model
●​ Box Sizing
●​ Box Model Values
●​ Unit Values

CSS Fundamentals 3.0 (Display & Positions)

●​ Display
●​ Display vs Visibility
●​ Position
●​ Z Index
●​ Pseudo Elements & Pseudo Classes

CSS Fundamentals 4.0 (Responsive Web Design)

●​ Responsiveness: Media Query
●​ Viewport Units: Height & Width

Project 1 - Profile Card 🎉

●​ Project Source Code - GitHub
●​ Transform
●​ Position
●​ Google Font
●​ Button Design
●​ Margin Auto vs Text Align Center
●​ Box Shadow
●​ Icons
●​ Color Suggestion
●​ CSS Sequence: Advice

Project 2 - Login Page 🎉

●​ Project Source Code - GitHub

www.unwiredlearning.com​
 4

●​ Background Gradient
●​ Input Fields
●​ Forgot Password
●​ Login Button
●​ Min Max Width
Layout 1 - Flexbox
●​ Flexbox Introduction
●​ Parent Properties
●​ Child Properties
●​ Flexbox Tool
●​ Flexbox Game

Project 3 - Spotify Clone Using Flexbox 🎉

●​ Project Source Code - GitHub
●​ Flexbox Project
●​ Header I
●​ Header II - Logo
●​ Main I
●​ Main II
●​ Background Image
●​ Footer I
●​ Footer II
●​ Footer III
●​ Footer IV
●​ Responsive Design: Main
●​ Responsive Design: Header
●​ Responsive Design: Footer
●​ Variables I
●​ Variables II

CSS Advanced 1.0

●​ Backgrounds
●​ Background Clip
●​ Background Shorthand
●​ Transform
●​ CSS Art: Border and Border Radius

www.unwiredlearning.com​
 5

●​ CSS Art: Border Radius

●​ CSS Art: Designing Shapes

CSS Advanced 2.0 (SVG - Scalable Vector Graphics)

●​ SVG: Fundamentals
●​ SVG: Design & Tools
CSS Advanced 3.0 (Transition & Animation)
●​ Transition
●​ Animations I
●​ Animations II

Layout 2 - CSS Grid

●​ CSS Grid Introduction
●​ Row and Columns
●​ Common Properties
●​ Shorthand Property
●​ Grid Template Area
●​ Nested Grid
●​ Align Properties
●​ CSS Grid Game
●​ Autofit vs Autofill

Browser Compatibility
●​ Browser Compatibility - Vendor Prefix Code

Project 4 - Testimonial Page Using CSS Grid 🎉

●​ Project Source Code - GitHub
●​ CSS Grid Project
●​ Feedback Card
●​ Utility CSS
●​ Mobile Responsive

SASS - CSS Preprocessor

●​ SCSS/SASS Introduction
●​ Concepts - Variables, Nesting
●​ Concepts - Partials, Modules

www.unwiredlearning.com​
 6

●​ Concepts - Extend/Inheritance
●​ Concepts - Mixins and Operators

Project 5 - Portfolio Website Using Bootstrap 🎉

●​ Project Source Code - GitHub
●​ Bootstrap Introduction - Project Demo
●​ Utilities
●​ Layouts - Container, Grid
●​ Components
●​ Portfolio Project: Main Section
●​ Portfolio Project: About/Blog Section
●​ Portfolio Project: Contact Section
●​ Portfolio Project: Footer
●​ Portfolio Project: Project Section
●​ Project Completion

Project 6 - EdTech Startup Landing Page 🎉

●​ Project Source Code - GitHub
●​ EdTech Landing Page
●​ Initial Project Setup
●​ Navigation
●​ Banner Section I
●​ Banner Section II
●​ Transition, Transform, Animation
●​ Building Theme
●​ Stats Section I
●​ Stats Section II (Flexbox)
●​ Information Section
●​ Working Section (CSS Grid)
●​ Footer (SVG)
●​ Animate CSS (CSS Library)
●​ Scroll Bars
●​ Responsiveness I - Media Queries
●​ Responsiveness II - Media Queries
●​ Hamburger Menu I
●​ Hamburger Menu II

www.unwiredlearning.com​
 7

Deployment - Your Website On Web

●​ Project Deployment Using Netlify

Course Completion Certificate 🎓

●​ HTML5 & CSS3 Masterclass: Web Development Foundation 🏆

www.unwiredlearning.com​
 8

Level - 2
JavaScript Masterclass: Basics To Advanced With 10 Projects 🔗
Introduction & Resources
●​ Course Introduction
●​ Welcome - Let's Get Started!
●​ Resources [Important]
●​ Resources [Important]

JavaScript Basics
●​ JavaScript Basics
●​ Environment Setup
●​ How To Run JavaScript Files?
●​ Browser Console
●​ Variables, Constants & Comments
●​ Naming Convention
●​ Data Types
●​ Strings
●​ String Methods
●​ Numbers
●​ Template Literals
●​ Arrays
●​ Null & Undefined
●​ Booleans & Comparisons
●​ Loose vs Strict Comparison
●​ Type Conversion

Control Flow
●​ Control Flow
●​ For Loop
●​ For Loop (in & of)
●​ While Loop
●​ Do While Loop
●​ If Statements
●​ Else & Else If

www.unwiredlearning.com​
 9

●​ Logical Operators
●​ Logical NOT
●​ Break & Continue
●​ Switch Statements
●​ Scope (Global & Local)
●​ Ternary Operator

Functions
●​ Functions - I
●​ Functions - II
●​ Arguments & Parameters
●​ Returning Values
●​ Arrow Functions
●​ Functions & Methods
●​ forEach Method & Callbacks
●​ forEach Method

Object Literals
●​ Object Literals - I
●​ Object Literals - II
●​ Methods
●​ 'this' Keyword
●​ Objects in Arrays
●​ Math Object
●​ Primitive vs Reference Types - I
●​ Primitive vs Reference Types - II

Document Object Model

●​ DOM Introduction
●​ DOM In-depth
●​ Query Selector
●​ Selectors
●​ Controlling Content (Add/Delete)
●​ Attributes (Get/Set)
●​ Changing CSS Styles
●​ Classes (Add/Remove)

www.unwiredlearning.com​
 10

●​ Relationships (Parent/Child/Siblings)
●​ Events - I
●​ Events - II
●​ Creating & Removing Elements
●​ Event Bubbling & Delegation
●​ More DOM Events
Form & Form Events
●​ Events Inside Forms
●​ Submit Events
●​ Regular Expressions
●​ Testing RegEx Patterns
●​ Basic Form Validation
●​ Keyboard Events
●​ Events on HTML Page

Project: Quiz Application 🎉

●​ Project Source Code - GitHub
●​ Project Demo
●​ Template Structure [Optional]
●​ Working With Answer
●​ Score Update
●​ Reload
●​ Final Demo
●​ Project Deployment Using Github & Netlify

Array Methods
●​ Filter Method
●​ Map Method
●​ Reduce Method
●​ Find Method
●​ Sort Method
●​ Reverse Method
●​ Chaining Methods

Project: Todo List Manager 🎉

●​ Project Source Code - GitHub

www.unwiredlearning.com​
 11

●​ Project Demo
●​ Template Structure [Optional]
●​ Add Task
●​ Delete Task
●​ Update Task Count
●​ Search Task I
●​ Search Task II: Case Sensitive
●​ Project Deployment Using Github & Netlify

Dates & Times

●​ Dates
●​ Times

Local Storage
●​ Local Storage
●​ JSON

Project: Budget Tracker 🎉

●​ Project Source Code - GitHub
●​ Project Demo
●​ Template Structure [Optional]
●​ Add Transaction
●​ Transactions on localStorage
●​ Income & Expense List
●​ Get Transactions
●​ Delete Transaction
●​ Update Statistics
●​ Empty Transactions
●​ Project Deployment Using Github & Netlify

Object-Oriented Programming
●​ Object-Oriented Programming - I
●​ Object-Oriented Programming - II
●​ Object Literals Again!
●​ Classes
●​ Methods

www.unwiredlearning.com​
 12

●​ Inheritance - I
●​ Inheritance - II
●​ Prototype Model
●​ Prototype Inheritance
●​ Built-in Methods
●​ Static Keyword
●​ Getter & Setter
Error Handling & Exceptions
●​ Error Handling
●​ Exceptions

Modules
●​ Module - I
●​ Module - II

Project: Kanban Application 🎉

●​ Project Source Code - GitHub
●​ Project Demo
●​ Template Structure [Optional]
●​ Kanban Flow
●​ Class & Function
●​ Get Task
●​ Insert Task
●​ Delete Task
●​ Update Task
●​ Task Card
●​ Task Count
●​ Form: Add Task
●​ Form: Edit Task
●​ Form: Delete Task
●​ Drag-Drop Task Card
●​ Project Deployment Using Github & Netlify

Asynchronous JavaScript
●​ Asynchronous JavaScript
●​ setTimeout

www.unwiredlearning.com​
 13

●​ setInterval
●​ Callbacks & Callback Hell
●​ Promises
●​ Promises All
●​ Async & Await
●​ API / JSON Data
●​ Fetch API
●​ Fetch API - Methods
Project: News Portal 🎉
●​ Project Source Code - GitHub
●​ Project Demo
●​ Template Structure [Optional]
●​ Working With News API
●​ Fetch News Data
●​ News Categories
●​ Backup Data
●​ Category Request
●​ Project Deployment Using Github & Netlify

Babel
●​ Installing Node.js
●​ Babel Introduction
●​ Babel CLI
●​ Babel
●​ Folder Structure

Webpack
●​ Webpack
●​ Loaders
●​ Mode
●​ Webpack Dev Server
●​ Webpack Boilerplate Code

Firebase
●​ Firebase Introduction
●​ Webpack Setup

www.unwiredlearning.com​
 14

●​ Firebase Setup
●​ Firebase Connection
●​ Fetching Documents - I
●​ Fetching Documents - II
●​ Adding & Deleting Documents
●​ Snapshots
●​ Firestore Queries
●​ Ordering Data
●​ Updating Documents
●​ Fetching Individual Document
●​ Authentication - I
●​ Authentication - II

Project: Bookmark Manager 🎉

●​ Project Source Code - GitHub
●​ Project Demo
●​ Template Structure [Optional]
●​ Firebase Setup
●​ Access Document
●​ Delete Document
●​ Filter Documents
●​ Project Deployment Using Github & Netlify

Project: notNotion 🎉
●​ Project Source Code - GitHub
●​ Project Demo
●​ Template Structure [Optional]
●​ Navbar, Modals & Accordions
●​ Swipe Library - I
●​ Swipe Library - II
●​ Merge All Projects
●​ Project Deployment Using Github & Netlify

Course Completion Certificate 🎓

●​ JavaScript Masterclass: Zero To Job Ready With 10 Projects 🏆

www.unwiredlearning.com​
 15

Level - 3
React JS Masterclass: Basics To Advanced With 10 Projects 🔗

Introduction & Resources

●​ Course Introduction
●​ Welcome To Course
●​ Resources [Important]
●​ Resources [Important]

React Basics & Setup

●​ React Introduction
●​ Environment Setup
●​ Create React App / Set React App
●​ React Behind The Scene
●​ React Boilerplate
●​ Components: Class & Function Based
●​ JSX: In-depth Introduction
●​ Practice: Basic Template Structure

States and useState

●​ Why We Need States?
●​ State Introduction: useState
●​ useState: Multiple Updates
●​ useState: Array State Value
●​ useState: Array setState Value
●​ Conditional Templates
●​ Quick Hook Advice

Components & Props

●​ Multiple Components & Fragments
●​ Props: In-depth Introduction
●​ Props: Children
●​ Prop Drilling

www.unwiredlearning.com​
 16

Styling React Application

●​ Global Level Styling
●​ Component Level Styling
●​ Inline Level Styling
●​ Dynamic Level Styling
●​ Module Level Styling

User Input, Events & useRef

●​ Forms & Input
●​ onChange Event
●​ Controlled Inputs
●​ onSubmit Event
●​ Add New Task
●​ useRef Hook

useEffects, useCallback and Custom Hooks

●​ JSON Server
●​ useEffect Hook
●​ React StrictMode
●​ List Output
●​ onClick Event
●​ useCallback Hook
●​ Custom Hook (useFetch)
●​ Loading State
●​ Handling Errors (try/catch)
●​ Aborting Fetch Request
●​ Infinite Loops

Project: TaskMate 🎉
●​ Project Source Code - GitHub
●​ TaskMate Demo
●​ Project Structure
●​ Components
●​ State: tasklist & setTasklist
●​ Function: Edit & Delete

www.unwiredlearning.com​
 17

●​ Warning: Undefined Value

●​ Update Button
●​ Local Storage: Store All Tasks
●​ Theme: Change Background
●​ Project Deployment

React Router
●​ React Router Introduction
●​ React Router Setup
●​ Project Structure
●​ Navigation
●​ Route Parameters
●​ No Route Found
●​ Nested Routes
●​ Project Restructuring

Tailwind CSS Crash Course

●​ Introduction & Demo
●​ Common Properties
●​ Hover, Focus, and Other States
●​ Responsive Design
●​ Dark Mode
●​ Custom Configuration
●​ Project Demo
●​ Header & Hero Section
●​ Footer
●​ Responsive Screen & Component Tools

Movie API Project: Cinemate 🎉

●​ Project Source Code - GitHub
●​ Cinemate Demo
●​ Project Setup
●​ Tailwind Introduction
●​ TMDB API: Documentation
●​ UI Design (Tailwind & Flowbite)
●​ Navigation Structure

www.unwiredlearning.com​
 18

●​ Dark Mode Integration

●​ Movie List Structure
●​ API Fetch: Movie List
●​ Custom Hook: useFetch
●​ API Fetch: Movie Search
●​ Tailwind CSS Customization
●​ Page Not Found
●​ Individual Movie Information
●​ Scroll Restoration: Scroll To Top
●​ Dynamic Page Title
●​ Style Update
●​ Project Deployment
●​ Development Branch On Git & GitHub
●​ Solved: Netlify Error

Assignment: Shopping Cart 🎉

●​ Assignment Statement & Demo
●​ Solution: Project Setup
●​ Solution: Components
●​ Solution: Pages
●​ Assignment Deployment

Context & Reducers Project: Shopping Cart 🎉

●​ Global State Management
●​ Project Structure
●​ Context
●​ Reducer
●​ Methods
●​ Project Deployment

Redux Project: Shopping Cart 🎉

●​ Redux Introduction
●​ Project Structure
●​ Slice & Action
●​ Reducers: Add & Remove
●​ Redux Store State

www.unwiredlearning.com​
 19

●​ Project Deployment

E-Commerce Project: Codebook 🎉

●​ Project Source Code - GitHub
●​ Codebook Demo
●​ Installations
●​ Project Structure
●​ Header Component - I
●​ Header Component - II
●​ Home Page
●​ Products Page
●​ API: Product List
●​ Rating Component
●​ Individual Product Component
●​ Dark Mode
●​ ScrollToTop Component
●​ Product Search
●​ Dynamic Title
●​ Filter: Context & Reducers
●​ Filter: Initial Product List
●​ Filter: Properties
●​ Clear Filter
●​ Dropdown Option
●​ User Account & Cart
●​ Login & Registration Page
●​ React-Toastify
●​ API: Login/Register End Point
●​ Session Storage
●​ Toggle Dropdown (Hide)
●​ Cart Interface
●​ Cart: Context & Reducers
●​ Cart: Provider
●​ Add To Cart
●​ Condition Check: Already In Cart
●​ Out Of Stock Products
●​ Protected Routes
●​ Checkout Modal

www.unwiredlearning.com​
 20

●​ Undefined Value Warning

●​ Order Submit Function
●​ Order Page
●​ Dashboard: Condition 1
●​ Dashboard: Condition 2
●​ Auth Service: API End Points
●​ Data Service: API End Points
●​ Product Service: API EndPoints
●​ Page Not Found
●​ Dynamic Page Title
●​ Error Handling
●​ ENV
●​ Frontend Deployment
●​ Backend Deployment
●​ Update Environment Variables
●​ Login As Guest
●​ Solved: Netlify Errors

Assignment: Word Counter 🎉

●​ Statement & Demo
●​ Solution: WordCount

React Testing Library & Jest

●​ Testing Introduction
●​ React Testing Library & Jest
●​ Project Setup
●​ Testing Structure
●​ Test: Component Rendering
●​ Test: Fire Events & User Events
●​ Queries, Type, Expect & More
●​ Test: API Async Loading
●​ Test: Page Component Wrapper

Firebase Crash Course

●​ Firebase Introduction
●​ Webpack Setup

www.unwiredlearning.com​
 21

●​ Firebase Setup
●​ Firebase Connection
●​ Fetching Documents - I
●​ Fetching Documents - II
●​ Adding & Deleting Documents
●​ Snapshots
●​ Firestore Queries
●​ Ordering Data
●​ Updating Documents
●​ Fetching Individual Document
●​ Authentication - I
●​ Authentication - II

Blog Project: WriteNode 🎉

●​ Project Source Code - GitHub
●​ WriteNode Demo
●​ Project Structure
●​ Project Styling
●​ Homepage
●​ Firebase Setup
●​ Firebase Configuration
●​ Conditional Auth Header
●​ Create Blog Post
●​ Error: Object Fetch
●​ Toggle Update
●​ Dynamic Page Title
●​ React Loading Skeleton
●​ Project Deployment

Course Completion Certificate 🎓

●​ React JS Masterclass: Zero To Job Ready With 10 Projects 🏆

www.unwiredlearning.com​
 22

Level - 4
Git & GitHub Masterclass: From Basics to Advanced 🔗
Course Introduction
●​ Course Introduction
●​ Welcome - Let's Get Started!
●​ Resources [Important]

Git Introduction
●​ Git Introduction and Version Control System
●​ Installation & Setup
●​ Configuration

Commands & Lifecycle

●​ Basic Commands & Lifecycle
●​ Push Changes On GitHub
●​ Practice: Common Commands
●​ Git Lifecycle In-depth
●​ Commit Timeline

Other: Diff, Stash & Restore

●​ Git Diff
●​ Git Stash
●​ Git Restore

Git Branches
●​ Introduction to Git Branches
●​ Feature Branch
●​ Pull Changes & Merge Branch
●​ Git Pull Command

Merge Conflicts
●​ Introduction: Merge Conflict
●​ Solving: Merge Conflict

www.unwiredlearning.com​
 23

●​ Delete Merged & Unmerged Branches

●​ Push Changes to GitHub
●​ Pull Changes from GitHub
●​ Always Pull Before You Push

Rebase
●​ Git Rebase Introduction
●​ Rebase Merge Conflict
●​ Difference Between Merge & Rebase

Git Files
●​ Git Ignore
●​ Git README

Other: Squash, Revert & Reset

●​ Git Squash
●​ Git Revert
●​ Git Reset

Tag, Releases & Commits

●​ Git Tag & GitHub Releases
●​ Git Checkout Tag/Commit/HEAD

Git Clone
●​ Git Clone: Any Repository
●​ Git Clone: Own Repository

Open Source Contribution

●​ Open Source Contribution
●​ Pull Changes
●​ Merge Conflict on Pull Request
●​ Structured Pull Request

Assignment: Create Pull Request 🎉

●​ Create Pull Request

www.unwiredlearning.com​
 24

Workflows
●​ Git & GitHub Workflow

[Optional] Super Charge GitHub 🎉

●​ Demo: Project & Profile README
●​ Profile README
●​ Project README

Course Completion Certificate 🎓

●​ Git & GitHub Masterclass: From Basics to Advanced 🏆
​

www.unwiredlearning.com​
 25

Level - 5
Job Search & Resume Building: Preparation For Freshers 🔗
​
Course Introduction
●​ Course Introduction
●​ Access Resources

Profile Building
●​ Section Introduction
●​ Github Profile README
●​ Github Project README
●​ LinkedIn
●​ Blog
●​ Twitter
●​ Freelancing

Resume Building
●​ Resume Basics
●​ Resume Content
●​ Resume: Building First Version
●​ Resume Examples
●​ Resume Templates
●​ Resume Checklist

Searching Internship
●​ Internship Search - 1
●​ Internship Search - 2
●​ Internship Search - 3
●​ Internship Search - 4

Random Questions
●​ Section Introduction
●​ Should You Join Unpaid Internship?
●​ Building Experience As A Beginner?

www.unwiredlearning.com​
 26

Certificate Information

1. The complete roadmap is divided into 5 different levels according to concepts and
projects.

2. Each level is independent,​

Level 1 - HTML5 & CSS3 Masterclass: Build Responsive Websites 🏆
Level 2 - JavaScript Masterclass: Basics To Advanced With 10 Projects🏆
Level 3 - React JS Masterclass: Basics To Advanced With 10 Projects 🏆
Level 4 - Git & GitHub Masterclass: From Basics to Advanced 🏆​
Level 5 - Job Search & Resume Building: Preparation For Freshers 🏆
​
Here ‘trophy emoji ’ represents a certificate.

3. You will get access to certificates instantly after completing the course lectures.

4. For more information about topics, projects and course flow, check the individual
course page.

www.unwiredlearning.com​