1. FRONTEND DEVELOPMENT
BOOTCAMP
Specialized Frontend Course
Best Place to Became a Developer

2. FRONTEND DEVELOPMENT
BOOTCAMP
Nowadays applications are totally frontend dependent and
users are expecting more interactive and application like in-
terface rather than traditional websites. This Bootcamp will
help you to be a perfect frontend developer using React and
Redux the two most peculiar libraries.
43+ weeks - 2 CPW
A Long Journey for Long Career
Total 86+ Classes
Structured and Detailed Lectures
Regular Fee - 55K BDT
Fruitful Invesment for Your Career

3. What You Will Learn
Web Programming Language (Javascript)
Working with BOM and DOM
Single Page Application (Vanilla JS)
Single Page Application (React)
Application State Management (Redux)
Frontend Application Architecture
Prerequisites
Basic Programming Skills
Basic Web Design Techniques
30 WPM Typing Speed (Minimum)
Laptop and Internet Connection
10 hrs/week Practicing Time (Minimum)
Basic HTML and CSS
Highlighted Technologies
Modern Javascript
BOM and DOM API
React & Redux
React Router and Reach Router
Material UI and Styled Component
Gatsby and NextJS

4. Web Applications development nowadays and developed 5 years back are different. They are different in shape, in look,
in technologies and most importantly the way we develop. Today, websites are not just an URL that is serving some
data. It is more likely an Application. Every day we are getting familiar with new technologies. Our users are expecting
more features, more interaction and an application like flavour. These requirements are changing dramatically.
So choosing the right technologies are pretty embarrassing and of course difficult for us. We have to choose such tech-
nologies which can solve our current and future problems. And of course, it must be also helpful when we need to move
forward. We have designed our frontend camp by keeping all these factors in mind.
We have divided our Bootcamp into following sections -
1 Web Programming Language - Modern Javascript (Vanilla)
7 Modern React using Hooks and Context
8 Manage Application State with Redux
9 Routing Frontend Applications
10 Firebase for Frontend Developers
2 BOM and DOM Manipulation
3 SPA Project (No Framework)
4 Interactive UI with React 11 Styling React Applications
12 Animating React Applications
13 Server Side Rendering - NextJS
14 Group Project
5 Control React Components and Side Effects
6 Understand REST API as A Frontend Developer

5. BOM and DOM Manipulation:
All the content on a web page is rendered by HTML and styled by CSS. But if we want to control the way they render and interact when something happens, we need Javascript.
We have access to the browser and window by Browser Object Model (BOM) which is provided by Browsers. There is no standard implementation, every browser has its own.
And we can access our document by Document Object Model (DOM) which has a standard implementation. As a frontend developer, we must know, how to deal with BOM and
DOM using vanilla Javascript (no libraries or frameworks).
Web Programming Language - Modern Javascript:
To be a frontend developer we have to learn a programming language that can control our browser and document. Javascript is such a powerful language and as a frontend de-
veloper, we can't ignore it. So, we will start our frontend journey by learning Javascript. Javascript is a huge language but in this camp, we will only focus on Modern Javascript
(ES6+) and learn those concepts which we will need on a daily basis.
SPA Project - No Framework:
We use modern third party libraries and frameworks to create single-page applications. Usually, we don't even know how those frameworks work. But everything we do by using
these frameworks is plain vanilla Javascript code. It will be very helpful for our career if we are able to create a basic single page application using only Javascript. By doing this
we are proving that we have a solid understanding of Javascript, BOM, and DOM.
Interactive UI with React:
Though we can create our entire web application using only vanilla Javascript. But it is time-consuming and we have written a lot of duplicate code on every project. That's why
choosing the right library and framework is a good decision. In this course, we will use ReactJS because it is just a tiny library and not a framework. By using ReactJS we can
easily create Interactive UI. If we want to create a complete web application, ReactJS is not enough, we have to implement a lot of different technologies that we will learn later
in this camp.
Control React Components and Side Effects:
React is a very flexible library and we can control almost everything here. In the previous section, we will learn about creating UI using ReactJS but in this section, we will learn
how we can take advances from ReactJS to take control over our application and create some necessary side effects.
Understand REST API as A Frontend Developer:
Now a days as a frontend developer we always have to deal with REST APIs. But We do not need to create it. Backend developers create those APIs and as frontend developer
we just invoke them. As we have to deal with APIs we must have a solid understanding of its charachteristics and how does it work, although we don't need to learn how to
create REST APIs.
Modern React using Hooks and Context:
React team is working continuously to make React more developer-friendly. They are continuously providing updates and new features to us. Currently, the most interesting fea-
tures of React are Hooks and Context API. These APIs make React more flexible, easy to learn, implement and less error-prone. Currently React team is also working on Concur-
rent Mode which is an upcoming feature.

6. Routing Frontend Application:
From the beginning of the web we are using server-side rendering. We will request to a specific URL, our server will response a corresponding web page to that request. But in
the SPA we will have only one page our server will care about. But our users need different pages to understand our applications. To handle this situation usually, we simulate a
routing on the client-side. React didn't come with any built-in routing solution with it. We will use React Router 5 and Reach Router to our React Application.
Firebase for Frontend Developers:
As far frontend developers don't know how to create backend applications and store application state to a database they can't create a complete application. But if we learn Fire-
base we can create complete application because Firebase will take care of the backend part like database, authentication, storage and lot of other important things.
Managing Application State with Redux:
React is a beautiful UI library but its main drawback is managing a multilevel nested application state. React was never good at it. Managing states in React is a big pain for every
React Developer. Here Redux takes place and reduces all the hassle React Create. Redux is the best state management library that is widely used by React Developers. But it is
not limited to React Only.
Styling React Application:
React came with zero styles. We can use inline styles, external CSS, JSS or Styled Component to make our application appearance more acceptable. There are also several com-
ponent libraries available widely using which come with a ton of pre-built components. For example: React Strap - Bootstrap implementation for React, Material UI - Material
design implementation for React, Ant Design and lot more. In our camp, we will learn Styled Component and Material UI.
Animating React Application:
Animations and Transitions are very important components to build interaction between applications and users. We can easily implement mounting animations to React using
CSS keyframe and transitions. But implementing unmounting animations is a bit trickier as React uses virtual DOM. We can delay unmounting by a HOC or use third party anima-
tion solutions like React Spring, React Transition Group and GSAP.
Server-Side Rendering - NextJS:
One of the main drawbacks of Single Page Applications are they render on clients. That's why it takes much time for initial loading. And also this type of applications are not opti-
mized for search engine. One of the best solutions to this problem is Server Side Rendering. We can implement SSR on our own which will render the index page from the server
when requesting and respond to a single HTML page which is much faster compared to client-side rendering. We have another solution to do the same task which is NextJS. In
that case, we don't have to do anything, NextJS will take care of server-side rendering automatically.
Group Projects: We will learn frontend development by implementing a lot of small projects. But we have to learn how to connect all those dots. That's why we have to build
a large project and play as a team player. At the end of the camp, we will teach you how to architect a large frontend project and collaborate with the team. This project will highly
impact on your certification.

7. 01 Orientation Class
02 Bootcamp Planning and Roadmap
03 Frontend Working Environment Setup
- NPM, Babel, Webpack and VSCode
04 Google Chrome Developer Tools
Section No : 0
Total Class: 04 Total Hour: 02
Introduction and Bootcamp Planning
Topics Covered in This Section
Understanding Frontend Development
Bootcamp Planning and Roadmap
Responsibility of A Frontend Developer
This is our orientation class. We will introduce
with each other and celebrate our new journey.
This is a very long bootcamp and we must have
a perfect plan to complete it and obviously
track our progress.
Discuss about google chrome developer tools
NPM, BabelJS, Webpack, Parcel, VSCode and
Plugins, Google Chrome & Extensions

8. 05 Variables, Data Types, Operators
and Basic Operations 06 Control Statements in Javascript
07 Arrays and Objects in Javascript
08 Working with Javascript Functions
09 Inner Function, Lexical Scope
and Closure 10 Understanding Functional
Programming in Javascript
Section No : 01
Total Class: 14 Total Hour: 28
Web Programming - Modern Javascript
Topics Covered in This Section
Programming Fundamentals
ES6+ Class and Inheritances
Arrays and Objects
Functional Programming
Asynchronous Javascript
Scopes, Closure and Execution Context
Error Handling
Control Statements
Variables, Data Types, Operators, Basic
Calculations
Conditions, Loops, Break and Continue, Basic
Functions
Uses of Array, Uses of Objects.
What is Function, Declaring Functions, Invoking
Functions, Parameters and Arguments, Rest
and Spread Operator, Return Statement.
Function Expression vs Function Declaration,
Functions As A Value, Inner Functions, Function
Scope, Lexical Scope, Closure
What is Functional Programming,Pure Function,
First-Class Function, Higher-Order Function,
Callback Function, Recursive Function & Clo-
sure. How to Return Function.

9. 11 Callback Functions, Function
Compositions and Currying 12 Understanding Map, Filter and
Reduce Methods 13 Understand ES6 Classes
14 Understand ES6 Inheritances
15 Error Handling and Debugging
Javascript Code 16 Scope, Closure and Execution Context
17 Asynchronous Programming
in Javascript 18 Common Utility Tools and Recap
Javascript
What is Currying & Function Composition.
Implementation of Array Callback Function
Map, Filter, Reduce, Sort, Find, FindIndex, Some,
Every.
What is Class? How to Declare a Class
Constructor? Class Properties and Methods
Static Methods, Class and Objects
What is Execution Context? Creation and Execu-
tion of A Execution Context. Variable Object
Creation, Hoisting and Variable Object. Scope,
Nested Scope and Lexical Scoping, Scope Chain
What is Error? Why Should We Throw An Error?
How to Handle Errors? Error Handling Using If
Else, Try Catch Block, Create Custom Errors,
VSCode Debugging, Chrome Debugging
What is Inheritance? How to Implement Inheri-
tance? Benefits of Inheritance, Inheritance Real
Life Examples.
Understanding Asynchronous Javascript, Store
Result Returned from Asynchronous Function, How
does Javascript Handle Asynchronous, Behaviour.
AJAX and Callback Function, Promise, Async Await
Destructuring, Short Hand Conditions, Symbols,
For of Loop, Iterator and Generator, Sets and
Maps

10. 19 Understanding Browser Object Model
20 Understand Document Object Model
21 Understanding DOM Elements
and Nodes
22 Manipulating DOM Elements
- Create, Update & Delete 23 Handling DOM Events
24 Forms and Form Validations
Section No : 02
Total Class: 09 Total Hour: 18
Working with BOM and DOM
Topics Covered in This Section
Browser Object Model
DOM Manipulation
Traverse DOM Tree
DOM API
Document Object Model
Create, Update, Delete
Window Object, Document, History, Navigator,
Screen, Location
window.document, Select DOM Elements, DOM
Elemet Properties and Methods, Modify DOM
Elements
What is DOM Element & DOM Node. Element vs
Node, Element Methods, Node Methods, DOM
Traversing
Handling Form Events, Form ValidationsWhat is Event & Event Handling. How to Handle
DOM Events? DOM Events

11. 25 Handling File Uploads
26 Handling Drag and Drop
27 Handling AJAX Requests
What is AJAX? How does it work? How to
implement AJAX?
What are Drag and Drop? Drag and Drop API,
Implement File Upload using Drag and Drop.
What is File? How to Upload Files? Single File,
Multiple Files, Base64 File, Blob Data.

12. 28 Understanding Project and It's
Architecture 29 Create A Tiny DOM Library
30 Create A Tiny AJAX Library
31 Implement Project with Custom
Libraries
Section No : 03
Total Class: 04 Total Hour: 08
Single Page Application Project (No Framework)
Topics Covered in This Section
Project Planning
Creating Own Utility Library
Setup Project File Strucutres
Understanding Requirements
Understand Project Requirements, Create A
Plan for Project, Create A File Structure
Traverse Functionalities, Add or Remove
Functionalities, Basic DOM Utilities
CRUD operations
Custom Directory, Contact APP

13. 32 Welcome to React World
33 Setup Working Environments and
React Components 34 React States in Details
35 Handling Events, Two way Data
Binding and Conditional Rendering 36 Basic Input Elements and
Uncontrolled Forms 37 Controlled Forms and Form
Validations
Section No : 04
Total Class: 11 Total Hour: 22
Interactive UI with React
Topics Covered in This Section
Understanding React
Forms in React
Handling Events
React State
Working with Lists and Tables
Understanding State Lifting
Understanding Formik
React Components and Props
How does ReactJS Work, Technologies We
Need to Work with React, React Core Features,
Javascript Knowledge We Need to Work With
ReactJS, etc.
Data is Everything, What is State in React,
Importance of State in React, How to Define
State, How to Update State, Component Tree
How to Handle Events in React, One Way Data
Binding, Two Way Data Binding, Conditional
Rendering
Input Elements, Basic Forms, Uncontrolled
Forms
Working with Controlled Forms, Working with
Form Validation.
React Custom Environment Setup, Create React
App, Understanding JSX, Understanding React
Components, How to Create Child Components
Pass Data to Child Components using Props.

14. 38 Explore Formik - Form Helper Tool
39 Understanding State Lifting
40 Multiple View Mode - List View,
Table View, Card View
41 Advanced Search, Filter and
Pagination 42 Interactive UI Project
Understanding Formik, Explore Formik API,
Make Hands Dirty with Formik, Form Validation
with Yup
What is State Lifting, How does State Lifting
Work, Why do We Need State Lifting, State
Lifting Real Life Examples
Render Lists, Render Tables, Change View
Mode, CRUD List and Table
Search, Filter, Paginationation, Infinity Loading Implement simple but rich application

15. 44 Component Lifecycle Methods
45 Lifecycle Methods and Side Effects
43 Explore Component API
46 Higher Order Component vs Render
Props 47 Ref vs Forward Ref
Section No : 05
Total Class: 05 Total Hour: 10
Control React Components & Side Effects
Topics Covered in This Section
Component vs Pure Component
HOC and Render Props
Asynchronous Tasks
Component Life Cycle Methods
Error Boundary
Ref and Forward Ref
Component API
What is Ref, How does Ref Work, What is
Forward Ref, Understanding Error B oundary
What is HOC, Why do We Need HOC, Implement
HOC, What is Render Props, How does Render
Props Work, HOC vs Render Props
What is Side Effects, How to Handle Ajax in
React, Explore Axios Library, CRUD Operation
Mounting Methods, Updating Methods,
Unmounting Methods
What is Pure Component, Understand Compo-
nent API, Understand Life Cycle Methods

16. 49 REST API Specifications
50 Create Fake REST API
48 How does REST API Work
Section No : 06
Total Class: 03 Total Hour: 06
Understand REST API as A Frontend Developer
Topics Covered in This Section
Understand REST API
Fake REST API
How to Deal with API
Importance of REST API
How to create a REST API, Create A Fake REST
API
Understand REST API Specification, Testing API
Endpoint, Different API Methods
What is REST API, How does it work, REST API
for frontend Developer

17. 51 The Problem with React State
Management 52 Understanding Context API
53 Understanding New Hooks API
54 Hooks and Context API
55 Performance Optimisation using
Hooks 56 Create Custom Reusable Hooks
Section No : 07
Total Class: 06 Total Hour: 12
Modern React using Hooks and Context
Topics Covered in This Section
Context API
Custom Hooks
Third Party Hooks
Built in Hooks API
useState(), useContext(), useEffect()Explore Context API, Implement Context API,
Context API and Render Props
Understanding React State Management &
Component Tree, The Problem of State and
Props, Context API for Global State
Custom Hooks, Custom FormsuseCallback(), useMemo(), useRef(),
useImperativeHandle(), useLayoutEffect(),
react-use
useReducer(), Create Redux Alternate

18. 57 Choose Right Design Decision in
React 58 Working with Styled Component
59 Working with Material UI Basics
60 Working with Material UI Advanced
Section No : 08
Total Class: 04 Total Hour: 08
Styling React Applications
Topics Covered in This Section
Understanding Redux
React-Redux HOC and Hooks API
Redux Thunk and Saga
Redux Developer Tools
Redux Middlewares
Redux Store, Reducer and Actions
Inline CSS, External CSS, CSS Module, JSS,
Emotion, Styled Component
Basic Styling, Pseudo Elements, Media Queries,
Key Frames, Extend Styles, Dynamic Styles
using Props, Theming Application
Material UI Basics
Material UI Advanced

19. 61 Understanding Redux and It's
Workflow 62 Redux with React Applications
63 Advanced Redux - Middleware
and Enhancers
64 Redux Design Patterns
65 Introducing Redux Toolkit
Section No : 09
Total Class: 05 Total Hour: 10
Manage Application State with Redux
Topics Covered in This Section
Frontend Routing
Redirects
Nested Routing
Query Parameters
Page Not Found Routing
Protected Routes and Redirects
React Router API
React Router API
Modal Routing
URL Parameters
What is Redux, How does Redux Work, Redux
Store, Redux Reducer, Redux Action, Implement
A Small Redux Library
Redux Design Patterns , Custom Middleware,
Action Creator
Understanding React-Redux, Setup Redux for
React Application, Redux Developer Tool
Third-Party Middleware, Custom Middleware,
Actions and Action Creators
What is Redux Toolkit, How to Use It

20. 66 Introduction to Frontend Routing
with React Router 5 67 Advanced Routing with
React Router 5 68 Authentication and Protected Route
69 Easy Complex Routing with
Reach Router
Section No : 11
Total Class: 04 Total Hour: 08
Routing Frontend Applications
Topics Covered in This Section
CSS3
Styled Components
Material UI
Emotion
JSS
CSS Module
Nested Routing, Routing A Modal, Redirects,
Protected Routes, Explore React Router API
Understand Reach Router, Reach Router Setup,
Reach Router workflow
What is Frontend Routing, Implement Frontend
Routing, Basic Routing, No Match Routing,
Setup Routing to A React Project
Fake Authentication Service, Protected Routes

21. Understand Firebase Authentication, Basic
Authentication, Multi Factor Authentications
70 Understanding Firebase and
It's Services 71 Firestore - Realtime NoSQL Database
72 Authentication using Firebase
73 Cloud Storage and Hosting
74 Firebase Cloud Functions
Section No : 10
Total Class: 05 Total Hour: 10
Firebase for Frontend Developers
Topics Covered in This Section
Understanding Frontend Development
Bootcamp Planning and Roadmap
Responsibility of A Frontend Developer
What is Firebase, Firebase Services, How to
work with Firebase, Install and work with Fire-
base
Understand Firebase Cloud Storage, Under-
stand Firebase Hosting, Deploy Application
using Firebase
Understand Firestore Database, Query and
Structure of Data, Work with Firestore
What is Cloud Function, How does Cloud Func-
tion work, What is Firebase Cloud Function,
Work with Firebase Cloud Function

22. 75 How to Animate React Components
76 Animate on Unmount Components
77 React Animation using Green Sock
78 React Animation using React Spring
Section No : 12
Total Class: 04 Total Hour: 08
Animating React Components
Topics Covered in This Section
CSS Animation
React Spring
Green Sock Animation Library
React Transition Group
Delayed Higher Order Component
React Spring Library, Working with React Spring
Animation Concepts, CSS Animation,
Animation Problem with React Components
Delayed Component, React Transition Group Green Sock Library, Green Sock with React

23. 79 Understanding Server Side Rendering
80 Explore NextJS API
81 Implement NextJS Projects
Section No : 13
Total Class: 03 Total Hour: 06
Server Side Rendering - NextJS
Topics Covered in This Section
Understanding Server Side Rendering
Explore NextJS API
What is SSR, Why should We use SSR, SSR
Implementations, SSR and NextJS
Understand Basics of NextJS Advanced Concepts of NextJS

24. 82 Project Architecture and Planning
83 Creating Application Layout
84 Understand Git and Workflow
85 Project Management Techniques
86 Team Collaboration and Remote Work
Section No : 14
Total Class: 05 Total Hour: 10
Group Projects
Topics Covered in This Section
Git and Github
Project Layout
Project Architecture
Project Management with Trello
How to create architecture for project Application Layout, Routing Git,Git Flow, Commit, Push, Pull Request,
Merge, Github
Project Managements Necessary Software, Techniques

25. BACKEND DEVELOPMENT
BOOTCAMP
CLASS
120+
TIME
60+ WEEK
BOOST YOUR BASE
BOOTCAMP
UI/UX & WEB DESIGN
BOOTCAMP
CLASS
100+
CLASS
52+
TIME
50+ WEEK
TIME
26+ WEEK