Front End Frameworks - React and Bootstrap

 This course teaches you to utilize frameworks for faster development by exploring popular JavaScript frameworks and Bootstrap. 

We will learn to build a responsive front-end app—a task Scheduler as our class project.

Course Outline 

Week 1 

Introduction to Bootstrap 

Containers, Jumbotron (padded boxes), cards, and headings 

Bootstrap Formatting Elements 

Assignment 1 

Week 2 

Navigation 

Flex and Grid System 

Assignment 2 

Week 3 

Text and Background Colors 

Images 

Carousel 

Alerts and Buttons 

Assignment 3 

Week 4 

Tables, Classes and Responsive Tables 

Badges, Progress Bar, Spinners, and Pagination 

Assignment 4 

Week 5 

List Group, Drop-down, and Collapsible 

Navigation 

Assignment 5 

Week 6 

Modal and off-canvas 

Tooltip and pop-over 

Toast and scroll spy 

Assignment 6 

Week 7 

Forms, select menu, checks, and Radios 

Range and input groups 

Floating labels and form validation 

Part 1 Quiz 

Week 8 

Introduction to React 

Arrow functions, classes, and variables 

Assignment 7 

Week 9 

Array and Array Methods 

Spread and Ternary Operators 

Modules 

Assignment 8 

Week 10 

HTML Render 

JavaScript XML (JSX) 

Components 

Final Project 

Week 11 

Class and Props 

Events and Conditionals 

Assignment 9 

Week 12 

Lists 

Forms and form handling 

Assignment 10 

Week 13 

Router 

Memo 

Assignment 11 

Week 14 

CSS Styling 

Sass Styling 

Part 2 Quiz 

Week 15 

Hooks 

Final Exam 

Week 1

- Lesson 1: Bootstrap containers, cards, headings, and buttons (13:25)

– Lesson 2: Building a Basic Landing Page (5:16)

Assignment 1 

Week 2

- Lesson 1: Bootstrap 5 Navbar: 10:57

- Lesson 2: Navbar with dropdowns: 11:43

Assignment 2

Week 3

- Lesson 1: The Grid Layout Module:  10:59

- Lesson 2: The Flex Module:  7:22

Assignment 3

Week 4

- Lesson 1: Text, Background, and Link Colors:  7:04

- Lesson 2: Alerts and Buttons: 8:53

- Table and Responsive Table: 4:41

Assignment 4

Week 5

- Lesson 1: Images and Carousel - 6:11

- Lesson 2: Badges, Progress Bar, Spinners, Pagination, and List groups: 10:15

Assignment 5

Week 6

- Lesson 1 -  Off-canvas (Modern Slide-out Navigation) - (3:31).

- Lesson 2 -  Modal - (3:48)

- Lesson 3 -  Toast Notification - (2:30)

- Lesson 4 -  Tooltip and PopOvers - (3:22)

Assignment 6

Week 7

-  Lesson 1 - Form Input and Controls (3:55)

- Lesson 2 - Range input and input groups (3:26)

- Lesson 3 - Form Validation (1:57)

- Bootstrap 5 Utility Classes Summary 1 (32:26)

- Bootstrap 5 Utility Classes Summary 2 (23:28)

Part 1 Quiz

REACT

Week 8

- Introduction to React  (8:35)

Assignment 7

Week 9

- Components and Props (22:50)

Assignment 8

Week 10

- React Event  (7:11)

- Conditional Rendering (5:59)

-  useState Hook (45:08)

Week 11

- Forms (19:27)

Final Project 1

Week 12

 - Advance Hook

Week 13

- Router

- Memo

Final Project 2

Week 14

- 

Part 2 Quiz

Week 15

-

Final Exam

Master of Liberal Arts: Software Engineering - Harvard University

Graduate Certificate: Data Science - Harvard University

BSc(Hons) : Mathematical Sciences (Computer Science Major) - Kogi State University