graph subgraph Client["Client Side <br/> **Browser**"] A[🖼️ HTML/CSS<br/> **Presentation**] B[⚡ JS<br/> **Interaction**] C[🧭 Browser APIs<br/> **Storage**] end subgraph Net["Network"] D[🌐 HTTP/HTTPS<br/> **Requests**] end subgraph Server["Server Side"] E[🖥️ Server<br/>Node/Express<br/> **App Logic**] F[🗄️ Database<br/>MySQL] end A --> D B --> D C --> D D --> E E --> F
Introduction — Web Development & E‑commerce
Introduction to the Course & Core Concepts
Overview of course goals, core web-development concepts for e‑commerce, and AI-assisted tools.
About the Lecturer
Emmanuel BRUNO
Position: Associate Professor, University of Toulon
Affiliation: Information System Laboratory (LIS) — UMR CNRS 7020
Teaching areas: Advanced coding, collaborative tools, CI/CD
Research: Information retrieval, recommendation systems, data querying
Contact:
- Discord: Channel in course server (Prefer this for quick questions)
- Email: emmanuel.bruno@univ-tln.fr
Course Overview
From Foundations to Full-Stack E-commerce
We start with AI tools on Day 1. Before refreshing HTML/CSS and diving into JavaScript, you’ll learn to use GitHub Copilot and LLMs effectively.
These tools will accelerate learning and mirror modern professional workflows — but they’ll never replace understanding the fundamentals.
Learning Objectives 🎯
By the end of this course, you will be able to:
- Build complete web applications using modern full-stack technologies (React, Node.js/Express, MySQL)
- Leverage AI tools effectively (GitHub Copilot, ChatGPT) to accelerate development while understanding the code you generate
- Design and implement RESTful APIs that connect frontend interfaces to backend services and databases
- Apply client-server architecture to create scalable, maintainable e-commerce solutions
You’ll learn to apply your existing server-side concepts (routing, sessions, database queries) in the JavaScript ecosystem, gaining skills to work on modern single-page applications and API-driven architectures.
Learning Path: From Frontend to Full-Stack
- Session 1 : Foundations & AI Tools
- Kickstart with LLMs and GitHub Copilot
- HTML/CSS essentials using AI assistance
- Session 2: JavaScript Fundamentals
- Session 3: Frontend Development with React
- Session 4: Backend Development with Node.js & Express
- Session 5: MySQL Database & Persistence
- Session 6: Final exam & Full-Stack Integration & Deployment
Capstone Project: E-commerce Platform
- A very simple product catalog application to illustrate full-stack concepts
- A react front end with product listing
- An Express backend with REST API
- A MySQL database for persistence
- See https://github.com/ebpro/fullstack-minimal-app/ for the project source code.
- See https://github.com/ebpro/fullstack-minimal-app/blob/develop/LEARNING_NOTES.md for learning notes about the project.
- A base for building more complex e-commerce features :
- You will create a Multi-Source Product Review Aggregator see ‘webdev_01_P_00_Project_MultiSourceProductReviewAggregator’ document.
Why Web Development Matters for E-commerce
🎯 Product & UX Decisions
- Technical feasibility assessment
- Data-driven design decisions
- Third-party integration evaluation
- Conversion-optimized experiences
💬 Team Communication
- Speak developer language
- Accurate timeline estimation
- Identify technical debt
- Bridge business-tech gap
⚡ Competitive Advantage
- Rapid prototyping
- A/B testing implementation
- Technical SEO mastery
- Performance optimization
🔧 Practical Applications: not only websites to sell
- Custom analytics
- Marketing automation
- API integrations
The Internet: Physical Infrastructure 🌐
What it is:
- Global networking infrastructure
- Physical cables, routers, data centers
- TCP/IP protocols
- DNS for name resolution
Analogy:
- Like the global postal system infrastructure
Supports multiple services:
- Web (HTTP/HTTPS)
- Email (SMTP/IMAP)
- File Transfer (FTP)
- Streaming (WebRTC)
The World Wide Web: Application Layer 🕸️
What it is:
- Application layer on top of Internet
- Uses HTTP/HTTPS protocols
- Resources identified by URLs
- Documents transferred via HTTP
Analogy:
- Like mail services using postal infrastructure
Web Components:
- HTML/CSS/JS for presentation
- URLs for resource location
- APIs for data exchange
- Browsers as client applications
Key Differences for Developers
Internet (Infrastructure)
Internet = The Network
├── Physical Layer (cables, routers)
├── Network Layer (IP addresses)
├── Transport Layer (TCP/UDP)
└── Supports multiple services
├── Web (HTTP/HTTPS)
├── Email (SMTP/IMAP)
├── File Transfer (FTP)
└── Streaming (WebRTC)
Web (Service)
Web = Service on Internet
├── HTTP/HTTPS Protocol
├── URLs for resource location
├── HTML/CSS/JS for presentation
├── APIs for data exchange
└── Browsers as client applications
The World Wide Web - Historical Foundation (1989-1991)
-Tim Berners-Lee’s Vision: A system of interlinked hypertext documents accessible via the Internet
- Hypertext: Text with clickable links to other documents
- Universal addressing: Every resource has a unique URL
- Platform independence: Works across different computer systems
- Decentralized architecture: No single point of control
Web Evolution: From Static Pages to Dynamic Applications 1/2
The web has evolved far beyond static documents into a global application platform:
Web 1.0 (1990s) - Static Information Sharing
- Read-only web pages
- Simple HTML and basic CSS
- Limited interactivity
- Example: Company brochures online
Web 2.0 (2000s-2010s) - Interactive & Social
- User-generated content
- AJAX for dynamic updates
- Social media platforms
- Rich web applications
- Example: Facebook, YouTube, Gmail
Web Evolution: From Static Pages to Dynamic Applications 2/2
Web 3.0 (2010s-Present) - Smart & Connected
- AI-powered applications
- Real-time collaboration
- Progressive Web Apps (PWAs)
- API-first architecture
- Example: Modern e-commerce platforms
Web 4.0 (Emerging) - Intelligent & Immersive
- AI integration everywhere
- Voice and gesture interfaces
- AR/VR experiences
- IoT connectivity
- Example: AI shopping assistants
Core Web Technologies Today
Content & Structure
- HTML5: Semantic markup, multimedia support, offline capability
- CSS3: Advanced layouts (Grid, Flexbox), animations, responsive design
- JavaScript (ES2024): Full programming language, async/await, modules
Modern Web Capabilities
- APIs: RESTful services, GraphQL, real-time WebSockets
- Storage: Browser databases, offline-first applications
- Security: HTTPS everywhere, Content Security Policy, authentication
Client/Server Architecture
Client Responsibilities (Browser - Frontend) 🖥️
Presentation Layer
- Render HTML/CSS: Create visual layout and styling
- Execute JavaScript: Handle user interactions and dynamic behavior
- Manage state: Store user preferences, shopping cart contents
- Performance optimization: Caching, lazy loading, code splitting
User Experience
- Form validation: Immediate feedback before server submission
- Responsive design: Adapt to different screen sizes and devices
- Accessibility: Screen reader support, keyboard navigation
- Progressive enhancement: Work with or without JavaScript
Server Responsibilities (Backend) ⚙️
Core Functions
- Request handling: Process HTTP requests
- Business logic: Calculate prices, validate inventory, process payments
- Data persistence: Read/write to databases, manage transactions
- Security: Authentication, authorization, input validation
E-commerce Specific Tasks
- Inventory management: Real-time stock tracking, reservation systems
- Payment processing: Integration with Stripe, PayPal, etc.
- Order fulfillment: Generate shipping labels, update tracking
- Analytics: Track user behavior, sales metrics, performance data
URLs: The Addressing System of the Web
URLs are fundamental to web development and crucial for e-commerce applications. Understanding URL structure helps with SEO, security, and user experience.
https://shop.example.com:443/products/sneakers?color=red&size=10#reviews
│ │ │ │ │ │
│ │ │ │ │ └─ Fragment (client-side)
│ │ │ │ └─ Query parameters
│ │ │ └─ Path (resource location)
│ │ └─ Port (optional, defaults: 80/443)
│ └─ Host/Domain (server location)
└─ Scheme/Protocol (how to connect)
HTTP: The Communication Protocol
- HTTP is the protocol browsers and servers use to exchange data (requests → responses)
- Secured by HTTPS (HTTP over TLS) for encryption and integrity
- Used to get web pages and resources from servers (like with PHP)
- Can also be used to send queries and data (e.g., search filters)
- Fetch product lists (GET), adding items or creating orders (POST)
PHP (Your Background)
Strengths & Use Cases
- Server-side rendering: Excellent for traditional web applications
- Mature ecosystem: WordPress, Laravel, Symfony frameworks
- Easy deployment: Most shared hosting supports PHP
- Database integration: Strong MySQL/MySQL support
Common PHP Frameworks:
- Laravel: Full-featured framework with ORM, routing, authentication
- Symfony: Component-based framework, enterprise-focused
- WordPress: CMS with e-commerce plugins
JavaScript (Full-Stack)
Why JavaScript Everywhere?
- One language: Frontend and backend with same syntax
- Real-time capabilities: WebSockets, live updates
- JSON native: Perfect for APIs and data exchange
- Modern async: Promises, async/await for non-blocking operations
JavaScript Advantages:
- Unified development: Same language for frontend/backend
- Rich ecosystem: npm has 2+ million packages
- Performance: V8 engine optimization, non-blocking I/O
- Modern features: ES6+ syntax, modules, destructuring
Why We Choose JavaScript for This Course
JavaScript is the course focus for three concise reasons:
- Unified language across frontend and backend, reducing context-switching and speeding development.
- Modern web patterns support (SPAs, API-first design, real-time WebSockets) and strong mobile tooling (React Native, Ionic).
- Widespread industry adoption and strong job demand—common in startups and large companies (e.g., Netflix, Uber, PayPal).
Traditional Learning (Old)
flowchart LR A[📚 Read Docs] --> B[💭 Memorize Syntax] B --> C[⌨️ Type Everything] C --> D[🐛 Debug Errors] D --> E[🔍 Google Solutions] E --> F[✅ Working Code] style F fill:#90EE90
Challenges:
- Slow iteration
- High cognitive load
- Syntax memorization focus
- Trial and error heavy
AI-Assisted Learning (New)
flowchart LR A[💡 Define Requirements] --> B[🤖 AI Generates Code] B --> C[👀 Review & Understand] C --> D[✅ Verify & Test] D --> E{Works?} E -->|Yes| F[📚 Learn Pattern] E -->|No| G[🔄 Refine Prompt] G --> B style F fill:#90EE90
Advantages:
- Fast prototyping
- Focus on concepts, not syntax
- Learn by reviewing
- More time practicing
What You’ll Gain by Learning AI-First
- ⚡ Faster Development — Generate boilerplate in seconds
- 📚 Better Learning — See multiple approaches to problems
- 🎯 Focus on Architecture — Less time on syntax, more on design
- 🐛 Smarter Debugging — AI explains complex error messages
- 📖 Built-in Documentation — Generate comments and docs instantly
- 🌍 Industry Alignment — Learn tools used in 2025 workplaces
AI doesn’t replace learning fundamentals. You still need to:
- Understand HTML semantics (AI makes mistakes)
- Know CSS specificity (to verify AI suggestions)
- Master JavaScript concepts (to spot logical errors)
- Think architecturally (AI follows your lead)