Aims

This course introduces the foundations of full-stack web application development through two complementary areas: Frontend Development and Backend Development.

On the frontend, students learn how 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 develop skills in DOM manipulation, event-driven programming, and asynchronous operations.

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

Hands-on activities with cURL, Postman, and structured assignments support practical learning throughout the course.

Teacher

• Michael Soprano - Course Leader

The course consists of 24 lectures for a total of 48 hours. Assessment is based on project work. 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 and the 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, and text-level semantics
• Lists, tables, links, and images
• The DOM and the HTML parsing model
• Embedding external and multimedia content with <iframe>, <video>, and <audio>

HTML Forms and Validation

• Input types such as text, email, number, date, checkbox, and 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, and inheritance
• The box model: margin, padding, border, sizing, and overflow
• Typography: fonts, spacing, and 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 with callbacks, promises, and the Fetch API
• Case study: calling a public 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 with full-stack CRUD operations

Learning Approach

• Hands-on activities and interactive quizzes
• Tool-assisted exploration of HTTP, APIs, and web protocols
• Assignments focused on frontend and backend development
• A final project showing complete full-stack integration

Reading Material

• J. Duckett, HTML & CSS: Design and Build Websites. Wiley, 2011
• J. Duckett, JavaScript & jQuery: Interactive Front-End Web Development. Wiley, 2014
• E. Holmes, D. Harms, Express in Action: Writing, Building, and Testing Node.js Applications. Manning Publications, 2016