Complete overview of all 10 assignment series with 4 difficulty levels each.
40 total assignments organized as:
- 10 themed series (Wireframe, Forms, Navigation, etc.)
- 4 difficulty levels per series (Foundation → Mastery)
- Progressive skill building (each level builds on the previous)
🟢 Foundation - Core concepts and basic implementation
🟡 Enhancement - Building complexity and additional features
🟠 Integration - Combining multiple skills and patterns
🔴 Mastery - Advanced techniques and complete systems
Option 1: Horizontal (Recommended for beginners) Complete all Foundation (🟢) assignments across all series first, then all Enhancement (🟡), etc.
- Builds strong fundamentals before advancing
- Reinforces concepts across different contexts
- Less overwhelming for new learners
Option 2: Vertical (For focused learning) Complete one full series (all 4 levels) before moving to the next
- Deep dive into one topic area
- See full progression of a skill
- Good for learners with specific interests
Option 3: Custom Choose your own path based on interests and goals
- Start with series that excite you most
- Mix and match difficulty levels
- Return to earlier assignments to reinforce learning
Focus: Design interpretation, HTML structure, CSS layouts, typography
Learn to translate visual designs into functional web pages with clean, semantic code.
| Branch | Level | Focus | Location |
|---|---|---|---|
wireframe-to-webcode |
🟢 Foundation | Basic wireframe interpretation, simple layout | 01-wireframe/01-foundation/ |
wireframe-blog-layout |
🟡 Enhancement | Blog layout, sticky sidebar, breadcrumbs | 01-wireframe/02-blog-layout/ |
wireframe-dashboard |
🟠 Integration | Dashboard UI, complex grid, data visualization | 01-wireframe/03-dashboard/ |
wireframe-ecommerce |
🔴 Mastery | Product page, filters, image gallery | 01-wireframe/04-ecommerce/ |
Skills Covered:
- Reading and interpreting wireframes
- Semantic HTML structure planning
- CSS Grid and Flexbox layouts
- Typography hierarchy
- Component organization
Focus: Form elements, inputs, custom styling, validation, user interaction
Master HTML forms from basic inputs to complex multi-step checkout flows.
| Branch | Level | Focus | Location |
|---|---|---|---|
form-controls |
🟢 Foundation | Basic inputs, labels, semantic forms | 02-form-controls/01-foundation/ |
form-controls-advanced |
🟡 Enhancement | Custom styling, radio/checkbox, select | 02-form-controls/02-advanced/ |
form-controls-dynamic |
🟠 Integration | Dependent fields, live feedback, conditional display | 02-form-controls/03-dynamic/ |
form-controls-validation |
🔴 Mastery | Multi-step forms, validation patterns, checkout | 02-form-controls/04-validation/ |
Skills Covered:
- Form semantics and accessibility
- Input types and attributes
- Custom form styling
- Form validation (HTML5 and visual feedback)
- Multi-step form patterns
Focus: HTML structure, CSS styling, semantic markup, layouts, animations
Build a complete charity website from foundation to advanced features.
| Branch | Level | Focus | Location |
|---|---|---|---|
bikes-for-refugees |
🟢 Foundation | Semantic HTML, basic CSS, Flexbox | 03-bikes-for-refugees/01-foundation/ |
bikes-for-refugees-responsive |
🟡 Enhancement | Responsive design, CSS Grid, media queries | 03-bikes-for-refugees/02-responsive/ |
bikes-for-refugees-animations |
🟠 Integration | CSS animations, transitions, hover effects | 03-bikes-for-refugees/03-animations/ |
bikes-for-refugees-advanced |
🔴 Mastery | Forms, dark mode, accessibility features | 03-bikes-for-refugees/04-advanced/ |
Skills Covered:
- Semantic HTML5 elements
- CSS fundamentals and box model
- Flexbox and Grid layouts
- Responsive design patterns
- CSS animations and transitions
- Dark mode implementation
- Accessibility best practices
Focus: Navbars, dropdowns, mega menus, mobile hamburger menus
Create professional navigation systems from simple navbars to complex documentation-style menus.
| Branch | Level | Focus | Location |
|---|---|---|---|
navigation-navbar |
🟢 Foundation | Semantic nav, Flexbox, hover states | 04-navigation/01-navbar/ |
navigation-mega-menu |
🟡 Enhancement | Multi-level dropdowns, CSS Grid mega menu | 04-navigation/02-mega-menu/ |
navigation-mobile-menu |
🟠 Integration | Hamburger animation, slide-in panel, overlay | 04-navigation/03-mobile-menu/ |
navigation-advanced |
🔴 Mastery | Docs-style nav, sidebar accordion, breadcrumbs | 04-navigation/04-advanced/ |
Skills Covered:
- Semantic navigation markup
- Horizontal and vertical navbars
- Dropdown and mega menu patterns
- Mobile-first responsive navigation
- Hamburger menu animations
- Accessibility (keyboard navigation, ARIA)
Focus: Card layouts, variants, interactions, advanced card systems
Design flexible card components from basic to complex masonry layouts.
| Branch | Level | Focus | Location |
|---|---|---|---|
cards-basic |
🟢 Foundation | Semantic card structure, hover lift, Grid | 05-cards/01-basic/ |
cards-variations |
🟡 Enhancement | Overlay cards, pricing cards, testimonials | 05-cards/02-variations/ |
cards-interactive |
🟠 Integration | Flip cards, expandable cards, status badges | 05-cards/03-interactive/ |
cards-advanced |
🔴 Mastery | Masonry layout, skeleton loading, filtering | 05-cards/04-advanced/ |
Skills Covered:
- Card component patterns
- CSS Grid for card layouts
- Image aspect ratios
- Hover and active states
- 3D flip animations
- Masonry and container queries
Focus: Semantic tables, responsive strategies, complex table UIs
Build data tables from basic to dashboard-quality with advanced features.
| Branch | Level | Focus | Location |
|---|---|---|---|
tables-basic |
🟢 Foundation | Semantic HTML, zebra striping, scope attributes | 06-tables/01-basic/ |
tables-responsive |
🟡 Enhancement | Sticky headers, card-style mobile view | 06-tables/02-responsive/ |
tables-advanced |
🟠 Integration | Checkboxes, action buttons, badges, sorting | 06-tables/03-advanced/ |
tables-dashboard |
🔴 Mastery | Expandable rows, mini charts, pagination | 06-tables/04-dashboard/ |
Skills Covered:
- Semantic table markup
- Table styling patterns
- Responsive table strategies
- Sticky headers and columns
- Advanced table features (sorting, filtering, pagination)
Focus: Dialog element, drawers, lightboxes, accessibility
Create accessible modals, drawers, and overlay components.
| Branch | Level | Focus | Location |
|---|---|---|---|
modals-basic |
🟢 Foundation | <dialog> element, ::backdrop, basic animation |
07-modals/01-basic/ |
modals-variations |
🟡 Enhancement | Sized modals, drawer, lightbox, bottom sheet | 07-modals/02-variations/ |
modals-interactive |
🟠 Integration | Multi-step wizard, toasts, confirmation dialogs | 07-modals/03-interactive/ |
modals-accessible |
🔴 Mastery | WCAG compliance, focus management, tooltips | 07-modals/04-accessible/ |
Skills Covered:
- Native
<dialog>element - Modal animations and transitions
- Backdrop styling
- Focus trap patterns
- Accessibility best practices
- Various modal patterns (drawer, lightbox, toast)
Focus: CSS transitions, keyframes, complex choreography, performance
Master CSS animations from simple hover states to complex 3D effects.
| Branch | Level | Focus | Location |
|---|---|---|---|
animations-transitions |
🟢 Foundation | Hover states, easing functions, form transitions | 08-animations/01-transitions/ |
animations-keyframes |
🟡 Enhancement | Loading spinners, skeletons, staggered animations | 08-animations/02-keyframes/ |
animations-complex |
🟠 Integration | Parallax scrolling, scroll-driven animations | 08-animations/03-complex/ |
animations-advanced |
🔴 Mastery | 3D transforms, SVG animation, performance audit | 08-animations/04-advanced/ |
Skills Covered:
- CSS transitions vs animations
- Timing functions and easing
- Keyframe animations
- Transform properties (translate, rotate, scale)
- 3D transforms and perspective
- Animation performance optimization
- Scroll-driven animations
Focus: Font systems, rich text styling, fluid typography, design tokens
Create beautiful, accessible type systems from basics to complete design systems.
| Branch | Level | Focus | Location |
|---|---|---|---|
typography-basic |
🟢 Foundation | Font stacks, hierarchy, utility classes | 09-typography/01-basic/ |
typography-rich |
🟡 Enhancement | Drop caps, counters, callouts, <kbd> elements |
09-typography/02-rich/ |
typography-advanced |
🟠 Integration | clamp() fluid type, multi-column, OpenType |
09-typography/03-advanced/ |
typography-system |
🔴 Mastery | Variable fonts, design tokens, style guide | 09-typography/04-system/ |
Skills Covered:
- Font loading and performance
- Typography hierarchy
- Fluid typography with
clamp() - Rich text patterns (quotes, code, callouts)
- Variable fonts
- Design token systems
Focus: Semantic HTML, keyboard navigation, ARIA, WCAG compliance
Master web accessibility from fundamentals to full WCAG 2.1 AA compliance.
| Branch | Level | Focus | Location |
|---|---|---|---|
accessibility-semantic |
🟢 Foundation | Landmarks, heading hierarchy, alt text, contrast | 10-accessibility/01-semantic/ |
accessibility-keyboard |
🟡 Enhancement | Skip links, :focus-visible, tab order, shortcuts |
10-accessibility/02-keyboard/ |
accessibility-aria |
🟠 Integration | ARIA labels, live regions, custom widget roles | 10-accessibility/03-aria/ |
accessibility-wcag |
🔴 Mastery | Contrast ratios, reflow, complete WCAG audit | 10-accessibility/04-wcag/ |
Skills Covered:
- Semantic HTML and landmarks
- Screen reader optimization
- Keyboard navigation patterns
- ARIA attributes and roles
- Color contrast requirements
- Focus management
- WCAG 2.1 AA compliance
Beginner Pace: 2-3 assignments per week (4-6 months for full curriculum)
Intermediate Pace: 5-7 assignments per week (2-3 months)
Intensive Pace: 10+ assignments per week (1-1.5 months)
| Series | Recommended Prerequisites |
|---|---|
| 1. Wireframe | None - perfect starting point |
| 2. Form Controls | None - beginner friendly |
| 3. Bikes for Refugees | None - foundational series |
| 4. Navigation | Basic HTML/CSS knowledge |
| 5. Cards | Wireframe or Bikes series completed |
| 6. Tables | Basic HTML/CSS knowledge |
| 7. Modals | Familiarity with positioning |
| 8. Animations | CSS fundamentals |
| 9. Typography | CSS fundamentals |
| 10. Accessibility | At least 2-3 other series completed |
🟢 Foundation Goals:
- Understand core concepts
- Write semantic HTML
- Apply basic CSS
- Build simple, functional components
🟡 Enhancement Goals:
- Handle more complex layouts
- Add interactive features
- Improve styling and polish
- Understand responsive patterns
🟠 Integration Goals:
- Combine multiple techniques
- Build complete features
- Optimize performance
- Handle edge cases
🔴 Mastery Goals:
- Implement advanced patterns
- Create production-ready code
- Ensure full accessibility
- Build complete systems
- 📘 Get Started - Set up and begin first assignment
- 🔀 Git Workflow - Master Git commands and workflows
- ❓ FAQ - Common questions answered
Ready to start? Pick your first assignment and create a branch! 🚀