Introduction to the Course & Core Concepts
2025-10-12
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:
From Foundations to Full-Stack E-commerce
🚀 New in 2025: AI-First Learning and Development
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.
By the end of this course, you will be able to:
For PHP Developers
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.
🎯 Product & UX Decisions
💬 Team Communication
⚡ Competitive Advantage
🔧 Practical Applications: not only websites to sell
What it is:
Analogy:
Supports multiple services:
What it is:
Analogy:
Web Components:
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-Tim Berners-Lee’s Vision: A system of interlinked hypertext documents accessible via the Internet
The web has evolved far beyond static documents into a global application platform:
Web 1.0 (1990s) - Static Information Sharing
Web 2.0 (2000s-2010s) - Interactive & Social
Web 3.0 (2010s-Present) - Smart & Connected
Web 4.0 (Emerging) - Intelligent & Immersive
Content & Structure
Modern Web Capabilities
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
Presentation Layer
User Experience
Core Functions
E-commerce Specific Tasks
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)Strengths & Use Cases
Common PHP Frameworks:
Why JavaScript Everywhere?
JavaScript Advantages:
JavaScript is the course focus for three concise reasons:
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:
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:
But Remember!
AI doesn’t replace learning fundamentals. You still need to:
JavaScript Full‑Stack Course — Quick Summary
See the full Course Guide → webdev_00_L00A_CourseGuide
E. Bruno - Introduction — Web Development & E‑commerce