---
title: "Memora"
kind: student-project
location: "Holy Angel University"
tags: [students, student-work, introweb]
summary: "Free flashcards for college students: make decks, flip cards, see what is left to review."
---

*A final project from Introduction to Web Development, 2026 first semester. Part of [Four websites built with nothing but HTML, CSS and JavaScript](/calendar/2026-s1-introweb-students).*

<figure data-lightbox-group style="max-width: 22rem; margin: 0 0 var(--space-6, 2rem)"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/memora/square.webp"><img src="/media/projects/2026-1st-sem/memora/square.webp" width="1080" height="1080" alt="Memora, the project's square image" loading="eager" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>

## What it is

Memora is a flashcard site for students who want something faster than paper cards and cheaper than a subscription. Build a deck, study it with a flip-card view, and keep track of how many cards you still need to get right.

Built with HTML, CSS and JavaScript.

## Why it is here

The landing page could pass for a real product's, and that is plain HTML, CSS and JavaScript, which is all this course allows. It was built by a team of four, and it reads like one person's idea, which is the hard part of group work.

## Find it

- Project: [github.com/JoshPhilipPuangco/Memora](https://github.com/JoshPhilipPuangco/Memora)
- Live: [joshphilippuangco.github.io/Memora](https://joshphilippuangco.github.io/Memora/)
- GitHub: [@JoshPhilipPuangco](https://github.com/JoshPhilipPuangco)

## Screenshots

<div class="gallery" data-lightbox-group style="--gallery-min: 14rem; align-items: start">
<figure class="gallery__item" style="grid-column: 1 / -1"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/memora/shot-1.webp"><img src="/media/projects/2026-1st-sem/memora/shot-1.webp" width="1600" height="900" alt="Memora, screenshot 1 of 3" loading="lazy" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>
<figure class="gallery__item"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/memora/shot-2.webp"><img src="/media/projects/2026-1st-sem/memora/shot-2.webp" width="1600" height="900" alt="Memora, screenshot 2 of 3" loading="lazy" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>
<figure class="gallery__item"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/memora/shot-3.webp"><img src="/media/projects/2026-1st-sem/memora/shot-3.webp" width="1600" height="900" alt="Memora, screenshot 3 of 3" loading="lazy" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>
</div>
