Web Development


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

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

4.60 (12 reviews)


15 hours


May 2021

Last Update
Regular Price

Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses

What you will learn

Learn to use the latest HTML5 and CSS3 to add unique styling to Bootstrap

Learn Bootstrap 4 and UIs from scratch

This course is the best way to learn React JS

Learn how to build single page applications with React JS

Learn and create amazing high quality Bootstrap 4 themes and UIs from scratch

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

We will improve our knowledge step by step by learning the basics of CSS

Create a beautiful, responsive landing page for any one

It will be much easier to prepare web pages with Grid CSS and Flexbox features

You will learn to use basic tags which are used commonly

You will be able to prepare lists in different formats

You will be able to create commonly used user login and registration pages by learning the form structure.

In the developing world, we will talk about all the details about web design compatible with different screens.

Learn components, props, states and component life cycle methods in React JS

Create reusable React Components

Learn to connect to an external API

Using React Portals to render Children Outside the DOM Hierarchy


Hello there,

Welcome to Full Stack Web Development HTML, CSS ,Bootstrap and React JS 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.

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.

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

  • 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

No prior knowledge is needed!

Why would you want to take this course? 

Our answer is simple: The quality of teaching.

OAK Academy based in London is an online education company. OAK Academy gives education in the field of IT, Software, Design, development in English, Portuguese, Spanish, Turkish and a lot of different language on Udemy platform where it has over 1000 hours of video education lessons. OAK Academy both increase its education series number by publishing new courses, and it makes students aware of all the innovations of already published courses by upgrading.

When you enroll, you will feel the OAK Academy`s seasoned developers expertise. Questions sent by students to our instructors are answered by our instructors within 48 hours at the latest

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

  • Udemy Certificate of Completion Ready for Download

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!


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



Let's See What You Will Learn in HTML Part?

What is Internet and HTML ?

Basic Tags

Images and Attributes


List Example

Block Level - Inline Elements

Let's Learn More Complex Topics in HMTL


Table Example


Forms Example


Let's Meet CSS

CSS Basics

CSS Colors

Background and Border


Intermediate CSS

Text and Fonts

Debugging in CSS

Box Model

CSS Position

CSS Float

Display Property

Box-Model Practice

Float-Layout Practice


Media Queries

Flexbox and Grid for CSS

Flexbox Introduction

Flexbox Properties 1

Flexbox Properties 2

Flexbox Properties 3

Grid CSS Intro

Grid CSS

Grid CSS - 2

Grid CSS - 3

Grid CSS - 4

Grid CSS - 5

Grid and Flexbox Project

Grid and Flexbox Project - 2

Grid and Flexbox Project - 3

Grid and Flexbox Project - 4


What Is Bootstrap?

Including Bootstrap in the Project

Web Design

Introduction to Bootstrap

Nav Bar

Grid System

Header Section

Our CSS File-1

Our CSS File-2

Font Awesome and Features Section

Font Awesome and Features Section-2

Intermediate Bootstrap

Bootstrap Modals


Bootstrap Cards

Bootsrap Cards Part 2

Carousel 1

Carousel 2

CSS Z-Index

Z-Index Our Project

Image Gallery


General Changes

General Changes - Part 2

Let`s Start to Learn React JS

Your First App Overview

Frequently Asked Questions

Let, Const and Var in 3 minutes

Install Node JS

Create Your React App

Why You Will Need To Create a React App?

Start Creating React App

Do You Want to Learn How To Stop React App?

Important Functional Components

What is this JSX?

Converting HTML JSX

Inline Styling with JSX in React JS

JavaScript Variable in JSX

React with Props

Three Tenets of Components

Simple App with React

Styling App with Semantic UI

Building Component

Specifying The Image in React JS

Duplicating The Single Component

Component Nesting

Props System

Passing Props to Child

Reusable Component Overview

Props Children

Class-Based Components

Class-Based Components and Functional Component

New App Overview

Getting Users Physical Location

Handling Async Operation in React

Transformation Functional Component to Class Based Component

State in React

State Rules

Initializing State In Constructor

Lifecycle Method Overview

Conditional Rendering

Lifecycle Methods

Get to Know Lifecycle Method

Refactoring App with Lifecycle Method

Passing State As Props

Ternary Expressions in JSX

Showing Picture

Styling The App

Free React Developer Tools

General App Review

User Inputs, Forms and Events in React JS

App Overview

Component Design

Handling Forms

Styling The App

Creating Event Handlers

Controlled vs Uncontrolled Elements

Why Controlled Elements?

Understanding ‘this’ Key Word In JS

Communicating Child to Parent

Invoking Callbacks In Children

API Request with React

Fetching Data

Axios vs Fetch

Async Await Function

Setting The State

Rendering A List of Components

Implementing The Key Values In List

What We Have Learned From The App?

Navigation with React Router

Initializing The Project

The React Router

Link and Nav Links

Programmatic Redirects

Route Parameters

React Router Switch Tag

React Portals

Why React Portals?

How To Create A Modal?

Creating a React Portals


Udemy ID


Course created date


Course Indexed date
Course Submitted by