StudioPath Pro is a client-demo-ready front-end studio platform built from the full Web_Practice coursework archive. It is designed for discovery calls, classroom defense, and portfolio hunting: interactive filters, estimator with copyable summary, seeded planner, validated intake, DOM lab, tables, media, multi-page About, dark mode, and a maximum-visibility light theme.
Author: Mohammad Rohaan · Roll: 22I-2327 · GitHub: rohaan2802
Imagery policy: Male portraits, animal mascots, and object photography only — in the product and in README screenshots.
https://rohaan2802.github.io/Web_Practice/
- Live demo
- Executive summary
- Why this wins a client walkthrough
- Client demo playbook
- Light theme & visibility
- Product map (every module)
- Practice → product mapping (complete)
- Feature walkthrough (deep)
- Interaction & data contracts
- Accessibility & motion
- Responsive matrix
- Feature screenshots (20)
- Source map
- How to run locally
- Print leave-behind
- QA checklist for demos
- Limitations
- Roadmap ideas (optional)
- License / attribution
| Question | Answer |
|---|---|
| What is it? | A static, multi-section studio platform on GitHub Pages |
| Who is it for? | Clients, recruiters, instructors, portfolio reviewers |
| What proves skill? | Working UI for layout, forms, tables, media, JS logic, persistence |
| Backend required? | No — everything runs in the browser |
| Light theme? | Default — near-black type, white surfaces, projector-ready |
| Demo helpers? | Seed tasks, copy estimate, floating CTA, keyboard D |
StudioPath Pro is the productized form of Web_Practice. The repository ships only the live product (index.html, about.html, assets, and scripts) — practice lab folders were removed to keep demos lean.
- Clickable proof, not slides — filters, lightbox, estimator, planner, and forms fail/succeed live.
- Transparent scoping — estimator shows hours + fee with add-on breakdown you can copy.
- Delivery narrative — schedule table doubles as a sprint calendar while you talk.
- Risk reduction story — validated intake + planner persistence shows process maturity.
- Classroom-to-commerce bridge — skills map ties every module back to coursework concepts without sounding unfinished.
- Room-ready themes — light is default for shared screens/projectors; dark stays one click for mood.
- Zero deploy friction — GitHub Pages URL is the demo environment.
Use this 6–8 minute script:
| Minute | Action | Say |
|---|---|---|
| 0:00 | Open live URL, keep light theme for visibility | “This is the production-shaped walkthrough — static host, full interaction.” |
| 0:40 | Scroll Trust + Cases | “These are the beats we’ll click: filters, estimate, intake.” |
| 1:30 | Work → Tools filter → open lightbox | “Portfolio system with hover affordance and modal viewer.” |
| 2:30 | Estimate → Calculate → Copy summary | “Scope math is transparent; you can paste into email.” |
| 3:30 | Press D or Seed demo data |
“Planner milestones appear instantly for the call.” |
| 4:30 | Contact — intentionally fail validation, then succeed | “Client-facing forms that protect incomplete submits.” |
| 5:30 | Skills + DOM lab | “Every major lab concept is represented and clickable.” |
| 6:30 | About page | “Multi-page pattern for broader site architecture.” |
| 7:30 | Optional: Print the page as leave-behind | “Browser print stylesheet strips chrome for PDF.” |
Keyboard: D (outside inputs) reseeds planner demo tasks.
Demo toolkit (bottom-left dock): Seed demo data · Copy last estimate · Open intake · Open estimator · Hide.
Restore after hide: use Show demo tools (bottom-left) or Demo tools in the header — state is remembered in localStorage.
Light is the default theme (first visit / cleared storage) so client demos and projector rooms open at maximum visibility. Dark remains one click away and is remembered in localStorage.
| Token / surface | Value / intent |
|---|---|
--text |
#000000 — pure black primary copy |
--muted |
#0f1c2a — ink-dark secondary (never washed gray) |
--line |
38% black — strong card/input edges |
--accent / --accent-soft |
#6b240f / #8b2e12 — deep rust CTAs |
| Body | Solid white page (maximum projector clarity) |
| Cards / trust / cases | White surfaces, 1.5px borders, readable shadows |
| Inputs / chips | 2px borders + rust focus ring |
| Header / nav | Opaque white bar, bold #0a1520 links |
| Ticker / demo banner | Warm paper strips with rust emphasis |
| Buttons / float CTA | Solid rust fills, white labels, heavy weight |
| Tables | Tinted headers + darker cell rules |
| Hero | Light scrim so headline stays ink-black on photography |
Also improved: section-alt contrast, quote left accent bar, form status weight, and print CSS that keeps ink-friendly borders.
Tip for demos: leave light on for the whole call; switch to dark only for mood / night-mode screenshots.
- Client demo toolkit (dock + restore)
- Skills ticker (CSS keyframes)
- Sticky header + theme toggle + mobile nav
- Hero + animated counters
- Trust strip (demo promises)
- Case snapshots (walkthrough scripts)
- Services (6 cards)
- Process rail (
::before+ pulse) - Work gallery (8) + filters + hover + lightbox
- iframe media
- Schedule table (
colspan) - Pricing comparison table
- Quote estimator + copy summary
- Team (males + animal mascots)
- Quote / field note
- Concept checklists + skills map table
- Newsletter
- DOM lab panel
- Brief planner (search / filters / clear done / seed)
- Contact intake (full validation)
- FAQ
- Footer
- Floating “Book demo” CTA
- Reading progress + back-to-top
about.htmlmulti-page- Print stylesheet
| Practice source | Concepts practiced | Where it appears in StudioPath Pro |
|---|---|---|
| Assignment 01 (HTML) | Semantic structure, nav, footer, multi-page | Landmarks, sticky header, footer, about.html |
| Assignment 02 (HTML) | Marquee, nested lists, iframe, tables, forms | Ticker, checklists, media embed, schedule, intake |
| Assignment 03 Acme | Marketing sections, newsletter | Hero, services, subscribe band |
| Assignment 04 WebPaint | Portfolio filters / featured works | Work chips, 8-card grid, lightbox |
| Assignment #06 | Landing composition | Section rhythm, feature imagery |
| Assignment 07 (CSS) | Form layout / validation chrome | Contact form with real checks |
| CSS / Flex box | Flex alignment | Header, hero actions, toolbars |
| CSS / Grid | Grid layout | Services, work, team, trust, cases |
| CSS / @Media | Breakpoints | Full responsive matrix |
| CSS / IMage Hover | Hover overlays | Work ::after badge + zoom |
| CSS / keyframes | Animation | Ticker, process pulse, lab pulse |
| CSS / pseudo class & selectors | Interactive states | Chips, buttons, lab toggles |
| CSS / positions | Overlay positioning | Lightbox, hover badges, float CTA |
| CSS / Fonts & borders | Typography & chrome | Syne + DM Sans, card borders |
| HTML / Forms · Items · Media · Tables | Core markup drills | Forms, lists, iframe, tables |
| Java S / Todo · TodoList | List applications | Brief planner |
| Java S / DOM 1–3 | query / classList / text | Lab panel, lightbox wiring |
| Java S / Functions · if-else · objects · arrays · loops | Logic | Estimator, counters, filters, seed data |
On first visit, a dismissible banner exposes seed/copy/intake shortcuts. A fixed Book demo pill stays available while scrolling (hidden in print).
Trust tiles set expectations (“what you can click”). Case cards give you spoken narrative hooks that deep-link into schedule, estimator, and skills.
Five filter modes (all, brand, ui, motion, tools). Hover reveals a positioned badge; activation opens a <dialog> lightbox with caption. Status text is aria-live.
Uses an ADDONS dictionary, baseHours / baseFee functions, urgency multipliers, and checkbox aggregation. Copy summary writes a plain-text line for email/Slack.
Supports add, search, filter (all/open/done/high), toggle, delete, clear-done, localStorage key studiopath-tasks-v1, and demo seeding via button or D.
Newsletter checks type=email validity. Contact enforces name, email, project type, password length, password match, and terms — with ordered failure messages.
js/theme-init.js applies theme before paint to reduce flash. Toggle label swaps between “Light theme” / “Dark theme”.
| Key | Storage | Purpose |
|---|---|---|
studiopath-theme |
localStorage |
dark | light |
studiopath-tasks-v1 |
localStorage |
Planner JSON array |
studiopath-demo-banner |
localStorage |
hidden / visible for demo dock |
| Estimator output | In-memory string | Last summary for clipboard copy |
No cookies. No analytics. No network writes (except optional YouTube iframe assets).
- Skip link to
#main aria-expanded/aria-pressed/aria-livewhere state changes- Focus rings on inputs (stronger in light theme)
prefers-reduced-motiondisables ticker/pulse/smooth scroll- Lightbox closable via button, backdrop click, and
Escape - Meaningful labels on demo controls
| Class | Width | Behaviour |
|---|---|---|
| Compact phone | ≤420px | Single column, stacked CTAs |
| Large phone | ≤760px | Hamburger nav; stacked grids |
| Tablet | ≤960px | 2-column services/cases/team |
| Laptop | ≤1100px | 3-column work |
| Desktop / wide | ≥1101px | 4-column work; capped measure |
| Landscape | short height | Sticky header remains usable |
| browser print | Chrome stripped; ink-friendly borders |
| Path | Role |
|---|---|
index.html |
Primary product + demo chrome |
about.html |
Multi-page About |
assets/css/styles.css |
Design tokens, layouts, light max-contrast, print |
js/theme-init.js |
Pre-paint theme |
js/app.js |
All interactions, demo seeding, clipboard |
assets/images/ |
Male / animal / object assets |
docs/screenshots/ |
Twenty labelled README captures |
scripts/qa-check.py |
Local Playwright QA smoke |
.nojekyll |
GitHub Pages static hosting |
git clone https://github.com/rohaan2802/Web_Practice.git
cd Web_Practice
python -m http.server 8080Visit http://127.0.0.1:8080/.
Recommended local demo prep:
- Hard refresh once after pull.
- Stay on Light theme (default).
- Click Seed demo data.
- Run an estimate and Copy summary.
Use the browser print dialog. The print stylesheet hides ticker, demo chrome, theme toggle, media iframe, floating CTA, and progress UI, and forces high-contrast borders for PDF handouts.
- Light theme: body text clearly darker than backgrounds
- Nav links readable on white header
- Work filter status updates
- Lightbox opens/closes
- Estimator calculate + copy
- Planner seed via button and
D - Contact validation fails then passes
- About page loads
- Mobile nav opens/closes
- Print preview looks clean
- No server email, CRM, or payments.
- Estimator math is illustrative.
- Planner data is device-local.
- YouTube iframe needs network access.
- Responsive QA uses browser viewports; not every physical device SKU is certified.
- CMS-free Markdown case studies
- i18n EN/Urdu toggle
- Export planner JSON
- Lighthouse CI badge
- Optional Formspree/endpoint wiring behind a flag
Packaging by Mohammad Rohaan (22I-2327). Third-party archive assets keep their original licenses. StudioPath Pro root product files are for portfolio and client demonstration.