Back to buildsBUILD RECORD

Site Skills Knowhow Revamp / HTML/CSS design study / 2026

Making course-booking states visible before implementation.

The Site Skills Knowhow study uses coded desktop and mobile artboards to compare course discovery, funding, booking and waitlist layouts.

ROLE
Software engineering
STATE OF THE BUILD
Study
RECORD UPDATED

THE WORK

The project.

This HTML and CSS design study makes proposed course-booking journeys concrete enough to compare. Separate desktop and mobile artboards show how course information, funding choices, bookings and waiting lists could be arranged, with shared card, button and badge styles keeping related screens consistent. The deeper document contains fifteen named screens, including states beyond the main course page. They are static compositions, not an implemented booking service.

IMPLEMENTATION

Design choices.

  1. Separate mobile compositions allow information to be rearranged for a narrow screen rather than merely shrinking the desktop layout. The trade-off is maintaining both versions of the markup.
  2. Booking and waitlist dialogs show what follows a course selection, making those proposed states available for review alongside the main pages.
  3. Shared classes organize each document, but they aren't a common production component library. A working site would need responsive components, real form state and connected booking behavior.

HOW IT FITS TOGETHER

Architecture.

  • Three HTML documents hold the homepage, page redesigns and deeper interaction-state studies. CSS tokens and reusable classes give repeated navigation, cards and controls a consistent treatment within each document.
  • Desktop and mobile screens use separate markup in fixed-size artboards, with additional frame sizes for dialogs. This allows direct comparison of their information layouts but doesn't implement a responsive transition between them.
  • The fifteen-screen document includes course, funding, contact, booking, waitlist and menu compositions. Their fields and controls are static markup with local images, not connected routes or submission handlers.

MADE WITH

HTML · CSS · CSS Grid · Flexbox

CHECKS & RESULTS

What was checked.

A source review shows what the code does. It is not a fresh test of the running app.

  1. Code and development records reviewedReviewed

    The code, tests and available development records were checked. Reported test results keep their original scope. No fresh app or live deployment check was run for this write-up.

    Scope of this check
    Code review, not a fresh run of the app

NEXT

Still to work through.

The deliverable is an interface study. It doesn't establish responsive behavior, booking submission, current prices or live availability. Turning it into a working site would mean implementing and checking those behaviors, not just connecting the existing labels.