Webdesign90dayschallenge
Web Design Mastery — 3-Month Study Guide
4 hours per day • Project-based learning • From fundamentals to professional UI design
Your diverse interests aren’t the problem—they’re your superpower. The issue isn’t lack of focus, but lack of containment. You need a system that honors your curiosity while forcing completion. Here’s a battle-tested framework:
The “90-Day Monogamy with Open Relationship Fridays” System
Core Principle: Marry ONE primary project for 90 days, but schedule sanctioned affairs.
Weekly Architecture (the non-negotiable skeleton):
Monday-Thursday: Deep Monogamy (4 hours/day)
Pick one project that matters most right now (e.g., finishing that coding project). This is your “North Star.” Block 8am-12pm (or your peak hours) for only this. No trading, no reading articles, no side quests. Use Focusmate or similar if you can’t trust yourself. The cost of switching is a $50 donation to a cause you hate.
Friday: “Curiosity Buffet Day”
This is your release valve. Dedicate the entire day to exploring: read that new trading strategy, research content ideas, test gym programs. New ideas go into a “Someday/Maybe” list (see tools below). You only touch them after noon on Friday.
Weekends: Family & Maintenance Mode
Fatherhood is the project. Be fully present.
Sunday evening: 30-minute weekly review (non-negotiable).
Daily Triage Ritual (10 minutes, every morning): What is the ONE thing that makes everything else easier or irrelevant today? (From Gary Keller’s book) Which 3 tasks move my 90-day project forward? Write them on a physical sticky note. Energy check: Gym is non-negotiable, but when? Morning workout = better focus. Evening = stress relief. Schedule it like a meeting.
Tools for Your Specific Chaos:
Capture everything: Use Todoist (not Notion—too fiddly). Quick-add on phone: @coding, @trading, @content tags. This offloads the mental RAM. Shiny Object Syndrome: When a new idea hits, you don’t suppress it. You capture it in 30 seconds into Todoist with a tag, then immediately return to your One Thing. The idea waits for Friday.
- Trading: Only during your “Buffet” time or pre-scheduled 30-min review sessions. No charts open during deep work.
- Content Creation: Batch it. 2 hours on Friday = 5 posts. Don’t create daily.
- Reading: Audiobooks during gym/commute. Physical reading only before bed (30 min max).
The 90-Day Cycle:
At the end of each cycle, ask: Did I finish or ship something? If not, you either: Picked too big a project (break it down), or Didn’t protect your deep work hours (get an accountability partner).
Your first 90 days: Pick the project that, if completed, would make you feel like a legend. Forget “balance”—think sequencing. The trading algorithm, the SaaS app, the book—one must win. The others wait their turn. Start tomorrow. Protect 4 hours. The rest of your life happens around that.
📚 Recommended Books
✅ Refactoring UI — Adam Wathan & Steve Schoger Book
A practical, visual guide to design for developers.
✅ HTML & CSS + JavaScript & jQuery — Jon Duckett
Visual, easy-to-understand fundamentals.
📅 MONTH 1 — Web Foundations (HTML, CSS, JS)
🗓 Week 1 — HTML Deep Dive + Semantic Structure
✅ Topics
- Semantic tags (
header,section,nav,article) - Accessibility basics
- Forms & validation
- Responsive images (
picture,source)
✅ Project
Semantic Portfolio Website (NO CSS)
🗓 Week 2 — CSS Fundamentals (Flexbox, Grid, Responsive Design)
✅ Topics
- Box model
- Flexbox
- CSS Grid
- Positioning
- Media queries
- REM vs EM vs PX
✅ Drills
Recreate UI sections from Dribbble/Pinterest.
✅ Project
3-page responsive static site
🗓 Week 3 — Advanced CSS (Animations, Variables, Themes)
✅ Topics
- CSS variables
- Keyframe animations
- Transitions
- Pseudo elements
- Dark/light themes
✅ Project
Animated Landing Page
🗓 Week 4 — JavaScript for UI Interactions
✅ Topics
- DOM selection & events
- LocalStorage
- Fetch API
- Building small UI components
✅ Mini-Projects
- Modal
- Tabs
- Accordion
- Dropdown
- Image Slider
✅ Main Project
Interactive Coffee Shop Website
📅 MONTH 2 — Tailwind, Design Systems, Animations, UX
🗓 Week 5 — Tailwind CSS Mastery
✅ Topics
- Utility-first workflow
- Responsive utilities
- Layouts, spacing, colors
- Typography
- Dark mode
✅ Project
Rebuild Week 3 landing page with Tailwind
🗓 Week 6 — Design Systems + Visual Architecture
✅ Topics
- Color theory
- Typography scale
- 8px spacing system
- UI tokens
- Component organization
✅ Project
Build your own mini design system
Includes:
- Color palette
- Typography
- Buttons
- Inputs
- Cards
- Alerts
- Layout templates
🗓 Week 7 — Animations & Micro-interactions
✅ Topics
- Tailwind animations
- GSAP basics
- ScrollTrigger effects
- Parallax
- Smooth transitions
✅ Project
Animated Portfolio 2.0
🗓 Week 8 — Responsive Design Mastery
✅ Topics
- Mobile-first approach
- Tablet layouts
- Fluid typography
- Responsive grids/cards/tables
- Image optimization
✅ Project
Responsive Dashboard (Tailwind + Chart.js)
📅 MONTH 3 — Professional UI Skills & Capstone Project
🗓 Week 9 — Full Web App UI
Choose one app UI to fully design:
- AI Diary App
- E-Commerce Store
- Admin Dashboard
- Survey Builder
- Trading Dashboard
✅ Pages
- Landing
- Login/Register
- Dashboard
- List view
- Detail view
- Settings
- Notifications
🗓 Week 10 — Component Libraries & UI Kits
✅ Topics
- Shadcn/UI
- Radix primitives
- Heroicons / Lucide icons
- Material & Apple design guidelines
✅ Project
Build your own UI component library
🗓 Week 11 — UX Principles & Usability
✅ Topics
- Navigation patterns
- Error message design
- Form UX
- Visual scanning patterns (Z-pattern, F-pattern)
- Reducing cognitive load
✅ Project
Redesign a poorly designed website
🗓 Week 12 — Capstone Project
Build a polished, full-featured interface such as:
- SaaS dashboard
- Trading platform UI
- AI-powered statistics app
- National data portal
✅ Deliverables
- Full design system
- 10+ components
- 5+ pages
- Complete responsive behavior
- Animations & micro-interactions
🕒 Daily Routine (4 Hours)
-
Hour 1 — Theory
Refactoring UI, Tailwind docs, CSS articles -
Hour 2 — Drills
Layouts, components, animations -
Hours 3–4 — Project Building
Push daily updates to GitHub
🎨 Helpful Resources
✅ UI Inspiration
- Awwwards
- Dribbble
- Land-book
- Mobbin
- UI8
✅ Tools
- Figma
- Coolors
- ColorHunt
- Tailwind Playground
- Uiverse