• Home
  • About Us
    • Who we are?
    • Vision, Mission & Core Values
    • Management
    • Our Instructors and Staff
  • Courses
    • Premium Courses
    • Basic Courses
  • KAKTI’s Media
  • Blog
  • Contact Us
    • Home
    • About Us
      • Who we are?
      • Vision, Mission & Core Values
      • Management
      • Our Instructors and Staff
    • Courses
      • Premium Courses
      • Basic Courses
    • KAKTI’s Media
    • Blog
    • Contact Us
  • Home
  • About Us
    • Who we are?
    • Vision, Mission & Core Values
    • Management
    • Our Instructors and Staff
  • Courses
    • Premium Courses
    • Basic Courses
  • KAKTI’s Media
  • Blog
  • Contact Us
Register Now

Web Design & Development – Mern Stack

> Web Design & Development – Mern Stack

Web Design & Development - Mern Stack Course in Lahore, Pakistan

• Course Duration: 3 Months
• Days: 3 days a week
• Hours: 1.5
• Status: Online & On-Campus
• New Session: Every month
• WhatsApp: 0302 895 7000
• Website: www.kakti.pk
• Address: 116-P, MM Alam Road, Mini Market, Gulberg II, Lahore
• Google Map: https://bit.ly/3iPh4Yf

Course Outline

What you’ll learn

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

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

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

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)

Project 1 - HTML 5 Template PSD to HTML

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

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

Redux - Application State Management

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

Node.js - Server Side JavaScript

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

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

Register Now
Download Course Outline
Back

We are offering short courses of Information Technology, social media management and many others for deserving students taught by experienced instructors to contribute towards the betterment of our society.

Address

  • 116-P Gulberg II, MM Alam Road, Lahore, Pakistan
  • +92 (42)35778636-7
  • info@kakti.pk
  • +92 302 895 7000

Popular Courses

  • YouTube Mastery
  • Google Ads Course in Lahore, Pakistan
  • 2 Month Graphic Designing Course
  • Web Design & Development – Mern Stack
  • Spoken English Course in Lahore, Pakistan
  • 3 Month Python & Data Science Course

Recent Posts

Graphic Designing Course in Lahore
Graphic Designing Course in Lahore
  • December 6, 2022
WordPress Training Center In Lahore
WordPress Training Center in Lahore
  • November 19, 2022

Copyright 2022 KAKTI. All Rights Reserved.

  • Blog
  • Contact Us