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
