Web Development

Innovation never ends

Web Development Course in Lahore, Pakistan

  • Course Duration:  2 Months
  • Days: 3 days a week
  • Hours: 1.5
  • Status: Online & On-Campus
  • WhatsApp: 0302 895 7000
  • Website: www.kakti.pk
  • Address: 116-P, MM Alam Road, Mini Market, Gulberg II, Lahore
  • Google Map: Khurshid Akhtar Khan Training Institute

Course Outline

WHAT YOU’LL LEARN

Web Development Course Content

LEARNING

Creation of website, designing of website using HTML, JAVA Script, CSS, React.js,Node.js,State Management, React Admin Dashboard, React/Node End to End E-Commerce Application & others.

INTRODUCTION

  • History & Anatomy of Internet / World Wide Web (WWW)
  • Web Browsers Chrome, Firefox, Safari & Edge
  • HTML5 (Structure), CSS3 (Makeup), JavaScript (Behavior)
  • Chrome Developer Tools & Extensions
  • Visual Studio Code IDE & Extensions

Module 1

HTML 5 (Structure / Markup)

  • HTML 5 Basic Structure
  • HTML 5 Elements / Tags
  • HTML 5 Semantic Elements
  • Block Level Elements & Inline Elements
  • HTML 5 Document
  • HTML DOM (Document Object Model) Browser BOM (Browser Object Model)
  • HTML 5 APIs
  • Geolocation, Drag/Drop, Web Storage, Web Workers, SSE(Server-Sent Events), Canvas 2D, SVG, WebRTC, Web
  • Sockets, Speech,
  • XMLHttpRequest, Offline, History, File, Audio/Video
  • HTML 5 Forms

Module 2

CSS 3 (Makeup)

  • Inline CSS, Internal CSS & External CSS
  • Cascade Rules
  • Selectors (global, element, id, class, pseudo classes, pattern selectors)
  • Typography Font Pairing, 12/16/24 Column Grid and Baseline Grid
  • Measurement Units fixed and relative
  • CSS3 Box-Model: Padding, Margin, Border, Background, Content
  • CSS 3 Layout Techniques display: block, inline, inline-block, grid, flex
  • CSS 3 Positioning position: static, relative, fixed, absolute, sticky, floats, overflow
  • CSS 3 image sprites, shadows, gradients, rounded corners, text effects, web fonts
  • CSS3 Media Queries in Detail & Creating fully Responsive Web Pages
  • CSS3 2D 3D Transformation, Transitions, Animations
  • CSS Preprocessors: SASS, LESS

Module 3

JavaScript (Behavior)

  • Introduction to JavaScript
  • Setup Development Environment
  • Basics (variables, constants, primitive types, objects, arrays, functions, function types)
  • Operators (arithmetic, assignment, comparison, equality, ternary, logical, bitwise, operator precedence)
  • Control Structure (if/else, switch/case, for for-in for-of while do-while loops, break/continue)
  • Truthy and Falsy Concept
  • Document Object Model (DOM), Browser Object Model (BOM)
  • JavaScript Execution Environment
  • Browser vs NodeJS
  • Advanced JavaScript Concepts (Execution Context, Closures, Hoisting)

Module 4

React.js – Advanced JavaScript Framework

  • Introduction to Advanced JavaScript Framework
  • React vs Angular vs Vue
  • React vs JavaScript
  • Single Page Application (SPA)
  • Component Based Development
  • Hooks useState, useEffect
  • Class Components vs Functional Components

Module 5

State Management

  • Introduction Redux
  • Component Level State vs Application Level State
  • Implement Redux Architecture

Module 6

Node.js – Server Side JavaScript

  • Introduction Node
  • Google V8 Engine
  • Express.js
  • MongoDB and
  • Mongoose ORM

Project 1

HTML 5 Template PSD to HTML

  • Introduction
  • Website Structure
  • Prepare Workspace & Header Markup
  • Main Banner & Light BG Feature List
  • Dark BG Feature List
  • Testimonials
  • Gallery & Footer Slice images from PSD
  • Logo, Textures, Misc. Images
  • Creating Sprites Image
  • Style with CSS
  • Reset CSS, Bootstrap Grid, Less Variables and Mixins
  • General Styling and Google Fonts
  • Top Header and Button Styling
  • Styling the Icons + CSS Sprites
  • Main Banner Styling and Single Field Form
  • Styling the Blockquote in the Main Banner
  • Light Background Feature Section
  • Dark Background Feature Section
  • Customers Section
  • Styling Footer
  • JavaScript/jQuery
  • Using jQuery To Power The Gallery
  • Finishing
  • Styling The Gallery
  • Making Retina-Ready Images
  • FOUT Eliminate (Flash of Unstyled Text)
  • Responsive Layout (Bootstrap Grid and Media Queries)
  • Cross-Browser Testing

Project 2

React Admin Dashboard

Project 3

React / Node End-to-End E-Commerce Application

  • Home Screen, Product Screen
  • Shopping Cart
  • Authentication & Role-Based Authorization
  • Checkout Wizard
  • PayPal Integration
  • User Profile and Orders
  • Admin Products
  • Admin Orders
  • Admin Users
  • Multi-Vendor Capability
  • Searching and Sorting
  • Rating and Review
  • Pagination
  • Upload Products on Amazon Cloud AWS S3
  • Sales Dashboard with Charts and Graphs
  • Help Desk System Live Chatting with Customers
  • Real-Time Application Development using Socket.IO
  • Live Location Tracking
  • Unified Communication using WebRTC and Socket.IO

Download Course Outline
Register Now
Return Back
Scroll to Top