Complete Bootstrap & React Bootcamp with Hands-On Projects
- Description
- Curriculum
- FAQ
- Reviews
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.
-
1Introduction to BootstrapVideo lesson
-
2Embedding BootstrapVideo lesson
-
3Bootstrap Basic Page StructureVideo lesson
-
4Bootstrap Grid SystemVideo lesson
-
5Bootstrap Three Column LayoutsVideo lesson
-
6Bootstrap TypographyVideo lesson
-
7Bootstrap TablesVideo lesson
-
8Bootstrap Styling ImagesVideo lesson
-
9Bootstrap JumbotronVideo lesson
-
10Bootstrap WellsVideo lesson
-
11Bootstrap AlertsVideo lesson
-
12Bootstrap ButtonsVideo lesson
-
13Bootstrap Button GroupsVideo lesson
-
14Bootstrap Justified Button GroupsVideo lesson
-
15Bootstrap GlyphiconsVideo lesson
-
16Bootstrap Badges and LabelsVideo lesson
-
17Bootstrap Progress BarsVideo lesson
-
18Bootstrap PaginationVideo lesson
-
19Bootstrap Pager PaginationVideo lesson
-
20Bootstrap List GroupsVideo lesson
-
21Bootstrap PanelsVideo lesson
-
22Bootstrap Dropdown MenusVideo lesson
-
23Bootstrap CollapsiblesVideo lesson
-
24Bootstrap Collapse PanelVideo lesson
-
25Bootstrap Collapse List GroupVideo lesson
-
26Bootstrap AccordionVideo lesson
-
27Bootstrap Tab MenusVideo lesson
-
28Bootstrap Pill MenusVideo lesson
-
29Bootstrap Dynamic Tabs and PillsVideo lesson
-
30Bootstrap Navigation BarVideo lesson
-
31Bootstrap Collapsible Navigation BarVideo lesson
-
32Bootstrap Forms - Vertical and InlineVideo lesson
-
33Bootstrap InputsVideo lesson
-
34Bootstrap Form Control StatesVideo lesson
-
35Bootstrap Input SizingVideo lesson
-
36Bootstrap CarouselVideo lesson
-
37Bootstrap ModalVideo lesson
-
38Bootstrap TooltipVideo lesson
-
39Bootstrap PopoverVideo lesson
-
40Bootstrap ScrollspyVideo lesson
-
41Bootstrap Project - Themes IntroVideo lesson
-
42Bootstrap Project - File OverviewVideo lesson
-
43Bootstrap Project - Script OverviewVideo lesson
-
44Bootstrap Project - Script Overview Cont.Video lesson
-
47Project OverviewVideo lesson
-
48Hello ReactVideo lesson
-
49Tools NeededVideo lesson
-
50Code PenVideo lesson
-
51Intro to JSXVideo lesson
-
52Functional Components in ReactVideo lesson
-
53Why Components?Video lesson
-
54Intro to Props in ReactVideo lesson
-
55React Components, Props and CallbacksVideo lesson
-
56Building the calculator visualsVideo lesson
-
57OnClick Events in ReactVideo lesson
-
58Passing Parameters in Callback FunctionsVideo lesson
-
59Using React State HookVideo lesson
-
60Implementing the calculator - DisplayVideo lesson
-
61Implementing the calculator - OperatorsVideo lesson
-
62Debugging in ReactVideo lesson
-
63Project SummaryVideo lesson
-
64Project OverviewVideo lesson
-
65Tools NeededVideo lesson
-
66Creating the Game BoardVideo lesson
-
67Game Circle - OnClickEventVideo lesson
-
68Passing Props - Destructing - React ChildrenVideo lesson
-
69Passing Arguments to Click EventsVideo lesson
-
70Inline StylingVideo lesson
-
71Square to Circle ComponentVideo lesson
-
72Global StylingVideo lesson
-
73Dynamic StylingVideo lesson
-
74Dynamic ClassesVideo lesson
-
75Handling CallbacksVideo lesson
-
76Using React State Hook (again)Video lesson
-
77Updating the Player CircleVideo lesson
-
78Initializing the Game BoardVideo lesson
-
79React Key PropertyVideo lesson
-
80Styling the Game Board - Header and FooterVideo lesson
-
81Calculating the WinnerVideo lesson
-
82Displaying the WinnerVideo lesson
-
83Determining a Draw ConditionVideo lesson
-
84React Lifecycle EventsVideo lesson
-
85Initializing the GameVideo lesson
-
86Suggesting a Move - Implementing a Computer PlayerVideo lesson
-
87Smart Computer Player (Basic AI)Video lesson
-
88CSS VariablesVideo lesson
-
89Conditional RenderingVideo lesson
-
90Deploy to NetlifyVideo lesson
-
91Deploy to SurgeVideo lesson
-
92Project SummaryVideo lesson
External Links May Contain Affiliate Links read more