Course content
The course consists of six individual lessons. We'll start by building a simple design system and then proceed from simple to more advanced components.
Note: Previously I sent a link to your email, but I've since changed the behaviour so that you can now access the course directly from this page.
Start course now →Hi! I'm Jussi Virtanen, a designer with 12+ years of professional experience. I've worked with over 100 companies, both startups and corporations. See you in the course!
The course consists of six individual lessons. We'll start by building a simple design system and then proceed from simple to more advanced components.
This course is for designers and developers, or for anyone who wants to become one. As a designer you will learn the essential skills and thinking patterns to build the things you design. As a developer you will learn various design principles and how to improve both the usability and accessibility of the components you're already building.
Yes, you can. Although it helps if you're familiar with at least the basics of JavaScript, you'll probaby do just fine. If during the course you feel like you can't keep up, I recommend you to check Beginner JavaScript by Wes Bos.
You definitely can, but I recommend learning at least the very basics of HTML and CSS first. We don't do anything crazy in HTML or CSS, so basics will take you far.
You'll need:
In the course I use Figma as my design tool and VS Code as my code editor, but you're free to use any tools you're comfortable with.
The course includes some basic JavaScript, but I wouldn't call it a JavaScript course. We're not building a full blown application but small components. For that reason I like to call it a full stack design course, as we start from zero and work our way to fully functional components. If you're looking for a course on JavaScript basics, I, again, recommend Beginner JavaScript.
That's a reasonable question. There are plenty of resources available. At the same time these resources can be scattered and you'll get lost in the wild. It's better to have a structured set of things to learn. And that's exactly why I spend 200+ hours to build this course: for you to have that resource neatly in one package. That's why.
Congratulations, you've definitely stepped up your game already. This course is for you if you want a) to see how I build things, or b) if you're looking into challenges to build things we're building during the course. You can also check out all the source code from GitHub if that's your cup of tea.
This course is free because I believe that by teaching I can have a greater impact on people's lives. I've been privileged to learn and I want to pass my knowledge forward. The easiest way to do that is to make the content available for everyone, for free.
You can pick what you like. The only thing linking the individual lessons is the small design system we'll build at the beginning of the course. Bear in mind though that I designed the lesson order so that we start with basics and proceed to more difficult components towards the end.
Thank you for your kind words! I am planning to create more courses in the future. Sign up to this course and I'll email you as soon as I have more information to share. If you have ideas for future content, let me know.
Please raise an issue on the course repository.
To build high quality interfaces we need to narrow our focus down to smaller components. After all, all UIs are built with small components. Building a bigger UI could be a good idea for a future course though.
That's a justified question. It indeed is common to build applications – especially in the larger end of the scale – with frameworks such as React, Vue, Angular or Svelte. These libraries or frameworks are both powerful and useful. They're also built with JavaScript. By building things with plain JavaScript we're able to become better at it, and that will work as a foundation to learn a framework. If you want challenge, you can implement the contents of this course on top of your favorite framework or library.