COURSE FEATURES
- Duration : Two Months
- Skill level : HighTech
- Course Fee: PKR 30,000
- Admission Fee: PKR 2000
- Examination Fee: PKR 1500
Course Features
- Lectures 84
- Quizzes 0
- Duration 108 hours
- Skill level All levels
- Language English
- Students 25
- Assessments Yes
Curriculum
- 12 Sections
- 84 Lessons
- 12 Weeks
Expand all sectionsCollapse all sections
- Week 1/12: Front-End Web Development Fundamentals6
- 1.1Prelude to HTML, Designing of HTML Web Page with Title Tag, Background Image, Attributes and Basic tags of HTML1 Week
- 1.2Types of CSS, Use CSS to Create Multiple Column Layouts, Construct and Format Forms1 Week
- 1.3Identify and Correct Structural and Compatibility Problems, Use Advanced CSS Selectors, Publish and Deploy Web Content1 Week
- 1.4Creating Responsive HTML using Bootstrap and its tools, Introduction to Jquery.1 Week
- 1.5Walkthrough of the VS Code interface: Editor layout, sidebar navigation and basic settings.1 Week
- 1.6Task 1: Create a simple project in VS Code (basic HTML/CSS webpage or a small JavaScript application)
- Week 2/12: Building Responsive UIs6
- 2.1Bootstrap inclusion in web project (CDN or downloading), Understanding the grid layout and its responsive classes (container, row, and columns), Bootstrap Typography and CSS Classes
- 2.2Use 2D Transforms, Embed Audio and Video in a Web Page
- 2.3Preface to JavaScript Basics with Setting up VS Code for JavaScript development: Installing necessary extensions and configuring settings
- 2.4Functions in JavaScript. Understanding JavaScript functions: Declaration, parameters, return values and scope
- 2.5Setting up Development Environment for React.js
- 2.6Task 2: User Registration and Login (Create a user registration and login system with Bootstrap forms and modals. Use JavaScript for form validation and CSS for styling.
- Week 3/12: Getting start with Full Stack Development7
- 3.1Explanation of React components: Functional vs class components, props and state
- 3.2Advanced React component concepts: Lifecycle methods, event handling and conditional rendering.
- 3.3Styling approaches in React: Inline styles, CSS modules and CSS-in-JS libraries like styledcomponents
- 3.4Configuring CSS modules or styledcomponents in a React project within VS Code
- 3.5Scoping styles to components, importing and applying CSS classes in React
- 3.6Integrating styling components and advanced component techniques into larger React projects or applications.
- 3.7Task 3: Develop a simple application by utilizing essential JavaScript functionalities encompassing methods, conditions, loops, and functions for basic e-commerce website.
- Week 4/12: State, Props, and Routing7
- 4.1Creating and Rendering Components (JSX Syntax)
- 4.2Advanced React Components and Props.
- 4.3Lifecycle methods, event handling, and conditional rendering.
- 4.4Advanced components, managing state updates and passing props dynamically
- 4.5Setting Up React Router, Creating Routes and Navigation
- 4.6Creating Routes, Nested Routes and Route Guards
- 4.7Task 4: Develop a simple application and apply nested routes.
- Week 5/12: Exceptions and error handling8
- 5.1Understanding Exceptions and Error Handling in JavaScript
- 5.2Trycatch blocks, throw statements and handling errors
- 5.3DidCatch method and error handling strategies
- 5.4Installing and Importing the Libraries associated with exception and error handling
- 5.5Applying Error Boundaries to Components
- 5.6Handling Asynchronous Errors, Testing and Debugging Error Boundaries
- 5.7Debugging and Refining Error Handling Strategies
- 5.8Task 5: Modify the app for exception handling using “trycatch” & “didcatch”.
- Week 6/12: Context API, Redux and Hooks8
- 6.1Context API for State Management, Prop Drilling and Context Alternatives
- 6.2Principles of Redux
- 6.3Actions, Reducers, and Store
- 6.4Connecting React with Redux
- 6.5useState() Hook, useEffect() Hook, useContext() Hook
- 6.6useReducer() Hook, useMemo() and useCallback()
- 6.7Advanced Hooks
- 6.8Task 6: Modify the app to inculcate hooks and redux APIs
- Week 7/12: Advanced React Patterns, Techniques, Testing and Deployment8
- 7.1Higher-Order Components (HOCs)
- 7.2Render Props
- 7.3React Hooks Patterns
- 7.4Integrating External APIs
- 7.5Creating a Responsive Dashboard
- 7.6Unit Testing with Jest and React Testing Library
- 7.7Performance Profiling and Optimization Strategies
- 7.8Task 7: Building a Multi-Page Application, perform its testing and deployment
- Week 8/12: Exploring Node.js and NPM7
- 8.1Node.js and Environment Setup, Node.js Fundamentals
- 8.2Node.js File System, Node.js core modules: fs (file system), http, path etc
- 8.3Node.js core modules for file operations, HTTP server creation, and path manipulation
- 8.4Node Package Manager (NPM), Installing packages, managing dependencies and using NPM scripts
- 8.5Creating a package.json file and utilizing NPM commands for package management
- 8.6Advanced NPM Features and Publishing Packages
- 8.7Task 8: Publishing a basic package to the NPM registry and managing versions
- Week 9/12: Web Server creation with Node.js and Debugging7
- 9.1Creating a Basic Web Server with Node.js
- 9.2Writing Node.js script to create a basic web server, handling requests and sending responses
- 9.3Implementing a File Server in Node.js. Understanding file system operations in Node.js: Reading, writing and serving files.
- 9.4Creating a file server using Node.js to handle file requests, read files and serve them over HTTP
- 9.5Debugging in Node.js: Using console.log, debugging with VS Code, and utilizing the Node.js debugger.
- 9.6EventEmitter class and event handling in Node.js.
- 9.7Task 9: Utilize Node.js to establish a web server that work with file server. Debug Node.JS application and work with events in node.js
- Week 10/12: Exploring Express.js and Routing10
- 10.1Setting up Node.js and npm, Creating a Simple Express App
- 10.2Fundamentals and commands of Express JS
- 10.3Implementing Basic Middleware and Handling GET and POST Requests
- 10.4Building RESTful APIs with Express
- 10.5Integrating Templating Engines with Express
- 10.6Building Layouts for Consistent UI
- 10.7Implementing Third-Party Middleware (e.g., Morgan, Body-parser)
- 10.8Error Handling
- 10.9Integrating Front-End with Express.js
- 10.10Task 10: Utilize Express.js framework for building simple applications and integrate template engine
- Week 11/12: Exploring MongoDB (No SQL: MongoDB)10
- 11.1Understanding MongoDB’s Role, Installing MongoDB locally
- 11.2BSON (Binary JSON) Format
- 11.3CRUD Operations in MongoDB
- 11.4Querying in MongoDB (Filtering, Sorting, Limiting and Skipping)
- 11.5Aggregation Framework
- 11.6Indexing and Performance Optimization
- 11.7MongoDB Atlas and Cloud Deployment
- 11.8Data Modeling and Schema Design
- 11.9MongoDB and Node.js Integration
- 11.10Task 11: Utilize Express.js framework in conjunction with MongoDB database for building robust and efficient applications, leveraging Express.js for server-side functionalities and MongoDB for data storage and retrieval.
- Week 12/12: Recap of Course & Final Project preparation0
