Full Stack Web Development HTML, CSS, Bootstrap and React JS

Learn Web Development from scratch. HTML, CSS, Bootstrap, React JS and more! All in one in this course

Oak Academy

Price

£15 inc VAT

Study method

Online, On Demand

Duration

15.3 hours · Self-paced

Qualification

No formal qualification

Certificates

Reed courses certificate of completion - Free

Overview

Hello there,

Welcome to Full Stack Web Development HTML, CSS, Bootstrap and React JS course.

Learn Web Development from scratch. HTML, CSS, Bootstrap, React JS and more! All in one in this course

This course will be your gateway to learn web design with a step-by-step approach. We can assure you that only this course will enough for you to learn web development from scratch to intermediate.

The world of web development is as wide as the internet itself. Much of our social and vocational lives play out on the internet, which prompts new industries aimed at creating, managing, and debugging the websites and applications that we increasingly rely on.

Whether you’re interested in adding React to your existing dev skillset, or you want to develop full-stack web apps by using tools like NodeJS, Redux, and MongoDB in conjunction with React,

This course will take you from a complete beginner to a master in hours! By the way, you do not need to know any thing for this course.

We'll be moving rapidly to give you the quickest, yet most thorough website building experience.

In this course, we have created a completely custom HTML learning environment for the first few sections of this course. Each lecture has an HTML page associated with it and has a start state.

With this course, you will improve your Bootstrap experience with HTML5 and CSS3 codes

This course will take you from a beginner to a more experienced level. You will learn HTML5, CSS3, Bootstrap 4 and React JS step by step with hands-on examples. And then you will be confident in using ReactJS, and if you ever get stuck, we will be there to help.

Whether you’re interested in mastering responsive web design, creating WordPress templates using Bootstrap, or integrating Bootstrap with HTML5, and CSS3.

Bootstrap is a free frontend web development framework for creating responsive websites. Bootstrap promotes a mobile-first approach to web design, offering a suite of templates and components that automatically render for use on any device.

Learn by doing!

So we have made this course as simple as possible in order to take you through step by step so you can feel confident and get a truly good understanding of how to utilize ReactJS. In this course, we will be teaching React by creating various projects.

In this course you will learn;

Learn to use the latest HTML5 and CSS3 to add unique styling to Bootstrap
Learn and create amazing high-quality Bootstrap 4 themes and UIs from scratch
Master every single Bootstrap component
Learn to compile Sass in the easiest way possible using a GUI
Get a crash course of the Bootstrap Grid System with the theme layout
Learn how to add Website Scrolling Animation to any Bootstrap Component or HTML Element
full stack web development, web development, front end web development with react, react js
Bootstrap 4, Bootstrap 5, HTML5, CSS3
Fullstack web development with html, css, javascript, react, react js
React Bootstrap, react js, full stack, bootstrap react, fullstack web development, reactjs
Web development with react js full course
css full course
react with bootstrap
We will start with local installation and react basics. After that, we will create 5 projects.
Project 1 – Learn, create react app and Jsx with ‘first-app’
Project 2 – Learn React props system with ‘blog-posts’ app
Project 3 – Learn react components, state, lifecycle methods, async operations, and much more... with the ‘hemisphere’ app
Project 4 – Handling event handlers, fetching data from an outside API, and showing list of records with ‘image-list’ app
Project 5 - Routing with React Router and using React Portals to render children outside the DOM hierarchy with the ‘react-router’ app

Video and Audio Production Quality

All our videos are created/produced as high-quality video and audio to provide you the best learning experience.

You will be,

Seeing clearly
Hearing clearly
Moving through the course without distractions

You'll also get:

Lifetime Access to The Course
Fast & Friendly Support in the Q&A section

Dive in now

Full Stack Web Development HTML, CSS, Bootstrap and React JS course

We offer full support, answering any questions.

See you in the course!

Certificates

Reed courses certificate of completion

Digital certificate - Included

Will be downloadable when all lectures have been completed

Curriculum

sections

148

lectures

15h 18m

total

Course Intro 01:09
- 1: Course Intro Preview 01:09
Introduction to Full Stack web development with react, bootstrap, html, css 54:03
- 2: Welcome to Our HTML and CSS Course 04:41
- 3: What is Internet and HTML 06:24
- 4: Project Files and Course Documents for react, bootstrap, HTML5, CSS3 01:00
- 5: Basic Tags 08:33
- 6: Images and Attributes 08:25
- 7: Lists 07:00
- 8: List Example 08:25
- 9: Block Level - Inline Elements 05:35
- 10: Quiz 01:00
- 11: FAQ about Full Stack Web Development with HTML, CSS, Bootstrap and React JS 03:00
Let's Learn More Complex Topics in HMTL 36:57
- 12: Tables 08:56
- 13: Table Example 06:01
- 14: Forms 12:08
- 15: Forms Example 07:52
- 16: Quiz 01:00
- 17: Quiz 01:00
CSS 41:55
- 18: Let's Meet CSS 04:41
- 19: CSS Basics 11:46
- 20: CSS Colors 08:41
- 21: Background and Border 07:57
- 22: Selectors 07:50
- 23: Quiz - Web Development with React, Boostrap, HTML, CSS 01:00
Intermediate CSS 1:21:01
- 24: Text and Fonts 09:32
- 25: Debugging in CSS 08:14
- 26: Box Model 07:09
- 27: CSS Position 06:40
- 28: CSS Float 07:44
- 29: Display Property 06:48
- 30: Box-Model Practice 11:50
- 31: Float-Layout Practice 08:23
- 32: Box-Sizing 06:28
- 33: Media Queries 07:13
- 34: Quiz - Web Development with React, Boostrap, HTML, CSS 01:00
Flexbox and Grid for CSS 1:15:50
- 35: Flexbox Introduction 05:20
- 36: Flexbox Properties 1 08:58
- 37: Flexbox Properties 2 06:37
- 38: Flexbox Properties 3 03:56
- 39: Grid CSS Intro 04:00
- 40: Grid CSS 06:20
- 41: Grid CSS - 2 09:41
- 42: Grid CSS - 3 03:55
- 43: Grid CSS - 4 04:54
- 44: Grid CSS - 5 05:45
- 45: Grid and Flexbox Project 02:59
- 46: Grid and Flexbox Project - 2 04:38
- 47: Grid and Flexbox Project - 3 04:48
- 48: Grid and Flexbox Project - 4 02:59
- 49: quiz 01:00
Bootstrap 22:59
- 50: What Is Bootstrap 05:41
- 51: Including Bootstrap in the Project 08:59
- 52: Web Design 07:19
- 53: quiz 01:00
Introduction to Bootstrap 1:00:11
- 54: Nav Bar 12:17
- 55: Grid System 10:08
- 56: Header Section 06:49
- 57: Our CSS File-1 09:27
- 58: Our CSS File-2 07:23
- 59: Font Awesome and Features Section - 1 06:47
- 60: Font Awesome and Features Section - 2 06:20
- 61: quiz 01:00
Intermediate Bootstrap 1:17:13
- 62: Bootstrap Modals 07:35
- 63: Modals-2 06:02
- 64: Bootstrap Cards 07:08
- 65: Bootsrap Cards Part 2 06:56
- 66: Carousel 1 07:47
- 67: Carousel 2 03:31
- 68: CSS Z-Index 07:06
- 69: Z-Index Our Project 04:48
- 70: Image Gallery 07:53
- 71: Forms 09:04
- 72: General Changes 04:17
- 73: General Changes - Part 2 05:06
Let`s Start to Learn React JS 1:09:35
- 74: Your First App Overview 11:06
- 75: Frequently Asked Questions 09:19
- 76: Let, Const and Var in 3 minutes 03:53
- 77: Install Node JS 05:26
- 78: Create Your React App 05:36
- 79: Why You Will Need To Create a React App_ 06:27
- 80: Start Creating React App 06:24
- 81: Do You Want to Learn How To Stop React App_ 05:18
- 82: Important Functional Components 15:06
- 83: quiz 01:00
What is this JSX? 30:40
- 84: Converting HTML JSX 06:02
- 85: Inline Styling with JSX in React JS 10:54
- 86: JavaScript Variable in JSX 12:44
- 87: quiz 01:00
React with Props 1:10:08
- 88: Three Tenets of Components 03:34
- 89: Simple App with React 02:55
- 90: Styling App with Semantic UI 08:35
- 91: Building Component 03:57
- 92: Specifying The Image in React JS 03:19
- 93: Duplicating The Single Component 01:59
- 94: Component Nesting 12:06
- 95: Props System 04:11
- 96: Passing Props to Child 13:03
- 97: Reusable Component Overview 02:47
- 98: Props Children 12:42
- 99: quiz 01:00
Class-Based Components 31:58
- 100: Class-Based Components and Functional Component 05:49
- 101: New App Overview 08:43
- 102: Getting Users Physical Location 07:58
- 103: Handling Async Operation in React 03:35
- 104: Transformation Functional Component to Class Based Component 04:53
- 105: quiz 01:00
State in React 36:53
- 106: State Rules 04:19
- 107: Initializing State In Constructor 13:49
- 108: Lifecycle Method Overview 12:26
- 109: Conditional Rendering 05:19
- 110: quiz 01:00
LifeCycle Methods in React or React JS 54:49
- 111: Get to Know Lifecycle Method 12:55
- 112: Refactoring App with Lifecycle Method 03:08
- 113: Passing State As Props 04:27
- 114: Ternary Expressions in JSX 05:49
- 115: Showing Picture 06:34
- 116: Styling The App 10:12
- 117: Free React Developer Tools 03:49
- 118: General App Review 06:55
- 119: quiz 01:00
User Inputs, Forms and Events in React JS 54:07
- 120: App Overview 02:43
- 121: Component Design 03:03
- 122: Handling Forms 08:31
- 123: Styling The App 03:22
- 124: Creating Event Handlers 06:16
- 125: Controlled vs Uncontrolled Elements 04:41
- 126: Why Controlled Elements 07:40
- 127: Understanding ‘this’ Key Word In JS 10:06
- 128: Communicating Child to Parent 03:02
- 129: Invoking Callbacks in Children 04:43
API Request with React 36:00
- 130: Fetching Data 03:50
- 131: Axios vs Fetch 03:45
- 132: Async Await Function 10:07
- 133: Setting The State 03:23
- 134: Rendering A List of Components 05:15
- 135: Implementing The Key Values In List 04:35
- 136: What We Have Learned From The App 04:05
- 137: quiz 01:00
Navigation with React Router 57:50
- 138: Initializing The Project 03:13
- 139: The React Router 21:09
- 140: Link and Nav Links 06:06
- 141: Programmatic Redirects 07:21
- 142: Route Parameters 15:07
- 143: React Router Switch Tag 03:54
- 144: quiz 01:00
React Portals 24:20
- 145: 65 - Why React Portals_ 08:49
- 146: 66 - How To Create A Modal_ 07:38
- 147: 67 - Creating a React Portals 06:53
- 148: quiz 01:00

Preview course

Course media

Description