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