Contact

← All projects

Project 07

Dip's Web Academy

An interactive HTML, CSS and JavaScript tutorial site with 14 live demos and an AJAX-loaded quiz, built with plain HTML, CSS and jQuery, with light and dark themes.

  • Live
  • Individual project

Overview

A two-page web app that teaches HTML, CSS and JavaScript fundamentals. The tutorial page has 14 interactive demos, cheatsheets and code examples; the quiz page loads its questions over AJAX, randomises them, scores the attempt and keeps a history in the browser.

My role

Individual project. I designed and built both pages.

What I did

  • Built 14 interactive demos across the HTML, CSS and JavaScript tutorials.
  • Loaded quiz questions over AJAX from a JSON file, shuffled with Fisher-Yates, with scoring, a timer and attempt history in localStorage.
  • Themed it with Material Design 3 colours in light and dark modes, following the system preference with a manual toggle.
  • Made it responsive from 320px to 1440px and accessible, with a skip link, ARIA attributes, semantic HTML and keyboard navigation.
  • Validated the HTML and CSS with the W3C validators.