Full Web Development Course - HTML, CSS, Bootstrap and React

Oak Academy

Reed courses certificate of completion

Digital certificate - Included

• Course Intro 00:49

  • 1: Full Web Development Course - HTML, CSS, Bootstrap and React 00:49

• Introduction to Full Stack web development with react, react native, bootstrap 47:22

  • 2: What is Internet and HTML 06:24
  • 3: Project Files and Course Documents 01:00
  • 4: Basic Tags 08:33
  • 5: Images and Attributes 08:25
  • 6: Lists 07:00
  • 7: List Example 08:25
  • 8: Block Level - Inline Elements 05:35
  • 9: FAQ about full stack web development, HTML, CSS, Bootstrap and React 02:00

• Let's Learn More Complex Topics in HTML 34:57

  • 10: Tables 08:56
  • 11: Table Example 06:01
  • 12: Forms 12:08
  • 13: Forms Example 07:52

• CSS 36:14

  • 14: CSS Basics 11:46
  • 15: CSS Colors 08:41
  • 16: Background and Border 07:57
  • 17: Selectors 07:50

• Intermadiate CSS 1:21:01

  • 18: Text and Fonts 09:32
  • 19: Debugging in CSS 08:14
  • 20: Box Model 07:09
  • 21: CSS Position 06:40
  • 22: CSS Float 07:44
  • 23: Display Property 06:48
  • 24: Box-Model Practice 11:50
  • 25: Float-Layout Practice 08:23
  • 26: Box-Sizing 06:28
  • 27: Media Queries 07:13
  • 28: quiz 01:00

• Flexbox and Grid For CSS 1:15:50

  • 29: Flexbox Introduction 05:20
  • 30: Flexbox Properties 1 08:58
  • 31: Flexbox Properties 2 06:37
  • 32: Flexbox Properties 3 03:56
  • 33: Grid CSS Intro 04:00
  • 34: Grid CSS 06:20
  • 35: Grid CSS - 2 09:41
  • 36: Grid CSS - 3 03:55
  • 37: Grid CSS - 4 04:54
  • 38: Grid CSS - 5 05:45
  • 39: Grid and Flexbox Project 02:59
  • 40: Grid and Flexbox Project - 2 04:38
  • 41: Grid and Flexbox Project - 3 04:48
  • 42: Grid and Flexbox Project - 4 02:59
  • 43: quiz 01:00

• Bootstrap 22:59

  • 44: What Is Bootstrap 05:41
  • 45: Including Bootstrap in the Project 08:59
  • 46: Web Design 07:19
  • 47: Quiz Full stack web development 01:00

• Introduction To Bootstrap 1:00:11

  • 48: Nav Bar 12:17
  • 49: Grid System 10:08
  • 50: Header Section 06:49
  • 51: Our CSS File-1 09:27
  • 52: Our CSS File-2 07:23
  • 53: Font Awesome and Features Section - 1 06:47
  • 54: Font Awesome and Features Section - 2 06:20
  • 55: quiz 01:00

• Intermediate Bootstrap 1:18:13

  • 56: Bootstrap Modals 07:35
  • 57: Modals-2 06:02
  • 58: Bootstrap Cards 07:08
  • 59: Bootsrap Cards Part 2 06:56
  • 60: Carousel 1 07:47
  • 61: Carousel 2 03:31
  • 62: CSS Z-Index 07:06
  • 63: Z-Index Our Project 04:48
  • 64: Image Gallery 07:53
  • 65: Forms 09:04
  • 66: General Changes 04:17
  • 67: General Changes - Part 2 05:06
  • 68: quiz 01:00

• Let's Start to Learn React JS 54:29

  • 69: Your First App Overview 11:06
  • 70: Frequently Asked Questions 09:19
  • 71: Let, Const and Var in 3 minutes 03:53
  • 72: Install Node JS 05:26
  • 73: Create Your React App 05:36
  • 74: Why You Will Need To Create a React App_ 06:27
  • 75: Start Creating React App 06:24
  • 76: Do You Want to Learn How To Stop React App_ 05:18
  • 77: quiz 01:00

• What Is This JSX? 30:40

  • 78: Converting HTML JSX 06:02
  • 79: Inline Styling with JSX in React JS 10:54
  • 80: JavaScript Variable in JSX 12:44
  • 81: quiz 01:00

• React With Props 1:09:08

  • 82: Three Tenets of Components 03:34
  • 83: Simple App with React 02:55
  • 84: Styling App with Semantic UI 08:35
  • 85: Building Component 03:57
  • 86: Specifying The Image in React JS 03:19
  • 87: Duplicating The Single Component 01:59
  • 88: Component Nesting 12:06
  • 89: Props System 04:11
  • 90: Passing Props to Child 13:03
  • 91: Reusable Component Overview 02:47
  • 92: Props Children 12:42

• Class-Based Components 30:58

  • 93: Class-Based Components and Functional Component 05:49
  • 94: New App Overview 08:43
  • 95: Getting Users Physical Location 07:58
  • 96: Handling Async Operation in React 03:35
  • 97: Transformation Functional Component to Class Based Component 04:53

• State In React 35:53

  • 98: State Rules 04:19
  • 99: Initializing State In Constructor 13:49
  • 100: Lifecycle Method Overview 12:26
  • 101: Conditional Rendering 05:19

• LifeCycle Methods in React js and react native 53:49

  • 102: Get to Know Lifecycle Method 12:55
  • 103: Refactoring App with Lifecycle Method 03:08
  • 104: Passing State As Props 04:27
  • 105: Ternary Expressions in JSX 05:49
  • 106: Showing Picture 06:34
  • 107: Styling The App 10:12
  • 108: Free React Developer Tools 03:49
  • 109: General App Review 06:55

• User Inputs, Forms and Events in React JS 54:07

  • 110: App Overview 02:43
  • 111: Component Design 03:03
  • 112: Handling Forms 08:31
  • 113: Styling The App 03:22
  • 114: Creating Event Handlers 06:16
  • 115: Controlled vs Uncontrolled Elements 04:41
  • 116: Why Controlled Elements 07:40
  • 117: Understanding ‘this’ Key Word In JS 10:06
  • 118: Communicating Child to Parent 03:02
  • 119: Invoking Callbacks in Children 04:43

• API Request With React 35:00

  • 120: Fetching Data 03:50
  • 121: Axios vs Fetch 03:45
  • 122: Async Await Function 10:07
  • 123: Setting The State 03:23
  • 124: Rendering A List of Components 05:15
  • 125: Implementing The Key Values In List 04:35
  • 126: What We Have Learned From The App 04:05

• Navigation With react Router 56:50

  • 127: Initializing The Project 03:13
  • 128: The React Router 21:09
  • 129: Link and Nav Links 06:06
  • 130: Programmatic Redirects 07:21
  • 131: Route Parameters 15:07
  • 132: React Router Switch Tag 03:54

• React Portals 23:20

  • 133: Why React Portals_ 08:49
  • 134: How To Create A Modal_ 07:38
  • 135: Creating a React Portals 06:53

• Introduction to React Native 02:43

  • 136: How To Get Help 01:43
  • 137: Project Files and Course Documents 01:00

• Setup For Windows 28:32

  • 138: Free Tools For Windows 07:25
  • 139: Windows Setup for React Native 05:33
  • 140: How To Start Emulator in Android Studio 15:34

• React Native Setup For OSX 12:46

  • 141: Free Tools for IOS 04:47
  • 142: OSX Setup for React Native 04:46
  • 143: Start The Emulator 03:13

• React Native And JSX 1:03:05

  • 144: How To Create An App 02:51
  • 145: See Content On Emulator 03:52
  • 146: Why Do We Need React and React-Native 03:50
  • 147: Es6 Syntax ( Let, Const, Var) 05:34
  • 148: First Component 08:41
  • 149: How To Show Component On Device 10:26
  • 150: How to Build Our First App 06:46
  • 151: How to Connect a Component To The Root Component 12:08
  • 152: Import a Component to Another Component 08:57

• Styling For React Native 45:13

  • 153: Styling with JSX 13:44
  • 154: Displaying Views 10:45
  • 155: Header Component’s Styling 04:18
  • 156: React Props 07:55
  • 157: How to Reuse Code With Props System 08:31

• API Request With react Native 26:17

  • 158: How To Show a List To The User 06:59
  • 159: The List Component 08:34
  • 160: Func Component vs Class Based Component 10:44

• Lifecycle Methods 26:00

  • 161: When Do We Need Lifecycle Methods 09:32
  • 162: Lifecycle Methods 06:33
  • 163: Making Request With Axios 09:55

• State In Reactive Native 1:22:38

  • 164: What Is State and How To Initial State 08:44
  • 165: Using of State 10:33
  • 166: A Component’s Lifecycle With State 05:01
  • 167: List Component 08:24
  • 168: List Item Component 10:14
  • 169: Reusable Components 06:28
  • 170: Styled Component for List Items 05:19
  • 171: Usage of Props.Children 05:46
  • 172: Item Section 09:18
  • 173: Introduction to the Flexbox 06:47
  • 174: Section Header Component 06:04

• Layout With Flexbox 45:49

  • 175: How to Show An Image 12:46
  • 176: Scrollable Content 05:23
  • 177: User Interaction with ReactNative 09:44
  • 178: Event Handlers 13:13
  • 179: How to Open Another App (Browser) 04:43

• Introduction to Full Stack web development with react, react native, bootstrap 16:09

  • 180: Introduction to JavaScript 06:28
  • 181: Setup Visual Studio Code 01:22
  • 182: Adding js file 08:19

• Language Basics 1:05:04

  • 183: Variables and Data Types 16:08
  • 184: Type Coercion 10:35
  • 185: Variable Mutation 09:42
  • 186: Basic Operators 10:30
  • 187: Boolean Logic 07:17
  • 188: Logical Operators 09:52
  • 189: quiz 01:00

• React Conditional Statements 48:13

  • 190: Conditional Statements 13:29
  • 191: Code Quiz 1 Solution 07:35
  • 192: Ternary Operator 07:37
  • 193: Switch, case statements 12:23
  • 194: Code Quiz 2 01:50
  • 195: Code Quiz 2 Solution 05:19

• React JS Loops 40:35

  • 196: Introduction to Loops 03:43
  • 197: While Loops 08:31
  • 198: While Loops Quiz 01:33
  • 199: While Loops Quiz Solution 08:27
  • 200: for Loops 05:42
  • 201: for Loops Quiz Solution 04:31
  • 202: Continue and Break Statements 08:08

• Functions in React 1:02:20

  • 203: Introduction to Functions 02:14
  • 204: Function Decleration 06:36
  • 205: Function with Arguments 10:33
  • 206: Function return 09:59
  • 207: Function Expression 05:13
  • 208: Function Quiz 01:38
  • 209: Function Quiz Solution 09:21
  • 210: Function Scope 15:46
  • 211: quiz 01:00

• React or React Native Arrays 57:07

  • 212: Introduction to arrays 02:54
  • 213: Array Features 13:55
  • 214: Array Methods 18:35
  • 215: Array Quiz 01:32
  • 216: Array Quiz Solution 03:48
  • 217: Array Iteration 11:44
  • 218: Array Iteration Quiz 00:50
  • 219: Array Iteration Quiz Solution 03:49

• React JS Objects 58:32

  • 220: Introduction to objects 12:40
  • 221: Object update 06:54
  • 222: Complex Data Structures 10:23
  • 223: Object Quiz 01:17
  • 224: Object Quiz Solution 05:04
  • 225: Object Methods 10:22
  • 226: this Keyword 11:52

• DOM in Javascript 1:10:46

  • 227: Introduction to DOM 04:29
  • 228: What is DOM 07:36
  • 229: Select and Change 09:15
  • 230: Select Methods 19:53
  • 231: Manipulation Methods 13:30
  • 232: innerHTML and textContext 09:31
  • 233: Attribute Manipulation 06:32

• Event Handlers in Javascript 48:48

  • 234: Introduction to Event Handlers 10:30
  • 235: Event Handler Codequiz 03:53
  • 236: Codequiz Solution 05:54
  • 237: callback Function 04:54
  • 238: Different Event Types 05:43
  • 239: Todolist Quiz Solution 09:04
  • 240: What We Learned 08:50

Welcome to the Full Web Development Course - HTML, CSS, Bootstrap, and React!

This course is designed to teach you everything you need to become a professional web developer. You’ll learn to create responsive, dynamic websites and mobile applications using the most widely-used web technologies.

What you will learn in this course:

• HTML5 & CSS3 – The foundation of every website. Learn how to structure and style content effectively.

• Bootstrap 4 – Build modern, responsive layouts with the grid system, components, and utilities.

• JavaScript – Understand variables, loops, functions, arrays, objects, DOM manipulation, and event handling.

• React JS – Learn components, state, props, lifecycle methods, and React Router to build dynamic web apps.

• React Native – Create cross-platform mobile applications without learning Java or Swift.

• Project-based learning – Apply your knowledge in 5 real projects:

  1. First React App – Learn JSX, components, and basic app structure

  2. Blog Posts App – Handling data and props

  3. Hemisphere App – State management, lifecycle, and async operations

  4. Image List App – Fetching data from APIs and event handling

  5. React Router App – Advanced routing, portals, and component interaction

Why take this course:

• Learn step by step, from beginner to advanced level

• Build projects you can showcase in your portfolio

• Understand not only how to write code but also how to debug and optimize it

• Learn modern best practices in web and mobile development

• Lifetime access and continuous updates

This course is perfect for beginners, students, or professionals looking to upgrade their skills in full-stack web development. By the end, you will have the confidence to build websites, create web applications, and develop mobile apps that are ready for real-world use.

• If you want to learn HTML 5, CSS 3, Bootstrap 4 and React JS the first step in web development, completely and easily, you are at the right place.
• People who are willing to make a career in the Web Development
• If you want to building your own website, you should enroll
• Programmers who want to learn React and React-Native
• Anyone who has basic HTML, CSS and JavaScript knowledge and wants to learn how to create complex applications
• If you're interested in using a library/framework like React, Angular, Vue or Node in the future
• People who want to become web development with html, css, javascript, react, react native
• Poeple who want to learn front end web development
• People who want to learn backend web development
• People who want to learn full stack web development
• People who want to learn website development

• No prior knowledge needed about javascript, html, css, bootstrap, react, react js, react native
• This course will take you from scratch to the advanced level
• Computer with access to the internet
• Desire to learn javascript
• Desire to learn HTML & CSS
• Desire to learn React Js
• Desire to learn react or react js with redux, hooks and context
• Desire to learn react native
• Desire to learn web development with react, react native, html, css, bootstrap
• Desire to learn bootstrap
• Desire to learn grid css
• Desire to learn html, css, bootstrap
• Nothing else! It’s just you, your computer and your ambition to get started today

Currently there are no Q&As for this course. Be the first to ask a question.