---
title: "Four websites built with nothing but HTML, CSS and JavaScript"
kind: student-highlight
date: 2026-11-04
location: "Holy Angel University"
tags: [students, student-work, web, hau, introweb]
summary: >
  Introduction to Web Development at Holy Angel University ended the 2026 first semester with team final projects built in plain HTML, CSS and JavaScript. No frameworks allowed. Here are four of them.
photos:
  - "/media/projects/2026-1st-sem/memora/square.webp | 1080x1080 | Memora, the project's square image"
  - "/media/projects/2026-1st-sem/hau-dorm-finder/square.webp | 1080x1080 | HAU Dorm Finder, the project's square image"
  - "/media/projects/2026-1st-sem/hourly/square.webp | 1080x1080 | Hour.ly, the project's square image"
  - "/media/projects/2026-1st-sem/life-quest/square.webp | 1080x1080 | Life-Quest, the project's square image"
social: |
  No frameworks. That was the rule for my intro web class this semester at the School of Computing, Holy Angel University: plain HTML, CSS and JavaScript, built in teams.
  
  The top final projects included a flashcard site that could pass for a real product, a dorm finder for students near campus, and a shared calendar for your barkada. I could not find any of these builders on LinkedIn yet. If you built one, send me your profile and I will tag you.
  
  Four of them, with a page each:
  https://tjakoen.github.io/calendar/2026-s1-introweb-students
  Repos and live links are on each project's page.
---

## No frameworks, on purpose

This is the class where most students build their first web page. Introduction to Web Development runs on plain HTML, CSS and JavaScript, with no frameworks, no component libraries and nothing that does the thinking for them. Most of them could not tell you what React is, and that is fine: they will meet it later, in a course built for it. Here, every line on the page is one they typed and can explain.

The finals were team projects, and team projects are where good ideas go to get averaged into mush. These four did not. Each one reads like a single clear idea, which means somebody on each team did the hard, invisible work of saying *no, not that feature*.

The Memora landing page in particular could pass for a real product's, built from the same three files every beginner starts with. That is the most flattering thing I can say about a first web project, and it makes my own first website look like a ransom note.

Each card opens a page with screenshots, what the team says it does, and where to find them.

## The sites

<div class="card-grid" style="--card-min: 15rem">
<a class="media-card" href="/calendar/2026-s1-memora">
  <span class="media-card__media" style="--media-ratio: 1 / 1"><img class="media-card__image" src="/media/projects/2026-1st-sem/memora/square.webp" width="1080" height="1080" alt="Memora, the project's square image" loading="lazy" decoding="async"></span>
  <div class="media-card__body"><span class="media-card__title">Memora</span><span class="media-card__text">Free flashcards for college students: make decks, flip cards, see what is left to review. By @JoshPhilipPuangco.</span></div>
</a>
<a class="media-card" href="/calendar/2026-s1-hau-dorm-finder">
  <span class="media-card__media" style="--media-ratio: 1 / 1"><img class="media-card__image" src="/media/projects/2026-1st-sem/hau-dorm-finder/square.webp" width="1080" height="1080" alt="HAU Dorm Finder, the project's square image" loading="lazy" decoding="async"></span>
  <div class="media-card__body"><span class="media-card__title">HAU Dorm Finder</span><span class="media-card__text">Compare boarding houses near Holy Angel University by price, distance and amenities. By @yv-or.</span></div>
</a>
<a class="media-card" href="/calendar/2026-s1-hourly">
  <span class="media-card__media" style="--media-ratio: 1 / 1"><img class="media-card__image" src="/media/projects/2026-1st-sem/hourly/square.webp" width="1080" height="1080" alt="Hour.ly, the project's square image" loading="lazy" decoding="async"></span>
  <div class="media-card__body"><span class="media-card__title">Hour.ly</span><span class="media-card__text">Shared calendars for friend groups and classes, called circles. By @Ezekielley.</span></div>
</a>
<a class="media-card" href="/calendar/2026-s1-life-quest">
  <span class="media-card__media" style="--media-ratio: 1 / 1"><img class="media-card__image" src="/media/projects/2026-1st-sem/life-quest/square.webp" width="1080" height="1080" alt="Life-Quest, the project's square image" loading="lazy" decoding="async"></span>
  <div class="media-card__body"><span class="media-card__title">Life-Quest</span><span class="media-card__text">Turns tasks and habits into quests, with XP, streaks and badges. By @aaronsalunga098-ai.</span></div>
</a>
</div>

## Why the no-framework rule stays

Every site on this page works in any browser, loads instantly, and can be read top to bottom by the people who wrote it. That is the whole argument for learning the fundamentals first, made by students instead of by me.

Thank you to these teams for letting me show your work. You made the rule look easy, which it is not.

> *The [judgment is human](/notes/ten-times-zero). The typing, by design, is not.*