Aims

The course provides a comprehensive introduction to full-stack web application development, structured in two major domains: Frontend Development and Backend Development.

On the frontend, students learn to create structured, interactive, and accessible user interfaces using HTML, CSS, and JavaScript. Topics include semantic markup, responsive layout, form handling, client-side validation, and media embedding. Students progressively acquire skills in DOM manipulation, event-driven programming, and asynchronous operations.

On the backend, the course introduces Node.js and the Express.js framework to design RESTful services, manage middleware, and handle persistence with SQLite. By the end of the course, students are able to build full-stack applications that integrate client-side interfaces with server-side logic and data storage.

Hands-on activities using cURL, Postman, and structured assignments support practical learning.

Teacher

• Michael Soprano — Course Leader

The course includes 24 lectures for a total of 48 hours. The assessment is based on a practical project. The course is delivered in the second semester.

Topics Covered

Web Fundamentals and Communication

• Architecture of the World Wide Web
• Client-server model and user agents
• Domain names, IP addressing, and URLs
• The HTTP protocol: request/response lifecycle
• Methods, status codes, headers, and metadata
• URL query strings and GET parameter passing
• Data exchange with JSON
• Practical use of cURL and Postman

Frontend Development

HTML: Structure and Semantics

• Core syntax and document structure
• Headings, paragraphs, text-level semantics
• Lists, tables, links, and images
• The DOM and HTML parsing model
• Embedding external and multimedia content: <iframe>, <video>, <audio>

HTML Forms and Validation

• Input types: text, email, number, date, checkbox, radio
• Structural and grouping elements in forms
• <textarea>, <select>, and option handling
• HTML5 validation attributes and input constraints
• Form design best practices

CSS: Styling and Layout

• Basic syntax, selectors, and combinators
• Cascading rules, specificity, inheritance
• The box model: margin, padding, border, sizing, overflow
• Typography: fonts, spacing, line height
• Color management and transparency
• Responsive layout with Flexbox
• Positioning, layout strategies, and component patterns

JavaScript: Behavior and Interaction

• Core language constructs and syntax
• Script inclusion and module structure
• DOM selection, traversal, and manipulation
• Event handling and listener registration
• Event flow: bubbling and capture
• Asynchronous JavaScript: callbacks, promises, fetch API
• Case study: calling a public API (e.g., Random Brewery API)

Backend Development

Node.js and Express.js

• Introduction to Node.js and non-blocking I/O
• Setting up an Express.js server
• Defining routes and handling HTTP methods
• Sending responses and managing request data
• Middleware architecture and request pipelines
• Building RESTful endpoints
• Interfacing with SQLite for data persistence
• Final integration project: full-stack CRUD operations

Learning Approach

The course emphasizes learning through:

• Guided exercises and interactive quizzes
• Tool-assisted exploration of HTTP, APIs, and web protocols
• Two structured assignments focused on frontend development and interface behavior
• Progressive backend development with routing and persistence
• A final project demonstrating complete full-stack integration

Reading Material

• J. Duckett, HTML e CSS. Progettare e costruire siti web. Apogeo Education, 2017
• J. Duckett, JavaScript & JQuery. Sviluppare interfacce web interattive. Apogeo Education, 2017
• J. Duckett, PHP & MySQL. Sviluppare applicazioni web lato server. Apogeo Education, 2022
• E. Holmes, D. Harms, Express in Action. Sviluppare applicazioni web con Node.js e Express. Apogeo Education, 2017