Course Organisation

The course is organised into three main sections, each with platform-specific content:

├── Introduction (you are here)
│
├── Design Track
│   ├── Web
│   ├── iOS
│   └── Android
│
├── Engineering Track
│   ├── Web
│   ├── iOS
│   └── Android
│
└── Convergence
    ├── Web
    ├── iOS
    └── Android

Within each track and platform, content is organised into modules (major topics) and lessons (individual units within a topic).

For example, the Web Engineering Track is divided into five core modules, starting with six lessons on HTML Fundamentals and eight on CSS Mastery. You will then progress through eight lessons on JavaScript Essentials, six on Building Components, and finally five lessons dedicated to Design Systems in Code.

The Engineering Track also includes guidance on working with AI as a design engineer. This is not treated as a shortcut around fundamentals. It is taught as a working practice: how to brief AI with useful context, review its output critically, and verify that the result is accessible, maintainable, and suited to the platform.

Lesson Structure

Every lesson follows a consistent format:

Quick Summary

A one-line takeaway at the top. If you're reviewing or skimming, this tells you what the lesson covers.

What You'll Learn

Bullet points of outcomes. After completing the lesson, you should be able to do these things.

Main Content

The main content provides the core teaching through digestible sections that include detailed explanations of concepts and practical code examples for engineering lessons. Design students will find visual examples to guide their work, while everyone benefits from the real-world context and applications provided.

Navigation Approaches

There are two main ways to move through the course:

Linear Progression (Recommended for Beginners)

To follow a linear progression, you should work through the lessons in order within your chosen track. This means completing all lessons in Module 1 before moving to Module 2, and continuing through all subsequent modules before proceeding to the next professional track.

This ensures you build foundational knowledge before tackling advanced topics.

Topic-Based Exploration (For Experienced Learners)

If you already possess skills in certain areas, you may choose to skip lessons covering concepts you already know and jump directly into specific topics. We encourage you to cross-reference between tracks whenever you find relevant connections.

Be honest with yourself. If a lesson's "What You'll Learn" includes things you can't confidently do, work through it.

Cross-Track Learning

Many concepts appear in both the Design and Engineering tracks, approached from different angles:

When you encounter a concept in one track, consider exploring it in the other. Understanding both perspectives is what makes a Design Engineer.

The Convergence Track: Are You Ready?

The Convergence track is where Design Engineering comes together. It's designed for learners who have solid foundations in both design and engineering and want to focus on the bridge between them: motion, advanced prototyping, accessibility, performance, and portfolio building.

Readiness Checklist

You're ready for Convergence when you can confidently do all of the following:

Engineering readiness:

• Build a responsive layout from scratch using Flexbox or Grid, without referencing tutorials
• Style a component consistently using a design system or token approach
• Debug CSS specificity and layout issues independently
• Read and understand existing production code without getting stuck on syntax

Design readiness:

• Explain visual hierarchy, contrast, and spacing principles and apply them to your own work
• Select and pair typography with purpose and reasoning
• Critique a design and articulate what works and what doesn't using design terminology
• Translate a visual design into a structured layout plan that an engineer could implement

Bridge readiness:

• Look at a design and code implementation side-by-side and spot where they've diverged
• Understand the constraints of your platform (web, iOS, or Android) well enough to evaluate whether a design is realistic to implement
• Communicate effectively about trade-offs between visual fidelity and implementation effort

Timing Recommendations

Most learners start Convergence after completing at least one full track. This typically takes 30 to 50 hours and gives you solid grounding in one discipline before tackling the bridge work.

If you scored 2-3 on both design and engineering in your self-assessment, you can start Convergence immediately. You have strong fundamentals in both areas and are ready to focus on how they work together.

If you scored 1 on one area and 2-3 on the other, complete the weaker track first (usually 15 to 25 hours), then move to Convergence. This ensures you have confidence in both disciplines before tackling advanced bridge work.

If you scored 0-1 on either area, work through both Design and Engineering tracks sequentially before starting Convergence. The bridge work assumes you've already developed taste and technical skill independently.

Progress Tracking

Self-Assessment

At the start of each module, assess what you already know. At the end, assess what you've learned. The gap between these tells you the value you're getting.

Building Evidence

The best way to track progress is to build. As you complete exercises, make sure to save your work in a dedicated folder and take screenshots of your design projects. You should commit your code exercises to a repository and take the time to note down any specific insights or questions that arise.

By the end, you'll have a collection of work that demonstrates your skills—useful for portfolios and job applications.

Tips for Effective Learning

Space Your Learning

Spaced repetition beats cramming. To space your learning effectively, try to study for only 30 to 60 minutes at a time and take regular breaks between lessons. It's often helpful to review previous lessons before starting new ones and allow yourself time to sleep on complex concepts.

Teach What You Learn

The best way to solidify understanding is to explain it to someone else. After each lesson, solidify your understanding by summarising the main points in your own words and explaining new concepts to a friend or colleague. You might even consider writing a blog post or social media update about what you have learned.

If you can't explain it simply, you don't understand it well enough.

Embrace Confusion

Feeling confused is a sign you're learning. When concepts feel particularly difficult, take a break and return to them later, but try the exercises even if you don't fully understand everything yet. Don't hesitate to look up supplementary resources or ask questions of colleagues, community members, or AI models.

Don't expect everything to click immediately. Learning is non-linear.

Connect Concepts

Design Engineering is about seeing connections. As you learn, try to note when concepts from different lessons relate to each other and consider how design principles appear in code. You should also think about how various engineering constraints might influence your overall design process.

The "aha" moments come when you connect ideas across disciplines.

Build, Build, Build

Reading isn't learning. Doing is learning.

Every exercise exists for a reason. Even if an exercise feels simple, do it. Building creates understanding that reading cannot.

After completing each module, build something on your own that uses what you learned. This is how you move from "I've seen this" to "I can do this."

Getting Help

When You're Stuck

If you find yourself stuck, re-read the lesson and work through the exercises, as these often clarify difficult concepts. You can also look at related lessons in other tracks, search for the concept online for a different explanation, or simply take a break to return with fresh eyes.

Community Resources

Consider joining dedicated Design Engineering Slack or Discord communities, as well as platform-specific forums and social media groups focused on design and development.

You can join our Discord server.

Time Expectations

Here's a rough guide for how long each section takes:

These estimates assume:

• You're learning the content for the first time
• You complete all exercises
• You build additional projects to practise

Experienced students move faster. Complete beginners may need more time. Both are fine.

Try It Yourself

Before diving into your chosen track:

1. Set up your environment. Depending on your path: Web students should set up a code editor like VS Code and a modern browser, while those on the iOS track will need Xcode on a Mac. Android students will require a proper installation of Android Studio. Additionally, create a dedicated learning folder for your projects, familiarise yourself with the structure of the Course Plan, and set a committed schedule for your weekly study time.

Test Your Understanding

Next Steps

You're ready to begin!

Based on your choices in the previous lesson:

If you're taking the Design Track:

• Web Design Track: Foundations of Visual Design
• iOS Design Track: HIG Fundamentals
• Android Design Track: Material Design Fundamentals

If you're taking the Engineering Track:

• Web Engineering Track: HTML Fundamentals
• iOS Engineering Track: Swift Basics
• Android Engineering Track: Kotlin Basics

If you're ready for Convergence:

• Web Convergence: Motion and Interaction
• iOS Convergence: SwiftUI Animation
• Android Convergence: Compose Animation

Good luck. Build something great.