Web Application Dictionary Part I — User Interface (GUI) Chapter 1. Basic Layout Header Footer Sidebar Toolbar Navigation Bar Content Area Panel Pane Card Container View Viewport Region Each term would include: Panel Definition A rectangular area that groups related controls. Example A panel containing all search filters. When to use When multiple controls belong together. Related terms Container Card Sidebar Dialog HTML example
Part II — User Interaction Button Icon Button Floating Button Dropdown Accordion Tabs Tree View Data Grid Modal Drawer Tooltip Toast Notification Wizard Part III — Icons Chevron Caret Hamburger Kebab Meatballs Plus Minus Gear Avatar Part IV — Frontend Architecture Browser │ ├── HTML ├── CSS ├── JavaScript ├── Framework ├── Components ├── Router ├── State └── API Client Terms: Component State Props Store Router Route View Hook Directive Virtual DOM Hydration Rendering Part V — Backend Architecture HTTP Request │ Controller │ Service │ Repository │ Database Terms: Controller Action Middleware Service Repository Model Entity DTO Factory Dependency Injection Part VI — Data Database Table Row Record Column Field Primary Key Foreign Key Index View Trigger Stored Procedure Transaction Migration Seed Part VII — HTTP Browser │ GET /students/5 │ Server │ 200 OK Terms: Request Response Header Body Status Code Endpoint Route Resource REST GraphQL Part VIII — Authentication Login Authentication Authorization Session Cookie JWT OAuth Permission Role ACL Part IX — Security HTTPS TLS Hashing Encryption Salt CSRF XSS SQL Injection CORS CSP Part X — Performance Cache CDN Compression Minification Bundling Lazy Loading Code Splitting Tree Shaking Part XI — Deployment Developer │ Git │ CI │ Build │ Docker │ Production Server Terms: Build Deploy Pipeline Docker Container Reverse Proxy Nginx Environment Production Staging Part XII — Design Patterns Not just definitions, but diagrams. For example: MVC User │ ▼ Controller │ ▼ Model │ ▼ Database │ ▲ View Similarly for: MVC MVVM Repository Observer Factory Singleton Dependency Injection Strategy Adapter Facade Decorator Part XIII — Complete Application Walkthrough A complete example application showing how all the pieces fit together. Browser Student List Page Search Box Data Grid Pagination ↓ JavaScript ↓ GET /students ↓ Controller ↓ StudentService ↓ StudentRepository ↓ Database ↓ JSON Response ↓ Browser updates Data Grid Then expand this with topics such as: Logging Caching Validation Authentication Authorization Error handling Background jobs Email sending File uploads Notifications Audit logs Consistent structure for every term Every entry would follow the same template: Definition – a concise explanation. Purpose – why the concept exists. When to use – typical scenarios. Common mistakes – frequent misconceptions. Related terms – links to connected concepts. Example – a practical code or UI example. Diagram – where the concept fits in the overall architecture. This approach turns the glossary into a practical handbook rather than a simple list of definitions. Given your background as a software development teacher, I'd also tailor the examples to a familiar stack—HTML, CSS, JavaScript, PHP (Yii2), SQL, REST APIs, and Bootstrap—so students can immediately relate the terminology to code they are writing.