Complete Bootstrap & React Bootcamp With Hands-On Projects

Learn to Build Responsive, Interactive Web Apps using Bootstrap and React.

What you'll learn
Learn the Bootstrap Grid System
Learn to work with Bootstrap Three Column Layouts
Learn to Build Bootstrap Navigation Components
Learn to Style Images using Bootstrap
Build Advanced, Responsive Menus using Bootstrap
Build Stunning Layouts using Bootstrap Themes
Learn the Foundations of React
Work with JSX, and Functional Components in React
Build a Calculator in React
Learn the React State Hook
Debug React Projects
Learn to Style React Components
Build a Single and Multi-Player Connect-4 Clone with AI
Learn React Lifecycle Events
Learn React Conditional Rendering
Build a Fully Custom E-Commerce Site in React
Learn the Foundations of JSON Server
Work with React Router
Requirements
No programming experience needed. You will learn everything you need to know.
Basic computer skills.
Basic knowledge of HTML and CSS
Description
Welcome to the Complete Bootstrap and React Bootcamp. This course teaches students how to create modern, interactive web pages using the Bootstrap framework and React JavaScript library. The course starts with an introduction into Bootstrap with a focus on its reputation in the development community as the number one choice for mobile-first front-end web frameworks. Bootstrap is a well documented collection of reusable code written in HTML, CSS, and JavaScript. We start with exploring the foundations of Bootstrap, including embedding it into projects, and building out the basic Bootstrap page structure. From there we catapult into the infamous Bootstrap grid system, along with the commonly used three column web page layout. After the introductory topics, students learn to work with a number of components from typography, tables and image styling right up to wells, alerts, and buttons. As part of the course we demonstrate how to build out intricate navigation menus using dropdown, collapse, accordion, and pill menus. We will also cover form styling, carousels, modals, scrollspy and just about every other Bootstrap component that’s instrumental to your journey as a front-end developer. The module concludes with a hands-on project, where students will use a Bootstrap theme to build a stunning web page from scratch.In the second section of the course, we explore React. React, also known as React JS, is a powerful JavaScript library used for building custom, interactive user interfaces using UI components. Similar to Bootstrap, React is a well documented free and open source library. The project was founded by Meta and a network of independent developers. In this section, students learn how to use the React library through a series of hands-on projects. The React section of this course starts off with a hands-on project where you’ll learn how to work with functional React components, props, Callback functions, OnClick Events, and the React State hook to build a fully functional calculator. From there we will dive into project number two, where you will build a connect-4 clone. Here we will cover more intermediate concepts including passing props, destructuring, passing arguments to click events, various styling methods, and handling callbacks. You will also learn about the React key property, React lifecycle events, and conditional rendering. By the end you will have built a complete multi and single player connect-4 game board with built-in AI capabilities. In the final section of the course we further unleash the power of React by building out a complete e-commerce site with multiple product categories, a product showcase, shopping cart feature, and much more. Here, we introduce a number of integral new concepts including: JSON server, Fetch API, and installing React router. These essential building blocks will be used to render the product categories, style the product list, and configure the product details page. From there we dive into styled components, refactoring the shop layout, and exploring the concept of “context” in React. In the final stages of the project students will configure the shopping cart basket, and the checkout feature. We will also implement a product search feature, followed by in-depth exercises on validating input forms in React.As you can see this course covers a tremendous bit of ground. Best of all it features Tim Maclachlan - a renowned senior full-stack developer with over 20 years of commercial development experience. As a multi-faceted developer, Tim specializes in algorithmic, analytical and mobile development. To date, he’s written hundreds of applications and worked in a number of industries from commercial aviation and military, to banking and finance. Tim has a genuine passion for teaching others how to become better coders and looks forward to interacting with his students.With that said, we hope you’re just as excited about this course as we are, if so - hit that enroll button and let’s get started.

Overview

Section 1: The Bootstrap Framework

Lecture 1 Introduction to Bootstrap

Lecture 2 Embedding Bootstrap

Lecture 3 Bootstrap Basic Page Structure

Lecture 4 Bootstrap Grid System

Lecture 5 Bootstrap Three Column Layouts

Lecture 6 Bootstrap Typography

Lecture 7 Bootstrap Tables

Lecture 8 Bootstrap Styling Images

Lecture 9 Bootstrap Jumbotron

Lecture 10 Bootstrap Wells

Lecture 11 Bootstrap Alerts

Lecture 12 Bootstrap Buttons

Lecture 13 Bootstrap Button Groups

Lecture 14 Bootstrap Justified Button Groups

Lecture 15 Bootstrap Glyphicons

Lecture 16 Bootstrap Badges and Labels

Lecture 17 Bootstrap Progress Bars

Lecture 18 Bootstrap Pagination

Lecture 19 Bootstrap Pager Pagination

Lecture 20 Bootstrap List Groups

Lecture 21 Bootstrap Panels

Lecture 22 Bootstrap Dropdown Menus

Lecture 23 Bootstrap Collapsibles

Lecture 24 Bootstrap Collapse Panel

Lecture 25 Bootstrap Collapse List Group

Lecture 26 Bootstrap Accordion

Lecture 27 Bootstrap Tab Menus

Lecture 28 Bootstrap Pill Menus

Lecture 29 Bootstrap Dynamic Tabs and Pills

Lecture 30 Bootstrap Navigation Bar

Lecture 31 Bootstrap Collapsible Navigation Bar

Lecture 32 Bootstrap Forms - Vertical and Inline

Lecture 33 Bootstrap Inputs

Lecture 34 Bootstrap Form Control States

Lecture 35 Bootstrap Input Sizing

Lecture 36 Bootstrap Carousel

Lecture 37 Bootstrap Modal

Lecture 38 Bootstrap Tooltip

Lecture 39 Bootstrap Popover

Lecture 40 Bootstrap Scrollspy

Lecture 41 Bootstrap Project - Themes Intro

Lecture 42 Bootstrap Project - File Overview

Lecture 43 Bootstrap Project - Script Overview

Lecture 44 Bootstrap Project - Script Overview Cont.

Section 2: React

Lecture 45 Skills Required

Lecture 46 What is React?

Section 3: React Project: Build a Calculator

Lecture 47 Project Overview

Lecture 48 Hello React

Lecture 49 Tools Needed

Lecture 50 Code Pen

Lecture 51 Intro to JSX

Lecture 52 Functional Components in React

Lecture 53 Why Components?

Lecture 54 Intro to Props in React

Lecture 55 React Components, Props and Callbacks

Lecture 56 Building the calculator visuals

Lecture 57 OnClick Events in React

Lecture 58 Passing Parameters in Callback Functions

Lecture 59 Using React State Hook

Lecture 60 Implementing the calculator - Display

Lecture 61 Implementing the calculator - Operators

Lecture 62 Debugging in React

Lecture 63 Project Summary

Section 4: React Project: Connect-4 Clone

Lecture 64 Project Overview

Lecture 65 Tools Needed

Lecture 66 Creating the Game Board

Lecture 67 Game Circle - OnClickEvent

Lecture 68 Passing Props - Destructing - React Children

Lecture 69 Passing Arguments to Click Events

Lecture 70 Inline Styling

Lecture 71 Square to Circle Component

Lecture 72 Global Styling

Lecture 73 Dynamic Styling

Lecture 74 Dynamic Classes

Lecture 75 Handling Callbacks

Lecture 76 Using React State Hook (again)

Lecture 77 Updating the Player Circle

Lecture 78 Initializing the Game Board

Lecture 79 React Key Property

Lecture 80 Styling the Game Board - Header and Footer

Lecture 81 Calculating the Winner

Lecture 82 Displaying the Winner

Lecture 83 Determining a Draw Condition

Lecture 84 React Lifecycle Events

Lecture 85 Initializing the Game

Lecture 86 Suggesting a Move - Implementing a Computer Player

Lecture 87 Smart Computer Player (Basic AI)

Lecture 88 CSS Variables

Lecture 89 Conditional Rendering

Lecture 90 Deploy to Netlify

Lecture 91 Deploy to Surge

Lecture 92 Project Summary

Section 5: React Project: Build an E-Commerce Site in React

Lecture 93 Project Overview

Lecture 94 Scaffolding the Project

Lecture 95 Intro to JSON Server

Lecture 96 Fetch API

Lecture 97 Styling the Store

Lecture 98 Rendering the Categories

Lecture 99 Binding the Products

Lecture 100 Refactor the Fetch API call

Lecture 101 Dealing with errors in Fetch API

Lecture 102 Tidy the Fetch API call

Lecture 103 Styling the Product List

Lecture 104 Installing React Router

Lecture 105 Fixing the Key Warning

Lecture 106 React Router - Detail Page

Lecture 107 Fetch API - Get Product By Id

Lecture 108 Product Description

Lecture 109 Intro to Styled Components

Lecture 110 Styled Components - Product Description

Lecture 111 Dangerously Set HTML (yeah really)

Lecture 112 Refactor the Categories

Lecture 113 Refactor the Layout

Lecture 114 Refactor the Home Page

Lecture 115 Intro to Context in React

Lecture 116 UseContext Hook and UseReducer Hook in React

Lecture 117 Basket Layout

Lecture 118 Implementing the Basket

Lecture 119 Implementing Basket Icons

Lecture 120 Implementing Basket Total

Lecture 121 Finishing the Checkout

Lecture 122 Checkout - Fixing the State

Lecture 123 Implementing the Order Confirmation

Lecture 124 Intro to Local Storage

Lecture 125 Implementing Search Results

Lecture 126 Better Searching with Debouncing

Lecture 127 Validating Forms in React - Part 1

Lecture 128 Validating Forms in React - Part 2

Lecture 129 Validating Forms in React - Part 3

Lecture 130 Validating Forms in React - Part 4

Lecture 131 Project Summary

Students interested in building mobile responsive websites using Bootstrap,Students interested in front-end web development,Students interested in learning React,Students interested in building UI components using React library