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.
FAQ
Who is this course for?
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.
I don't know JavaScript (JS), can I still take this course?
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.
I'm a designer and I don't know any HTML / CSS, let alone JS. Can I still take this course?
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.
What tools do I need to follow the course?
You'll need:
- Pen and paper
- A design tool (like Figma, XD or Sketch)
- A code editor
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.
Is this a JavaScript course?
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.
YouTube is full of free tutorials, videos and courses. Why should I take this specific course?
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.
I'm a designer who already knows how to build stuff. What can this course offer me?
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.
Why is this course free Jussi?
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.
Are the lessons linked so that I have to go through them all or can I just pick what I like?
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.
I love your course! Will you make another one?
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.
I spotted a bug, what do I do?
Please raise an issue on the course repository.
Why such small components instead of a full dashboard UI?
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.
Why build stuff with vanilla JavaScript? I'd rather use some framework.
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.
