Skip to main content

Introduction: Web Application Development (Elective B)

Introduction​

This module provides students with comprehensive skills in modern web application development, covering both frontend and backend technologies. Students will learn about web technologies, frameworks, APIs, and deployment strategies. This elective module prepares students for careers in web development and provides practical skills for creating interactive web applications.

Learning Objectives​

Students will learn about:

  • Frontend development with modern web technologies
  • Backend development and server-side programming
  • Web frameworks and development tools
  • API design and integration
  • Web application security and best practices
  • Deployment and maintenance of web applications

Module Structure​

This elective unit covers comprehensive web development:

🎨 Frontend Development​

  • HTML5 and semantic markup
  • CSS3 and responsive design
  • JavaScript and DOM manipulation
  • Frontend frameworks (React, Vue.js)
  • User experience (UX) design principles

βš™οΈ Backend Development​

  • Server-side programming languages
  • Web servers and application frameworks
  • Database integration and ORM
  • Authentication and session management
  • API development and documentation

πŸ”— Full-Stack Integration​

  • Frontend-backend communication
  • RESTful API design
  • WebSocket and real-time applications
  • Microservices architecture
  • Cloud deployment and scaling

πŸ”’ Web Security​

  • Authentication and authorization
  • Data validation and sanitization
  • HTTPS and SSL/TLS
  • Cross-site scripting (XSS) prevention
  • SQL injection protection

Key Concepts​

Web Technologies​

  • HTML5: Modern markup and semantic elements
  • CSS3: Advanced styling and animations
  • JavaScript: Client-side programming and frameworks
  • HTTP/HTTPS: Web communication protocols
  • JSON/XML: Data exchange formats

Development Frameworks​

  • Frontend: React, Vue.js, Angular
  • Backend: Node.js, Django, Flask, Express
  • Full-Stack: Next.js, Nuxt.js, Meteor
  • Mobile: React Native, Flutter
  • Desktop: Electron, Tauri

Web Architecture​

  • MVC Pattern: Model-View-Controller architecture
  • RESTful APIs: Representational State Transfer
  • Microservices: Distributed application architecture
  • Serverless: Function-as-a-Service deployment
  • Progressive Web Apps: Enhanced web applications

Practical Skills​

By the end of this module, students will be able to:

  • Create responsive web applications using modern technologies
  • Develop full-stack applications with frontend and backend integration
  • Design and implement APIs for data exchange
  • Apply security best practices in web development
  • Deploy and maintain web applications in production

Assessment Focus​

This module emphasizes:

  • Understanding of web technologies and frameworks
  • Application of development skills to create web applications
  • Analysis of web architecture and design patterns
  • Creation of functional and secure web applications
  • Evaluation of web application performance and usability

Development Tools and Technologies​

Frontend Technologies​

  • HTML5: Semantic markup and new elements
  • CSS3: Flexbox, Grid, animations, and transitions
  • JavaScript ES6+: Modern JavaScript features
  • TypeScript: Typed JavaScript for large applications
  • SASS/SCSS: CSS preprocessing and organization

Backend Technologies​

  • Node.js: JavaScript runtime for server-side development
  • Python: Django, Flask frameworks
  • PHP: Laravel, Symfony frameworks
  • Java: Spring Boot framework
  • C#: ASP.NET Core framework

Development Tools​

  • Version Control: Git and GitHub
  • Package Managers: npm, yarn, pip
  • Build Tools: Webpack, Vite, Parcel
  • Testing: Jest, Cypress, Selenium
  • Deployment: Docker, Kubernetes, CI/CD

Getting Started​

To begin your journey through this module:

  1. Review the learning objectives to understand what you'll achieve
  2. Learn frontend technologies starting with HTML, CSS, and JavaScript
  3. Study backend development and server-side programming
  4. Practice full-stack integration with real projects
  5. Apply security practices and deployment strategies

This elective module provides essential skills for modern web development careers. The knowledge gained here will be valuable for university studies in computer science and professional web development work.

Source/Reference: ICT Curriculum and Assessment Guide - Education Bureau, Hong Kong