Webdesign90dayschallenge
Web Design Mastery — 3-Month Study Guide
4 hours per day • Project-based learning • From fundamentals to professional UI design
📚 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