![Frontend Development Bootcamp - React [Online & Offline] In Bangla](https://image.slidesharecdn.com/frontendbootcamotemplate-200705134421/85/Frontend-Development-Bootcamp-React-Online-Offline-In-Bangla-26-320.jpg)
Frontend Development Bootcamp - React [Online & Offline] In Bangla
- 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