Lecture 2: React vs JavaScript . .[FREE CLASS]. - betterskill.io
Complete Modern Front-end Development Course Lecture 2: React vs JavaScript . .[FREE CLASS].
Complete Modern Front-end Development Course
0% Completed
Module 1: Welcome & Environment Setup
Lecture 1: Course Roadmap & Expectations . .[FREE CLASS]. .
Video - 6:09 mins
Lecture 2: What is frontend development . .[FREE CLASS].
Video - 00:08:41 mins
Lecture 3: Download and Install VS Code . .[FREE CLASS].
Video - 00:04:28 mins
Lecture 4: Setting Up Your Development Environment . .[FREE CLASS].
Video - 00:11:28 mins
Lecture 5: How to download from Github . .[FREE CLASS].
Video - 00:2:25 mins
Module 2: HTML5 Fundamentals
Lecture 1: Introduction HTML CSS JS . .[FREE CLASS].
Video - 9:12 mins
Lecture 2: Explore VSCode and what is HTML . .[FREE CLASS].
Video - 00:10:47 mins
Lecture 3: HTML Text: Headings, Creating paragraphs, Text formatting (b,i, strong, em) . .[FREE CLASS].
Video - 00:10:51 mins
Lecture 4: HTML List: list tags (ol, ul, li), line break, button and inline vs block
Video - 10:15 mins
Lecture 5: HTML Link: Creating Links with the Anchor Tag and Display Online Image, Local Image
Video - 00:09:52 mins
Lecture 6: HTML Form: Input Types, Buttons, Select, Option, Login Form
Video - 00:10:02 mins
Lecture 7: HTML Table Table, tr, th, td, caption, colspan, thead, tbody, tfoot
Video - 00:10:04 mins
Lecture 8: HTML Structure: Doctype, Html, Head, Meta, Title, Body
Video - 00:09:27 mins
Lecture 9: HTML5 vs HTML, Audio, Video, YouTube Video, Embed Iframe
Video - 00:11:00 mins
Module 3: CSS3 Fundamentals
Lecture 1: Introduction to CSS and CSS types (Inline, Internal, External) . .[FREE CLASS].
Video - 10:21 mins
Lecture 2: CSS Selectors (basic): Id, Class, Universal, Tags, Grouping, Attribute, Id vs Class
Video - 9:09 mins
Lecture 3: CSS Box Model Border, Font Size, Background Color, Text Color, Border-Radius, Margin, Padding
Video - 11:21 mins
Lecture 4: CSS External Setup, Display None, Hidden, Inline, Block, Inline-Block, Box-Shadow
Video - 5:41 mins
Lecture 5: CSS Background Color, Image, Repeat, Position, Size, Relative Image Path
Video - 4:59 mins
Lecture 6: CSS Basic Flex Properties
Video - 12:18 mins
Lecture 7: CSS Basic Grid Properties
Video - 7:34 mins
Lecture 8: CSS Position Static Relative Absolute Fixed Sticky
Video - 00:12:01 mins
Lecture 9: Start HTML CSS Portfolio Project Setup Image File and Introduction Font Awesome
Video - 00:08:29 mins
Lecture 10: Project Navbar Design and Added Font from Google Font
Video - 00:10:14 mins
Lecture 11: Project Banner Section Start, CSS Nested Class and Add Banner Image from Folder
Video - 00:12:23 mins
Lecture 12: Project Banner Section Completed properly and Introduce Media to Responsive the Website
Video - 00:11:53 mins
Lecture 13: Project Navbar, Banner responsive for Mobile Device and Start with About Section
Video - 00:15:50 mins
Lecture 14: Project About Section Completed and Start Skill Section
Video - 00:10:40 mins
Lecture 15: Project Skill Section Complete and Responsive Mobile Device
Video - 00:12:29 mins
Lecture 16: Project Footer Section Start and Design Input, Text Area
Video - 00:10:26 mins
Lecture 17: Finished Project Footer Section Complete and Share Idea How Practice New Design
Video - 8:47 mins
Module 4: Modern JavaScript Fundamentals (ES6+)
Lecture 1: Intro for JavaScript Module What We Learn this Module . .[FREE CLASS].
Video - 00:01:17 mins
Lecture 2: Introduction JavaScript Ecosystem and Understanding Variables var, let, const . .[FREE CLASS].
Video - 17:45 mins
Lecture 3: JavaScript String, Array, Object
Video - 15:24 mins
Lecture 4: JavaScript Funcation, Arrow Funcation and Template Literals
Video - 10:03 mins
Lecture 5: JavaScript Conditional Statements if, else if, else, Switch, Ternary Operator
Video - 9:29 mins
Lecture 6: JavaScript for loop, while loop, do while loop, for in loop, for of loop
Video - 9:42 mins
Lecture 7: JavaScript Array Method Map, Filter, Reduce, Sort
Video - 12:10 mins
Lecture 8: JavaScript Destructuring, Rest and Spread Operators
Video - 8:43 mins
Lecture 9: JavaScript Basic String and Array Problems
Video - 6:39 mins
Lecture 10: Introduce JavaScript Document Object ModelDOM
Video - 12:10 mins
Lecture 11: JavaScript Synchronous and Asynchronous Promise, async await Concept
Video - 9:34 mins
Module 5: HTML, CSS, JavaScript API Project
Lecture 1: JavaScript Project BETTER TUB setup and navbar all category fetch from API
Video - 12:19 mins
Lecture 2: JavaScript Project Navbar Design and Fetch All Video Info
Video - 10:56 mins
Lecture 3: JavaScript Project Manually Design a Card
Video - 00:11:17 mins
Lecture 4: JavaScript Project All Video Card Design and Show as a Grid Layout
Video - 00:12:52 mins
Lecture 5: JavaScript Project Start based on Category data
Video - 10:23 mins
Lecture 6: JavaScript Project Explain Again based on Category Data Show
Video - 00:09:24 mins
Lecture 7: JavaScript Project Responsive for Mobile Screen and Develop in Netlify
Video - 00:5:42 mins
Lecture 8: JavaScript Project Introduce Tailwind DaisyUI Navbar Components and Design Professional Navbar
Video - 12:45 mins
Module 6: React Basics – Components, Props & JSX
Lecture 1: Introduction to React.js . .[FREE CLASS].
Video - 00:16:8 mins
Lecture 2: React vs JavaScript . .[FREE CLASS].
Video - 00:16:16 mins
Lecture 3: Exploring the Official React Documentation
Video - 00:3:2 mins
Lecture 4: Setting up Development server Options
Video - 00:8:16 mins
Lecture 5: Installations & Project Setup
Video - 00:7:12 mins
Lecture 6: Introduction to React App Structure (my-react-app)
Video - 00:5:48 mins
Lecture 7: Creating a New Component (Part 1)
Video - 2:29 mins
Lecture 8: Creating a New Component (Part 2)
Video - 5:03 mins
Lecture 9: Creating a New Component (Part 3)
Video - 00:10:6 mins
Lecture 10: Understanding Component Structure (Part 1)
Video - 00:4:15 mins
Lecture 11: Understanding Component Structure (Part 2)
Video - 00:7:40 mins
Lecture 12: Working with Props (Part 1)
Video - 00:7:7 mins
Lecture 13: Working with Props (Part 2)
Video - 00:13:33 mins
Lecture 14: Conditional Rendering in React (Part 1)
Video - 00:6:53 mins
Lecture 15: Conditional Rendering in React (Part 2)
Video - 00:4:59 mins
Lecture 16: Rendering Lists and Arrays
Video - 00:4:50 mins
Lecture 17: Rendering Arrays of Objects (Part 1)
Video - 00:7:27 mins
Lecture 18: Rendering Arrays of Objects (Part 2)
Video - 00:10:20 mins
Module 7: React Fundamentals – Interactivity, State & Events
Lecture 1: Module Overview
Video - 1:05 mins
Lecture 2: Create React App Setup
Video - 6:11 mins
Lecture 3: Building Interactive Components (Part 1)
Video - 12:14 mins
Lecture 4: Building Interactive Components (Part 2)
Video - 00:6:48 mins
Lecture 5: Handling Events in React
Video - 00:8:49 mins
Lecture 6: What is State in React?
Video - 00:6:21 mins
Lecture 7: Creating Stateful Variables using useState
Video - 00:11:20 mins
Lecture 8: Understanding useState Mechanism
Video - 00:10:24 mins
Lecture 9: Updating State Based on Current State & React DevTools
Video - 00:8:4 mins
Lecture 10: Coding Challenge – Interactive Component (Part 1)
Video - 00:6:56 mins
Lecture 11: Coding Challenge – Interactive Component (Part 2)
Video - 00:5:56 mins
Build a Grocery Checklist App (Part 1)
Video - 00:2:59 mins
Build a Grocery Checklist App (Part 2)
Video - 00:29:9 mins
Build a Grocery Checklist App (Part 3)
Video - 00:26:19 mins
Module 8: Thinking in React – State Management & Lifting State
Lecture 1: Module Overview
Video - 00:9:25 mins
Lecture 2: Travel List
Video - 00:11:26 mins
Lecture 3: Building Layout of Travel List
Video - 9:51 mins
Lecture 4: Rending Items
Video - 00:11:22 mins
Lecture 5: Form and Events
Video - 00:11:31 mins
Lecture 6: Controlled Elements
Video - 00:16:11 mins
Lecture 7: Static Part Complete
Video - 2:57 mins
Lecture 8: State Management Intro
Video - 00:12:36 mins
Lecture 9: State management- New Piece of State
Video - 00:00:45 mins
Lecture 10: State management- Lifting up state
Video - 00:13:57 mins
Lecture 11: Delete Items
Video - 00:10:8 mins
Module 9: Styling React Apps with Tailwind CSS
Lecture 1: Introduction to Tailwind CSS
Video - 00:4:55 mins
Lecture 2: Tailwind Installation & Configuration
Video - 00:7:26 mins
Lecture 3: Applying Tailwind Utility Classes to HTML Elements
Video - 00:10:42 mins
Lecture 4: Creating TaskForm Component
Video - 00:2:3 mins
Lecture 5: Styling Components with Tailwind
Video - 00:13:21 mins
Lecture 7: Styling TaskList Component
Video - 9:14 mins
Module 10: Advanced Components, Portals & Refs
Lecture 1: Module overview
Video - 00:3:23 mins
Lecture 2: New React Project Using Vite
Video - 00:8:19 mins
Lecture 3: New Component and Style (Part 1)
Video - 00:8:29 mins
Lecture 4: New Component and Style (Part 2)
Video - 00:3:38 mins
Lecture 5: Reusable Components Add
Video - 00:12:21 mins
Lecture 6: Styling New Project Component
Video - 00:12:53 mins
Lecture 7: Splitting Components (Part 1)
Video - 00:6:6 mins
Lecture 8: Splitting Components (Part 2)
Video - 00:6:20 mins
Lecture 9: Switching between Components
Video - 00:11:7 mins
Lecture 10: UseRef and ForwardRef to capture input fields (Part 1)
Video - 00:10:52 mins
Lecture 11: UseRef and ForwardRef to capture input fields (Part 2)
Video - 00:13:35 mins
Lecture 12: Updating the UI
Video - 00:9:52 mins
Lecture 13: Create Portal and Error Modal (Part 1)
Video - 00:8:37 mins
Lecture 14: Create Portal and Error Modal (Part 2)
Video - 00:5:1 mins
Lecture 15: Create Portal and Error Modal (Part 3)
Video - 00:14:15 mins
Module 11: Component Architecture, Composition & Prop Management
Lecture 1: New Project Set up Book Browser
Video - 00:8:38 mins
Lecture 2: Splitting the Components
Video - 00:9:32 mins
Lecture 3: Splitting the Navbar Component
Video - 00:8:35 mins
Lecture 4: Splitting the Main Component
Video - 00:13:32 mins
Lecture 5: Splitting the Other Components
Reading
Lecture 6: Component Categories
Video - 00:4:41 mins
Lecture 7: Prop Drilling (Part 1)
Video - 00:2:43 mins
Lecture 8: Prop Drilling (Part 2)
Video - 00:6:6 mins
Lecture 9: Prop Drilling (Part 3)
Video - 00:7:23 mins
Lecture 10: Component Composition
Video - 00:8:34 mins
Lecture 11: Fixing Prop Drilling with Composition (Part 1)
Video - 00:4:5 mins
Lecture 12: Fixing Prop Drilling with Composition (Part 2)
Video - 00:11:9 mins
Lecture 13: Reusable Box With Composition
Video - 00:8:46 mins
Lecture 14: Element as Props Instead of Children
Video - 00:3:26 mins
Lecture 15: Creating New Rating Component
Video - 00:9:20 mins
Lecture 16: Creating Stars
Video - 00:6:30 mins
Lecture 17: Creating Stars (Part 2)
Video - 00:6:41 mins
Lecture 18: Hover Stars
Video - 00:11:36 mins
Module 12: Side Effects & Data Fetching with useEffect
Lecture 1: Module Overview and Component Lifecycle
Video - 00:04:13 mins
Lecture 2: Book Browser Project Setup
Video - 00:03:48 mins
Lecture 3: How to Not Fetch Data
Video - 00:13:04 mins
Lecture 4: Side Effect and useEffect Hook
Video - 00:06:37 mins
Lecture 5: useEffect Hook to Solve SideEffect
Video - 00:04:14 mins
Lecture 6: what is useEffect and Side Effect
Video - 00:07:44 mins
Lecture 7: Using async Function
Video - 00:04:21 mins
Lecture 8: Adding Loading State
Video - 00:05:08 mins
Lecture 9: How to Handle Errors
Video - 00:13:06 mins
Lecture 10: Synchronizing Books Data
Video - 00:14:05 mins
Lecture 11: Control Over Dependency Array
Video - 00:04:26 mins
Lecture 12: Select a Book (Part 1)
Video - 00:12:13 mins
Lecture 13: Select a Book (Part 2)
Video - 00:02:30 mins
Lecture 14: Loading Book Details (Part 1)
Video - 00:02:52 mins
Lecture 15: Loading Book Details (Part 2)
Video - 00:15:51 mins
Lecture 16: Loading Book Details (Part 3)
Video - 00:10:10 mins
Lecture 17: Adding Star Component
Video - 00:02:34 mins
Lecture 18: Add Books to the Read List (Part 1)
Video - 00:03:05 mins
Lecture 19: Add Books to the Read List (Part 2)
Video - 00:06:37 mins
Lecture 20: Add Books to the Read List (Part 3)
Video - 00:02:10 mins
Lecture 21: Add Books to the Read List (Part 4)
Video - 00:12:04 mins
Module 13: React with TypeScript
Lecture 1: Module Overview
Video - 00:02:11 mins
Lecture 2: How to Install Typescript
Video - 00:04:00 mins
Lecture 3: JavaScript vs Typescript
Video - 00:10:40 mins
Lecture 4: Exploring Base Types
Video - 00:04:32 mins
Lecture 5: Working with Arrays and Objects
Video - 8:25 mins
Lecture 6: Type Inference
Video - 00:04:10 mins
Lecture 7: Union types
Video - 00:04:03 mins
Lecture 8: Type Aliases
Video - 4:31 mins
Lecture 9: Function Types (Part1)
Video - 00:02:55 mins
Lecture 10: Function Types (Part 2)
Video - 1:44 mins
Lecture 11: Generics (Part 1)
Video - 00:06:19 mins
Lecture 12: Generics (Part 2)
Video - 00:04:36 mins
Lecture 13: Create React App with Typescript
Video - 3:41 mins
Lecture 14: Intro to React with Typescript
Video - 00:04:24 mins
Lecture 15: Project Setup
Video - 00:02:32 mins
Lecture 16: Working with Component & Typescript
Video - 00:04:33 mins
Lecture 17: Working with Props in Typescript (Part 1)
Video - 3:00 mins
Lecture 18: Working with Props in Typescript (Part 2)
Video - 00:04:29 mins
Lecture 19: Props as Generic Type (Part 1)
Video - 00:02:53 mins
Lecture 20: Props as Generic Type (Part 2)
Video - 2:19 mins
Lecture 21: Props as Generic Type (Part 3)
Video - 00:02:57 mins
Lecture 22: Creating a Data Model
Video - 00:13:36 mins
Lecture 23: Splitting Item Component
Video - 6:15 mins
Lecture 24: Form Submission in Typescript (Part 1)
Video - 00:02:42 mins
Lecture 25: Form Submission in Typescript (Part 2)
Video - 00:03:19 mins
Lecture 26: Ref and useRef in typescript
Video - 00:07:41 mins
Lecture 27: Working with Function Props
Video - 00:07:59 mins
Lecture 28: State Management in Typescript
Video - 00:06:47 mins
Lecture 29: Adding Styles to Components
Video - 00:05:54 mins
Module 14: Next.js Fundamentals
Lecture 1: Nextjs What is Next . .[FREE CLASS].
Video - 00:06:25 mins
Lecture 2: Nextjs Project Setup Structure . .[FREE CLASS].
Video - 00:09:36 mins
Lecture 3: Nextjs App Router
Video - 00:15:10 mins
Lecture 4: Nextjs Navigation
Video - 00:08:20 mins
Lecture 5: Nextjs Dynamic Route 1
Video - 00:10:35 mins
Lecture 6: Nextjs Dynamic Route 2
Video - 00:15:37 mins
Lecture 7: Nextjs Catch All Route
Video - 7:49 mins
Lecture 8: Nextjs Data Fetch 1
Video - 00:06:48 mins
Lecture 9: Nextjs Data Fetch 2
Video - 00:05:26 mins
Lecture 10: Nextjs Loading Error File
Video - 00:05:02 mins
Lecture 11: Nextjs Api Route 1
Video - 8:53 mins
Lecture 12: Nextjs Api Route 2
Video - 00:13:31 mins
Lecture 13: Nextjs Api Route 3
Video - 00:12:39 mins
Lecture 14: Nextjs Route Group
Video - 00:09:01 mins
Lecture 15: Nextjs Context Api 1
Video - 00:06:06 mins
Lecture 16: Nextjs Context Api 2
Video - 00:08:40 mins
Module 15: Blog Application Project
Lecture 1: Blog 1 Project Setup
Video - 00:09:32 mins
Lecture 2: Blog 2 Banner Header
Video - 00:21:00 mins
Lecture 3: Blog 3 Homepage
Video - 00:27:34 mins
Lecture 4: Blog 4 Blogpage
Video - 00:20:21 mins
Lecture 5: Blog 5 Blogdetails
Video - 00:16:12 mins
Lecture 6: Blog 6 Login Signup
Video - 00:13:20 mins
Lecture 7: Blog 7 Api Route Blogs
Video - 00:16:27 mins
Lecture 8: Blog 8 Custom Hook
Video - 00:11:38 mins
Lecture 9: Blog 9 Blogdetails Api
Video - 00:23:04 mins
Lecture 10: Blog 10 Login Route
Video - 00:20:07 mins
Lecture 11: Blog 11 Authcontext 1
Video - 00:13:04 mins
Lecture 12: Blog 12 authcontext 2 esv2 90p bg 10p
Video - 00:18:03 mins
Lecture 13: Blog 13 Register Route
Video - 00:27:55 mins
Lecture 14: Blog 14 Create Blog Route
Video - 00:28:27 mins
Lecture 15: Blog 15 Comment
Video - 00:14:46 mins
Lecture 16: Blog 16 Deployto Vercel
Video - 12:01 mins
Module 16: Redux Toolkit
Lecture 1: What Is Redux Toolkit
Video - 00:10:45 mins
Lecture 2: Setup Redux Toolkit
Video - 00:06:43 mins
Lecture 3: Counter App With Redux
Video - 00:18:12 mins
Lecture 4: Cart Manament With Redux Store Setup And Slice Create
Video - 00:06:28 mins
Lecture 5: Cart Management Reducer Functions
Video - 00:08:24 mins
Lecture 6: Cart Management Usedispatch Hook
Video - 00:06:58 mins
Lecture 7: Cart Management More Function In Slice
Video - 00:14:50 mins
Lecture 8: Cart Management Last Overview1
Video - 00:05:38 mins
Module 17: Project- Build a Full-Fledged E-commerce Website
Lecture 1: Project Setup And Assets Manage . .[FREE CLASS].
Video - 8:14 mins
Lecture 2: Layout File Setup . .[FREE CLASS].
Video - 00:20:53 mins
Lecture 3: Banner Homepage
Video - 00:21:03 mins
Lecture 4: New Product Section Homepage
Video - 00:20:46 mins
Lecture 5: Promo Banner Homepage
Video - 00:29:22 mins
Lecture 6: Combo Product Homepage
Video - 00:21:24 mins
Lecture 7: Blog Section Homepage
Video - 00:17:35 mins
Lecture 8: Shop Page
Video - 00:21:51 mins
Lecture 9: Blog Page And Redux Setup
Video - 00:09:44 mins
Lecture 10: Cart Slice Redux Toolkit
Video - 00:12:25 mins
Lecture 11: Cart Management Redux Toolkit
Video - 00:21:10 mins
Lecture 12: Checkout Page
Video - 00:37:31 mins
Lecture 13: Dashboard Setup
Video - 00:22:15 mins
Lecture 14: Dashboard Page
Video - 00:32:56 mins
Lecture 15: Dashboard Product Category User Order Page
Video - 00:31:14 mins
Lecture 16: Product Add Modal
Video - 00:17:30 mins
Lecture 17: Order Update Modal
Video - 00:11:23 mins
Lecture 18: Prisma And Database Setup
Video - 00:12:01 mins
Lecture 19: Model Create In Prisma
Video - 00:26:54 mins
Lecture 20: Sync With Database And Test Route
Video - 00:15:47 mins
Lecture 21: Product Api Route 1
Video - 00:36:08 mins
Lecture 22: Product Api Route 2
Video - 00:33:23 mins
Lecture 23: Category Api Route
Video - 00:22:41 mins
Lecture 24: User And Auth Api Route
Video - 00:28:18 mins
Lecture 25: Route Validation With Jwt
Video - 00:43:49 mins
Lecture 26: Api Integration Login Register
Video - 00:24:23 mins
Lecture 27: Save User In Redux
Video - 00:22:43 mins
Lecture 28: Get User With Token
Video - 00:25:31 mins
Lecture 29: Protected Route
Video - 00:07:16 mins
Lecture 30: Product Get Add Api Integration
Video - 00:43:10 mins
Lecture 31: Product Edit Delete And All Category Api Integration
Video - 00:30:23 mins
Lecture 32: Order Api Create And Integrate
Video - 00:40:51 mins
Lecture 33: Show Order In Admin And Customer
Video - 00:14:02 mins
Lecture 34: Order Details With Order Item
Video - 00:19:18 mins
Lecture 35: Check Build Error
Video - 14:12 mins
Module 18: Job Preparation Guideline
Lecture 1: What to Expect from This Module
Video - 00:01:03 mins
Lecture 2: Build Your Resume
Video - 7:14 mins
Lecture 3: How to Write a Cover Letter
Video - 4:17 mins
Lecture 4: Portfolio Building Guide for Everyone
Video - 9:16 mins
Lecture 5: Job Search and Application Technique (Bangladesh and Global)
Video - 00:06:29 mins
Lecture 6: Interview Preparation Guide
Video - 00:11:25 mins
Lecture 7: Additional Tips and Tricks
Video - 00:02:04 mins
Announcements Live Classes Gradebook Certificate Course Info
PreviousNext
  • Login
  • Registration
Forgot Password?
Or
Or
Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.
body::-webkit-scrollbar { width: 7px; } body::-webkit-scrollbar-track { border-radius: 10px; background: #f0f0f0; } body::-webkit-scrollbar-thumb { border-radius: 50px; background: #dfdbdb }