PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY. From learning the Basics of Web Development to Mastering React!
Zero to Full Stack Hero
101h 29m 59s
English
Paid
Zero to Full Stack Hero is a 63-lesson 101 hours 29 minutes self-paced course by PAPA React (Sonny Sangha). PAPA React presents.
Course facts
- Lessons
- 63
- Duration
- 101 hours 29 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- PAPA React (Sonny Sangha)
- Price
- Premium
REACT BASICS 101
Its what you all have been asking for!
WEB DEV ESSENTIALS
If you're starting from absolute ZERO, we got you! We are going to cover HTML, CSS, Javascript and a tonne of extra's that will propel you into the world of web development!
CSS MASTERY
Flexbox, CSS Grid, Bootstrap, Material-UI + SO MUCH MORE to make your website a looker and the next big hit!
THE COMPLETE REACT GUIDE
EVERYTHING in React. We got you covered. Even TESTING!
REDUX FOR DUMMIES
If there is one skill you NEED to land the frontend job, it's REDUX.
SERVER SIDE RENDERING FOR NOOBS
SSR made simple!
THE FIREBASE GUIDE
Think of the power of the Sun... Yep Firebase is THAT powerful and I'm going to teach you how to not get burnt and succeed with it!
REACT NATIVE 101
Building iOS & Android apps?
We got you covered!
NODE.JS & EXPRESS
The ultimate backend bromance. We teach it all. EVEN STRIPE!
TYPESCRIPT FOR DUMMIES
Languages like Java, C#, Swift are all considered strongly-typed languages, now Javascript can be one too. Master the superset and drastically reduce the bugs in your app today!
THE GRAPHQL GUIDE
Mastering GraphQL will let you tap into you data like never before... oh, and it'll most likely result in a sweet pay rise!
THE MERN GUIDE
The Number 1 stack for a reason!
BONUS CONTENT!
My mission is to deliver an UNFAIR amount of value... YES you can expect more and more content for the foreseeable future!
Who teaches Zero to Full Stack Hero? PAPA React (Sonny Sangha)
PAPA React (papareact.com) is the paid course platform of Sonny Sangha, a UK developer behind the popular Sonny Sangha YouTube channel — known for long-form project-based clones of well-known applications using the modern React / Next.js stack with Firebase and the surrounding tooling.
The CourseFlix listing carries Zero to Full Stack Hero — a comprehensive full-stack curriculum covering the modern React / Next.js stack, Firebase as the back-end, the styling layer (Tailwind CSS), and the deployment workflow for shipping real applications.
Material is paid and aimed at developers learning the full-stack JavaScript ecosystem through complete project builds. For broader content, see CourseFlix's Full-Stack Web Development and Firebase category pages.
What lessons are included in Zero to Full Stack Hero?
0:00
/ #1: Introduction to React
All Course Lessons (63)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction to React Demo | 10:42 | |
| 2 | Component Based Design | 09:05 | |
| 3 | Create React App | 10:10 | |
| 4 | VS Code Extensions | 11:21 | |
| 5 | JSX Introduction | 11:04 | |
| 6 | BEM Naming Convention | 12:41 | |
| 7 | Class Based vs Functional Based Components | 09:35 | |
| 8 | Introduction to State | 17:22 | |
| 9 | Introduction to Props | 17:01 | |
| 10 | Styling Components | 15:32 | |
| 11 | Creating Our First Input Form | 13:45 | |
| 12 | Rules of Hooks | 18:22 | |
| 13 | The useEffect Hook | 22:20 | |
| 14 | Building Our First Custom Hook & How to use a useRef! | 21:43 | |
| 15 | Introduction to Web Dev Essentials | 05:59 | |
| 16 | Extensions you NEED to install right now! | 11:07 | |
| 17 | HTML Introduction and Document Layout | 14:14 | |
| 18 | Tags and Attributes | 11:33 | |
| 19 | Adding Links and Images | 16:39 | |
| 20 | Lists & Tables | 16:40 | |
| 21 | An Introduction to Divs | 06:59 | |
| 22 | Classes & ID's | 10:28 | |
| 23 | Span & Inline | 06:38 | |
| 24 | Introduction to Storybook - Image Optimization in Next.js | 02:33:37 | |
| 25 | Getting Started with Tailwind CSS - Tailwind JIT - Dark Mode with Local Storage | 03:15:48 | |
| 26 | Introduction to CSS and Using Dribble Design with Tailwind CSS by AVNEESH AGARWAL | 02:19:41 | |
| 27 | JavaScript: Difference between const, var and let - Loops: while and for | 19:51 | |
| 28 | JavaScript: Creating A Console Game (Thinking Outside The Box) by Ben Elferink | 16:04 | |
| 29 | JavaScript: Having Fun With Math to Animate | 42:15 | |
| 30 | JavaScript: JavaScript Interview Questions | 45:25 | |
| 31 | Props & State - Class and Functional Components | 04:25:15 | |
| 32 | React Hooks Fundamentals - React Hook Forms - CSS Modules | 04:10:14 | |
| 33 | Recoil Mastery - Atoms / Selectors - Recoil vs Redux - | 03:11:01 | |
| 34 | Built a Weather App - APIs - String Manipulation - useRef | 03:30:15 | |
| 35 | Google Sheets API + React - React-hook-form - Form Validation | 03:02:59 | |
| 36 | Intro to Framer Motion - JS Animations - Portfolio Ideas | 03:06:21 | |
| 37 | Using Charts in React (ApexCharts) - react-firebase-hooks | 03:03:11 | |
| 38 | Creating a React app with Webpack and Babel by LUKA RESETAR | 02:09:54 | |
| 39 | Tasty Recipes of React by SHRADDHA HINGE | 02:10:03 | |
| 40 | 2D Game named Breakout made in React: Implementing 3rd Party Library called Phaser | 01:19:25 | |
| 41 | Using State - Add & Edit State Items - Toggle Favourite (Boolean) and Render Filtered Lists | 01:05:57 | |
| 42 | Async functions (with a TRY/CATCH instead of a promise) - Fetching Data | 14:27 | |
| 43 | Responsive Navbar - Router, Switch, React-router-dom - NavLink - useState | 46:31 | |
| 44 | Video Bookmark App in React: useRef Hook - Spread Operator - Event Binding | 26:03 | |
| 45 | Introduction to useRef Hook in React - Document Selector in VanillaJS vs useRef by Asad Memon | 04:39 | |
| 46 | Building an E-Commerce Site with Redux - Basket Implementation - Actions | 02:59:40 | |
| 47 | Redux Basic Concepts - Building a TODO App with Redux Implementation by PEDRO GONCALVES | 02:20:45 | |
| 48 | Introduction to React Native & Expo - Testing Suggestions - React Native Lifecycle Focus | 03:35:27 | |
| 49 | Building a REST API with Express and MongoDB - Testing API with POSTMAN - Deploying | 02:49:54 | |
| 50 | Firebase Hosting 101 (Images & Videos) - Media Types - Progress Indicators | 03:01:39 | |
| 51 | Firebase Cloud Functions - Using Express on a Cloud Function - CORS | 02:56:04 | |
| 52 | Drag and Drop it like it's HOT! (dnd) - Typescript introduction - Portfolio 101 | 04:23:32 | |
| 53 | Typescript Introduction with Next.js - Building a Menu the right way with Headless UI - Tailwind CSS | 02:48:23 | |
| 54 | Building a Translation App with Firebase Extensions - Next.JS | 02:51:54 | |
| 55 | Handling Different Authentication methods in Next.js - NextAuth | 02:57:32 | |
| 56 | Stripe Session Checkout & Next.js backend - Nvm node version control | 03:57:36 | |
| 57 | Next.js SSR vs SSG In Practice - API's - useRouter - How to Deploy a Next.js App to Vercel | 03:01:35 | |
| 58 | Intro to GraphQL - Apollo Client & Server Setup - Next.JS - SSR with GQL - Queries | 03:27:59 | |
| 59 | Productivity & Life Hacks 101 - Time Management - Beginner to Entrepreneur Roadmap | 03:06:30 | |
| 60 | Databases 101 and Introduction to SQL by YAP QIANG | 01:48:27 | |
| 61 | Freelancing 101 by PRIYANSHU SARAF | 01:06:16 | |
| 62 | Learning Linear Data Structures in Node.js -On Learning, Tracking, | 04:30:07 | |
| 63 | In Depth into Git Command Line Interface - Diving in Linux Bash Commands by KEVIN BARTA | 01:46:43 |
Unlock unlimited learning
Get instant access to all 62 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionWhat courses are similar to Zero to Full Stack Hero?
-
Updated 2y agoThe Creative Javascript Course
By: Dev EdJavascript is the most popular programming language in the world! This course is ideal for anyone who wants to get started in front end development. Learn javas17h 46m -
Updated 2y agoThe Software Architect Mindset (COMPLETE)
By: ArjanCodes (Arjan Egges)The The Software Architect Mindset course teaches the fundamentals of software architecture and provides practical advice on creating software products that.12h 6m5/5 -
Updated 3y agoNestJS GraphQL - Schema-first approach
By: Learn NestJSGet up to speed with the GraphQL Schema-first approach with NestJS. Master GraphQL fundamentals and essentials concepts behind creating your own.1h 52m5/5 -
Updated 2y agoMERN eCommerce From Scratch
By: Udemy, Brad TraversyThere are a lot of "eCommerce" courses out there, but most use some kind of prebuilt plugin or platform. In this course, we will build a completely customized e14h 49m5/5 -
Updated 4mo agoBuild a Dynamic Data Table using JavaScript, CSS, and APIs
By: Zero To MasteryLearn to create interactive tables using JavaScript and APIs. Master asynchronous requests and design a responsive interface to enhance your skills.3h 7m -
Updated 2y agoSass - from beginner to real world
By: Kevin PowellSass has become an essential language to learn for front-end developers. It helps you write your code faster, pull off things that sometimes seem like magic, an8h 2m -
Updated 2y agoReal-time chat with Node.js, Socket.io and Vue.js
By: CodecourseHow easy is it to build a simple real-time chat? Very easy. Build your own in less than an hour. Real-time chat with Node.js, Socket.io and Vue.js26m
Frequently asked questions
What are the prerequisites for enrolling in this course?
The course is designed to take students from the basics of web development to advanced topics in React. While there are no formal prerequisites, familiarity with HTML, CSS, and JavaScript would be beneficial. Early lessons cover web development essentials, including HTML tags, attributes, and CSS styling, which can help beginners get started.
What projects will I build during the course?
Throughout the course, students will build several projects, including a weather app using APIs, a video bookmark app implementing useRef and event binding, an e-commerce site with Redux, and a 2D game using the Phaser library. These projects are designed to reinforce the concepts taught in the lessons and provide practical experience.
Who is the target audience for this course?
The course is suitable for beginners who want to learn web development from scratch, as well as for intermediate developers seeking to deepen their understanding of React and its ecosystem. It covers a wide range of topics from introductory HTML and CSS to advanced React Native and Next.js features.
How does this course compare to other web development courses?
This course stands out because it not only covers React and its ecosystem but also introduces students to a broader range of technologies, such as Next.js for server-side rendering, GraphQL with Apollo Client, and Firebase for backend services. This comprehensive approach equips students with a versatile skill set for full-stack development.
What specific tools and platforms will I learn to use?
Students will learn to use a variety of tools and platforms, including Create React App for bootstrapping React projects, VS Code with essential extensions, Tailwind CSS for styling, Firebase for hosting and cloud functions, and Next.js for building server-side rendered applications. These tools are crucial for modern web development.
What topics are not covered in this course?
While the course covers a wide range of topics in web development and React, it does not delve into backend frameworks like Node.js in detail, nor does it cover advanced database management or intricate server-side configurations beyond the basics of Firebase and MongoDB.
How much time will I need to dedicate to this course?
The course consists of 63 lessons. While the total runtime is not specified, students should expect to spend additional time on practice exercises and project work. A regular commitment of several hours a week is recommended to fully grasp the concepts and complete the projects effectively.