Full Stack Web Developer Champion

• Understanding the full stack ecosystem. • The roles and responsibilities of a full stack developer. • What is web App? How it works? • Evolution from traditional web app to Front End Apps. • Development, Performance, Modularity, Testability. • Use and advantages of using VS code. • Use of Extensions in VS code.

---

• Intro to HTML. • Basic Layout, Live server. • HTML Structure and semantics, Html entities. • Meta tags, Typography, Links, Images. • Lists Tables, Forms Input. • Block inline, Ids and Classes. • FreecodeCamp & HTML practice questions.

---

• Fundamentals of CSS. • Advanced CSS, Flex Grid. • Basics. • Selectors. • Font. • Color. • Background Colors. • Box Model. • Float Align. • Link Button. • Menus. • Inline Block. • Position. • Form designing and styling. • Create hero units and parallax effects with position props and build simple templates.

---

• Introduction to Bootstrap. • Bootstrap classes. • Bootstrap components. • Importing bootstrap. • Create a responsive image gallery.

---

JavaScript Basics • Include JS in HTML. • Introducing JavaScript. • JavaScript Getting Started. • JavaScript Language Fundamentals. • Variables. • Data Types. • Operators. • Functions. • Loops. • Conditions. • Array. • Objects. • Events. • DOM. JavaScript Advanced • Hoisting. • Scope. • Difference between let, var and const. • Arrow functions vs Normal functions. • Objects. • Callbacks. • Promises. • Closures. • Asynchronous JS. • This. • Map. • Filter. • foreach. • Push. • Pop. • Object Methods. • Work on functions, map filter finds methods, work with network calls • Task on Contact Manager Application to view and add contacts, delete Contact and Edit Contact

---

• Introduction to jQuery. • Selectors. • DOM manipulation. • Forms & Events. • AJAX. • Plugins. • UI. • Mobile. • Build dynamic web applications using jQuery.

---

Introduction to Angular • Building Blocks of Web Application Development. • Web Application Architecture. • Introduction to Angular. • Comparison between front-end tools. • Angular Architecture. • Building blocks of Angular. • Angular Installation. • Angular CLI Overview. • Angular CLI commands. • Angular Modules. • Files in Angular. Components • Working of Angular Applications. • Angular App Bootstrapping. • Angular Components. • Creating A Component Through Angular CLI. • Ways to specify selectors. • Template and styles. • Installing bootstrap to design application. • Data Binding. • Types of Data Binding. • Component Interaction using @Input and @Output decorator. • Angular Animations. • Component Life-cycle Hooks. Databinding and Animations • Databinding. • Types of Databinding. • Component Interaction using @Input and @Output decorator. • Angular Animations . • Component Life-cycle Hooks. Directives and Pipes • Angular Directives Overview. • @Component Directive. • Structural Directives. • Attribute Directives. • Custom Directives. • Pipes. • Built-in Pipes. • Chaining pipes. • Custom pipes. • Pipe Transform Interface & Transform Function. Services & Dependency Injection • Angular service. • Need for a service. • Dependency Injection. • Creating a service. • Hierarchical Injector. • Injecting A Service into Another Service. RxJS HTTP Client • RxJS Library. • Angular’s Interaction with Backend. • Parts of an Http Request. • HttpClient. Routing • Angular Router. • Setting Up Routes. • Adding Routes Using RouterLink. • Wildcard and Redirecting Routes. • Adding Navigation Programmatically. • Passing Route Parameters. • Extracting Parameters Using ActivatedRoute. • Optional Route Parameters. • Child Routes. • Route Guards. • Location Strategies. Forms • Angular forms. • Types of forms. • Underlying building blocks of the form model. • Template-driven vs Reactive forms. • Template-driven forms. • Reactive Forms & Dynamically adding data to a form. • What is Form Validation? • Types of Form Validation. • Built-in Validators. • Form control’s status and validity. • Form Validation methods. • CSS classes for Form control. • Custom validators in Template Driven Forms. Authentication with JWT and Security • What is Authentication? • Authentication and authorization. • Types of Authentications. • Where to store tokens? • JSON Web Tokens (JWT). • Authentication in Angular application. • Security threats in web application. Tasks • Task 1: Develop single-page applications with Angular.

---

Introduction to ReactJS • Why businesses should use ReactJS. • Comparing JavaScript, Angular, and ReactJS. • What makes developers prefer to React over Angular. • Understanding unified data store and its importance. • How exactly ReactJS works. • Reading Task on Features of React and features over Angular JS. Introduction to JSX • What is JSX. • Conditional rendering. • Expressions in JSX. • Specifying children with JSX. • Build a simple product catalog using JSX Elements applying JSX rules. Components in React • What is JSX? • Functional vs Class components. • Components Lifecycle. • Pure Components. • Higher Order components.   Tasks Task 1: Create a Web Page (utilize JSX elements) Header, Body - Aim and Scope , About Us , Gallery , Contacts - Contact Form, Footer. Task 2: Using Props (Display 10 products) Product Catalog Page, product image , link , desc , price and add to cart. Task 3: Revise your product Catalog with data imports into components. Task 4: Create a simple class component and work with props. Task 5: Understand LCM and create a flow chart. Task 6: Create two components for different category of products and style it. State, Props, Event Handling • What is State and its significance. • Passing data to component using props. • Validating props using prop Types. • Supplying default values to props using default Props. • Understanding React event system. • Understanding Synthetic events. • Passing arguments to event handlers. Tasks Task 1: Default : Log In - true (Parent Component) true -> Dashboard (separate component) | false- > sign in(sep comp) Page ( signup) (comp) Task 2: Counter Component + 0 - + -> state by 1, - update by ->1 Task 3: Create a HOC Component for two different product categories and filter by product name Task 4:Create a component to display an element and hide an element using React Events Navigation & Routing • Setting up react-router. • Understand routing in single-page applications. • Working with Browser Router and Hash Router components. • Configuring route with Route component. • Using Switch component to define routing rules. • Making routes dynamic using route params. • Working with nested routes. • Navigating to pages using Link and Nav Link component. • Redirect routes using Redirect Component. • Using Prompt component to get the consent of the user for navigation. • Pathless Route to handle failed matches.   Tasks Task 1: Create a simple Router setup for login and dashboard pages. Task 2: Work on optimization of TODO App and score board. Task 3: Styling Score Board Application and working on code splitting. Task 4: Reading task on difference between v5 and v6 of react router DOM. Hooks in React • Introducing Hooks, Hooks at a Glance. • Using the State Hook. • Using the Effect Hook Rules of Hooks. • Building Your Own Hooks Context. • Context in Class. • Functional Components Updating / Consuming contexts. Tasks Task 1: useState() with contact manager app. Task 2: create a custom hook for counter component , using useffect create contact manager app. Task 3: Create a context to update a central count value and theme changer app. Managing state using Redux • What is Redux. • Store, Actions, Reducer. • Redux with React. • Redux Thunk. • Async Calls and Middleware’s with Redux. • Redux Best practices. Tasks Task 1: Create a simple counter app with core redux. Task 2: Create a CRUD app using async calls.   Handling Forms • Creating a Custom Dynamic Input Component Refs, Controlled elements. • Handling multiple inputs & common errors. • Creating reusable controlled elements Basic data Validation. • Custom validation using joi-browser. Tasks Task 1: Form validation tasks using ref's. Tasks 2: Form validation tasks. Tasks 3: Create a registration form and apply JOI schema. Authentication & Authorization • Authentication using JWT. • Storing tokens in Session/Local Storage. • Using Cookies for authentication. • Managing Role based access. Tasks Task 1: Working with register, Sign-in, Sign-out and implement token storage to global store. Task 2: RBA for admin and end users. Testing React Components • Using React Testing Library. • Unit Testing with Jest, Enzyme. Engineering Practices • Code Repository CI / CD Code Modularity. • Cross-cutting Concerns. • Code Standardization, Troubleshooting, Performance, Key Software Diagrams.

---

Introduction to Backend Development • An overview of How the web works. • HTTP in Action. • Front-End vs. Back-End Web Development. How Node js works: A Look Behind the Scenes Intro. • The Node.js Event Loop. • The Event Loop in Practice. • Events and Event-Driven Architecture. • Events in Practice. • Introduction to Streams. • Streams in Practice. • What Requiring Modules Really Works. • Requiring Modules in Practice. Note Taking App (Console Application) • Intro. • Importing node js core modules. • Importing your own files. • Importing npm modules. • Printing in color. • Global npm modules and nodemon.   File System and command line args • Intro: File System and Command Line Args. • Getting Input from Users. • Argument Parsing with Yargs: Part I. • Argument Parsing with Yargs: Part II. • Storing Data with JSON. • Adding a Note. • Removing a Note. • ES6 Aside: Arrow Functions. • Refactoring to Use Arrow Functions. • Listing Notes. • Reading a Note. Debugging Node js (Note Taking App) • Section Intro: Debugging Node js. • Debugging Node js. • Error Messages. Module 10: Express • Introduction to Express. • What is Express.js? • Installing Express.js. • Adding Middleware. • How Middleware Works? • Express.js - Looking Behind the Scenes. • Handling Different Routes. • Time to Practice - Express.js. • Parsing Incoming Requests. • Limiting Middleware Execution to POST Requests.   • Using Express Router. • Adding a 404 Error Page. • Filtering Paths. • Creating HTML Pages. • Serving HTML Pages. • Returning a 404 Page. • Using a Helper Function for Navigation. • Styling our Pages. • Serving Files Statically. • Time to Practice – Navigation. • Wrap Up. Tasks Task 1: Build RESTful APIs using Node.js and Express.

---

• Introduction to Express. • What is Express.js? • Installing Express.js. • Adding Middleware. • How Middleware Works? • Express.js - Looking Behind the Scenes. • Handling Different Routes. • Time to Practice - Express.js. • Parsing Incoming Requests. • Limiting Middleware Execution to POST Requests.   • Using Express Router. • Adding a 404 Error Page. • Filtering Paths. • Creating HTML Pages. • Serving HTML Pages. • Returning a 404 Page. • Using a Helper Function for Navigation. • Styling our Pages. • Serving Files Statically. • Time to Practice – Navigation. • Wrap Up. Tasks Task 1: Build RESTful APIs using Node.js and Express.

---

• What is MongoDB? • Installing MongoDB. • Creating a Local Database. • CRUD: Creating Documents. • CRUD: Querying (Reading) Documents. • CRUD: Updating Documents. • CRUD: Deleting Documents. • Using Compass App for CRUD Operations. • Creating a Hosted Database with Atlas. • Connecting to Our Hosted Database. Tasks Task 1: Create MongoDB databases and collections. Task 2: Develop data models and perform CRUD operations.

---

Project Technology Personal Website HTML Restaurant Menu Design HTML Personal Website (CSS Styling) HTML + CSS Basics Personal Website Responsive HTML + CSS + Responsive Tours Website HTML + CSS + Responsive + Flexbox + CSS Grid HTML CSS (Capstone Project) HTML + CSS + Responsive+ Flexbox + CSS Grid + Animations Contact Manager App (MPA and SPA) HTNL+CSS+Bootstrap+JS Movie App HTML+CSS+React+Redux Student Leaderboard App HTML+CSS+React JS Chat App Node JS + Express JS DecorForHome - E commerce Full stack app or similar Capstone Project Details • Integration: Connecting front-end and back-end. • Authentication and Authorization: User management, security best practices. • Deployment: Cloud platforms (AWS, GCP, Azure), CI/CD pipelines. Tasks • Task 1: Build a complete full-stack web application. • Task 2: Implement authentication and authorization. • Task 3: Deploy the application to a cloud platform.

---