Web_Practice production-shaped product

Every lab concept,
one professional studio platform.

StudioPath Pro folds the repository’s HTML, CSS, and JavaScript assignments into a useful multi-section site: portfolio filters with hover states, schedule tables, embedded media, a quote estimator, a DOM playground, validated intake, and a persistent task planner.

See client cases Run an estimate Book a discovery call →

Lab modules: 0
Live sections: 0
Breakpoints: 0

Built for client demos

What stakeholders can click in the room.

Every module below is interactive on a static host — ideal for discovery calls, classroom defense, and portfolio walkthroughs without a backend.

01Live filters & lightbox

02Transparent estimate math

03Form validation you can break

04Planner persists after refresh

05Light theme max-contrast ready

06Printable leave-behind styles

Case snapshots

How a walkthrough usually lands.

Short narratives you can narrate while clicking the matching section.

Retail landing

Launch page in one sprint

Hero → services → filtered work → intake. Show the schedule table as the delivery calendar.

Jump to schedule →

Agency toolkit

Scope before you quote

Use the estimator on a projector, then seed the planner with agreed milestones live.

Jump to estimator →

Classroom defense

Prove every lab concept

Open the skills map and DOM lab to show selectors, class toggles, and table markup under scrutiny.

Jump to coverage →

Service system

Built like Acme + WebPaint — finished like a product.

Six offerings map to layout, interaction, and form skills from the original coursework folders.

Landing systems

Hero bands, sticky flex nav, skip links, and ticker announcements.

Responsive grids

CSS Grid galleries and media-query stacks from phone to ultrawide.

Motion & hover

Keyframe accents and ::before/::after overlays on portfolio cards.

Data tables

Schedule and pricing tables with nested headers for clear comparison.

Forms that check

Newsletter + intake validation with password match and status regions.

DOM tooling

Estimator, planner, and live lab panel driven by vanilla JavaScript.

Delivery path

A clear process, animated with purpose.

01 Discover
Brief intake and scope checklist from the form labs.
02 Structure
Semantic sections, tables, and media blocks locked early.
03 Style
Flex/Grid layouts, themes, hover, and keyframe polish.
04 Script
Filters, estimators, planner persistence, DOM demos.

Portfolio

Filtered studies with hover detail.

WebPaint-style chips plus CSS hover overlays and a keyboard-friendly lightbox (positions + DOM).

Showing all 8 projects

Color palette book and tablet on desk — 01Color systemBrand

Sticky notes and wireframe planning board — 02Wireframe boardUI

Desktop monitor showing UI component kit — 03UI kit screenMotion

Art and maker tools flat lay — 04Maker toolkitTools

Bright studio office desks — 05Studio deskTools

Person coding on laptop at wooden desk — 06Focus sessionUI

Laptop showing code on wooden desk — 07Code & craftBrand

Top-down shared workspace with laptops — 08Collab tableMotion

HTML media lab

Embedded reference reel.

Assignment 02 iframe practice — a public web-design talk for context (external embed).

Tables lab

Build week schedule.

Seminar-style table from the HTML table exercises — useful for sprint planning.

Weekly build schedule
Block	Mon	Tue	Wed	Thu	Fri
09:00	Discovery workshop		Wireframes	UI kit	QA pass
13:00	Content map	Flex / Grid	Interaction scripts		Deploy
16:00	Form schema	Hover states	Estimator	Planner	Docs

Nested comparison

Packages you can actually explain.

Pricing packages
Feature	Starter	Studio	Launch
Landing sections	5	10	14+
Responsive pass	Phone + desktop	Full matrix	Full + landscape QA
Interactive widgets	—	Planner	Planner + estimator + labs
Delivery	Static GitHub Pages bundle

JavaScript labs · functions · objects · conditionals

Project quote estimator.

Pick scope options; a pure JS calculator (no libraries) totals hours and a ballpark fee using arrays, objects, and if/else rules.

Pages / sections

Add-ons Portfolio filters (+6h / +$90) Task planner (+8h / +$120) Media embed (+3h / +$45) Multi-page about (+5h / +$75)

Urgency

Pick options, then click Calculate — formula: (base + add-ons) × urgency.

Choose options, then click Calculate to see hours, fee, and breakdown.

People & mascots

The faces behind the build.

Sample portraits use male teammates and animal mascots — no female imagery in the product or README captures.

Adam Rivers

Product lead

Owns structure, content mapping, and release checklist.

Noah Blake

Front-end engineer

Flex/Grid systems, themes, and interaction scripts.

Pixel

Mascot · QA napper

Approves contrast naps and hover-state playfulness.

Byte

Mascot · fetch tester

Stress-tests buttons with boundless enthusiasm.

Man with coffee reviewing work on a laptop

Field note

“Turning practice folders into one shippable site is the difference between a lab grade and a portfolio URL.”

Marcus Hale · Studio advisor

Concept coverage

Checklist of labs represented here.

HTML

Semantic landmarks & skip link
Nested lists (this checklist)
Tables + colspan schedule
Forms, radios, selects, textarea
iframe media embed

CSS

Flex header / action rows
Grid services & work
@media breakpoint matrix
::before/::after hover overlays
Keyframes ticker + process pulse
Pseudo-class chip/button states

JavaScript

DOM create/update/remove (planner)
Arrays / objects / conditionals (estimator)
Loops for counters & filters
Events, localStorage, aria-live
Live lab panel class toggles

Practice to product map
Practice source	Concept	In StudioPath Pro
Assignment 01	Multi-page + footer	about.html + product footer
Assignment 02	Marquee, lists, iframe, tables, forms	Ticker, checklists, media, schedule, intake
Assignment 03	Acme marketing site	Hero, services, newsletter
Assignment 04	WebPaint filters	Work chips + lightbox
Assignment 06–07	Landing CSS + form chrome	Section system + validated contact
CSS Flex/Grid/@Media	Layout systems	Header, grids, breakpoints
CSS Hover/keyframes/pseudo	Interaction polish	Overlays, ticker, process rail
Java S DOM/Todo/Functions	Scripting	Planner, estimator, lab panel

Interactive DOM lab

Play with selectors & class toggles.

Mirrors the Java S DOM exercises: query nodes, toggle classes, and rewrite text live.

Target panel — change my style or copy.

Ready.

TodoList lab → useful planner

Brief planner with priority filters.

Assignment 07 → working intake

Project brief form.

Name, email, channel, type, password match, licence-style checkbox, and notes — validated in-browser.

Required fields fail loudly with status text.
Password pair must match (demo account pattern).
Nothing is uploaded to a server.

Context

Details worth reading.

Are the old assignment folders still in the repo?

No. Practice archives were removed so the repository ships only StudioPath Pro — the live GitHub Pages product.

Why male / animal imagery only?

Product and README screenshots intentionally avoid female photos or backgrounds for this portfolio presentation.

Is the estimator a real invoice?

No — it demonstrates functions, objects, and conditionals with transparent demo math only.