A polished multi-page learning website for a 30-day UX and Product Design mastery roadmap. The site organizes the curriculum into week-based study experiences, assignments, references, progress tracking, reflections, and a built-in study timer.
This project is a static frontend built with HTML, CSS, and vanilla JavaScript.
The website is designed as a self-guided 30-day learning system for UX and product design preparation. It helps learners move through a structured curriculum with:
- Weekly study pages
- Daily learning modules
- Practice sessions
- Assignments
- Reflection prompts
- Progress tracking
- Timer support
- Reference library
- Assignment bank
The UI was redesigned to follow a cleaner, lighter editorial SaaS-style layout inspired by a modern product website reference. The design system uses a soft light theme, rounded surfaces, Product Sans-style typography fallback, and a more focused day-by-day learning experience.
The homepage gives an overview of the complete 30-day plan.
It includes:
- Program hero section
- 30-day roadmap
- Week-level progress
- Timeline navigation
- Weekly entry points
- Learning structure overview
Each week has its own dedicated page:
week1.htmlweek2.htmlweek3.htmlweek4.html
Each week page includes:
- A weekly hero section
- Day tabs for quick switching between days
- A single active day view instead of showing all day content at once
- Big Idea, Study, Practice, Assignment, and Reflection sections
- Sticky right-hand sidebar behavior on desktop for supporting blocks
- Day completion and block completion tracking
The assignments page aggregates all assignments from the 30-day program.
It includes:
- Difficulty grouping
- Filtering
- Progress tracking
- Assignment navigation back to source days
The reference page acts as a compact knowledge library.
It includes:
- Core principles
- Key formulas
- Quick links
- Condensed learning references
The app uses local browser storage to persist:
- Day completion
- Block completion
- Assignment completion
- Reflection content
- Timer state
This allows the user to leave and return without losing progress.
Each reflection area is automatically saved in local storage as the user types.
A floating timer widget supports focused work sessions for:
- Study
- Practice
- Assignment
- Reflection
The app supports a delayed start state, where Day 1 can begin from the next day instead of immediately.
plan/
+-- index.html
+-- week1.html
+-- week2.html
+-- week3.html
+-- week4.html
+-- week5.html
+-- week6.html
+-- week7.html
+-- week8.html
+-- assignments.html
+-- references.html
+-- human-specific-topics.html
+-- README.md
+-- content/
¦ +-- Day-wise-content.md
¦ +-- V2-guidebook-plan.md
¦ +-- PDF-coverage-audit.md
+-- docs/
¦ +-- 30-days-UX-guidebook.md
¦ +-- UX-mastery-plan.md
¦ +-- Codex Bot.md
+-- css/
¦ +-- variables.css
¦ +-- base.css
¦ +-- layout.css
¦ +-- components.css
¦ +-- dashboard.css
¦ +-- week.css
¦ +-- assignments.css
¦ +-- references.css
+-- js/
¦ +-- main.js
¦ +-- navigation.js
¦ +-- accordion.js
¦ +-- progress.js
¦ +-- reflections.js
¦ +-- timer.js
¦ +-- storage.js
¦ +-- radar-chart.js
¦ +-- assignments-filter.js
¦ +-- study-enhancements-data/
+-- scripts/
¦ +-- _render-check.js
¦ +-- _fix-encoding.js
¦ +-- _fix-encoding.ps1
+-- assets/
+-- image.png
- HTML5
- CSS3
- Vanilla JavaScript
- Local Storage for persistence
No framework or build tool is required.
The current visual direction is based on:
- Light neutral background
- Soft elevated cards
- Rounded containers
- Product Sans style typography fallback
- Modern SaaS-inspired editorial layout
- Strong spacing hierarchy
- Reduced visual clutter
- Single-day focused learning flow
Each day is broken into structured parts:
- Big Idea
- Study Session
- Practice Session
- Daily Assignment
- Reflection
Week pages behave like a tabbed experience:
- The top day strip is tappable and clickable
- Only one day is visible at a time
- The active day updates the visible content panel
On desktop, the supporting actions and applied work are grouped on the right side:
- Practice Session
- Daily Assignment
- Reflection
- Right Direction / Wrong Direction guidance
This keeps the core study content readable while important action items stay visible.
Because this is a static site, you can open it directly in the browser or serve it locally.
Open index.html in your browser.
If you have Python installed:
python -m http.server 8000Then open:
http://localhost:8000
- Runtime curriculum files live in
content/. - Planning and reference documents live in
docs/. - Maintenance utilities live in
scripts/. - Public website entry pages stay at the repo root so deployed routes do not change.
To initialize and push this project to GitHub:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
git push -u origin main- Progress is stored locally in the browser, not in a backend.
- Clearing browser storage will reset saved progress unless exported manually.
- Product Sans is referenced via local system fallback, so exact typography may vary by machine.
- The project currently prioritizes static usability and visual polish over backend integration.
- Add true server-side user accounts
- Sync progress across devices
- Add export and import for progress data
- Add search across daily content
- Add keyboard navigation for day tabs
- Add theme variants
- Improve accessibility states and ARIA coverage further
- Add responsive fine-tuning for all week pages
This project is currently for personal or internal use unless a separate license is added.