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