notes.dpsd.gr

Projects | 2025 | Links: notes.dpsd.gr

Lab notes platform for four university courses: currently around 40 labs with live HTML previews, gated solutions and exam material, built with plain HTML, CSS and JavaScript on Cloudflare Pages, in classroom use since October 2025.

Status: live and in weekly classroom use. The lab notes for four university courses, and the purpose-built platform that serves them.

At a glance

For	Department of Product and Systems Design Engineering, University of the Aegean
Content	4 courses, ~40 labs, from first semester to eighth
Stack	Plain HTML, CSS and JavaScript, no build step; markdown content; Cloudflare Pages and Functions
My role	Platform, notes and teaching, all mine
Live since	October 2025

The problem

For years my lab notes lived in Google Docs, linked from the university’s e-teaching platform (eClass). They served well: the content was solid and improved every year. But the medium had a ceiling, and the clearest example is the web design course: a document can show HTML code, but it cannot run it, so students read markup without ever seeing what it does. Beyond that, the notes were scattered across per-document links, had no version control behind them, and read poorly on phones.

The platform

I built a purpose-made home for the notes: a single-page site in plain HTML, CSS and JavaScript, with no build step, no frameworks and no dependencies to maintain. Content is markdown; the browser fetches and renders it (marked.js for parsing, Prism.js for syntax highlighting) and builds each lab a table of contents with scroll spy. Publishing an update is a git push: Cloudflare Pages serves the site, and a small layer of serverless functions handles the parts that need logic. That simplicity was not a given: the platform went through several rounds of trial and refinement before it settled into its current shape.

Every distinctive feature exists because a classroom needed it:

Live HTML previews. Examples in the web design course render inside the page, isolated in their own frame: the code, and right below it, what the code does. The feature the documents could never offer. The isolation itself is not trivial: the platform is HTML and CSS too, and having each example render with its own styles only, inheriting nothing from the page that hosts it, was one of the hardest parts of the build.
Solutions that unlock after the lab. Every lab ends with exercises; their solutions page goes public when the session is done, not before: I unlock them myself from the platform’s private dashboard.
A private publishing dashboard. One place controls what students can reach: draft labs stay hidden, exam material stays private until exam day, and colleagues get expiring preview links to unreleased content.
Classroom details: copy buttons on code blocks, word wrapping for long lines, and every page verified at phone widths, because many students follow along on a phone.

The content

The platform exists for its content. Currently ~40 labs across four courses: web design with HTML and CSS, programming with C# and with Python, and Android development, spanning the department’s curriculum from first semester to eighth. The notes are written in Greek with English technical terms kept intact, aimed at design students, many of them meeting code for the first time, and they build on material refined over years of teaching these same labs: a rewrite and an upgrade, not a first draft.

The site grows as the courses do: new labs get added, existing ones get updated, and courses can be added when teaching calls for it. Notes are already being written that take a detailed look at how modern LLMs work, with hands-on examples of installing and configuring local models. Even if they never become a separate university course, which is the likely outcome, they put to use a platform that already exists and can carry technical notes of any kind.

In the classroom

The site has been in weekly use since October 2025: opened in lab sessions, worked through at home, revisited most heavily around exam periods, when traffic peaks. And unlike notes locked inside a learning platform, these are on the open web: free to read for anyone, students of the department or not.