Complete Bootstrap React Bootcamp with Hands-On Projects

Complete Bootstrap & React Bootcamp with Hands-On Projects, available at $44.99, has an average rating of 4.44, with 131 lectures, based on 334 reviews, and has 56966 subscribers.

You will learn about 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 This course is ideal for individuals who are Students interested in building mobile responsive websites using Bootstrap or Students interested in front-end web development or Students interested in learning React or Students interested in building UI components using React library It is particularly useful for Students interested in building mobile responsive websites using Bootstrap or Students interested in front-end web development or Students interested in learning React or Students interested in building UI components using React library.

Enroll now: Complete Bootstrap & React Bootcamp with Hands-On Projects

Summary

Title: Complete Bootstrap & React Bootcamp with Hands-On Projects

Price: $44.99

Average Rating: 4.44

Number of Lectures: 131

Number of Published Lectures: 131

Number of Curriculum Items: 131

Number of Published Curriculum Objects: 131

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

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

Target Audiences

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

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.

Course Curriculum

Chapter 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.

Chapter 2: React

Lecture 1: Skills Required

Lecture 2: What is React?

Chapter 3: React Project: Build a Calculator

Lecture 1: Project Overview

Lecture 2: Hello React

Lecture 3: Tools Needed

Lecture 4: Code Pen

Lecture 5: Intro to JSX

Lecture 6: Functional Components in React

Lecture 7: Why Components?

Lecture 8: Intro to Props in React

Lecture 9: React Components, Props and Callbacks

Lecture 10: Building the calculator visuals

Lecture 11: OnClick Events in React

Lecture 12: Passing Parameters in Callback Functions

Lecture 13: Using React State Hook

Lecture 14: Implementing the calculator – Display

Lecture 15: Implementing the calculator – Operators

Lecture 16: Debugging in React

Lecture 17: Project Summary

Chapter 4: React Project: Connect-4 Clone

Lecture 1: Project Overview

Lecture 2: Tools Needed

Lecture 3: Creating the Game Board

Lecture 4: Game Circle – OnClickEvent

Lecture 5: Passing Props – Destructing – React Children

Lecture 6: Passing Arguments to Click Events

Lecture 7: Inline Styling

Lecture 8: Square to Circle Component

Lecture 9: Global Styling

Lecture 10: Dynamic Styling

Lecture 11: Dynamic Classes

Lecture 12: Handling Callbacks

Lecture 13: Using React State Hook (again)

Lecture 14: Updating the Player Circle

Lecture 15: Initializing the Game Board

Lecture 16: React Key Property

Lecture 17: Styling the Game Board – Header and Footer

Lecture 18: Calculating the Winner

Lecture 19: Displaying the Winner

Lecture 20: Determining a Draw Condition

Lecture 21: React Lifecycle Events

Lecture 22: Initializing the Game

Lecture 23: Suggesting a Move – Implementing a Computer Player

Lecture 24: Smart Computer Player (Basic AI)

Lecture 25: CSS Variables

Lecture 26: Conditional Rendering

Lecture 27: Deploy to Netlify

Lecture 28: Deploy to Surge

Lecture 29: Project Summary

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

Lecture 1: Project Overview

Lecture 2: Scaffolding the Project

Lecture 3: Intro to JSON Server

Instructors

YouAccel Training
8+ Million Enrollments, 70k+ Reviews. Register Today.

Rating Distribution

1 stars: 8 votes

2 stars: 8 votes

3 stars: 38 votes

4 stars: 108 votes

5 stars: 172 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!