100% free

Learn to build user interfaces

I'll teach you my design process from pen and paper sketches to visual design and actual development in HTML/CSS/JS.

Plan

Design

Develop

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.

1. Content loading placeholder

A sleek placeholder before actual content is available.

Try →

2. Save button

A simple button with a nice loading state and a bouncing animation.

Try →

3. Amount chooser

Increment and decrement functionality familiar from flight booking services.

Try →

4. Notifications

Want to notify your users? Here's one way to do it elegantly.

Try →

5. Feedback

Spice up your rating experience with these sleek feedback buttons.

Try →

6. Chat

A snappy chat component with smooth transitions and interactivity.

Try →

QNA*

* Questions No one Asked. So welcome to my monologue, which hopefully will answer a question or two you might be thinking.

Who is this course for?

This course is for designers and developers (and people who want to carry either of those titles in the future!). As a designer you can level up your skills and be able to build the things you design. As a developer you will start to understand who the heck is the guy with the weird hat sipping posh coffee and playing around with tools that don't carry too much resemblence to code.

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. I'll try my best to explain the JS stuff the easiest way I possibly can.

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 would recommend learning at least the very basics of HTML and CSS first. We don't do anything crazy regarding HTML or CSS, so basics will take you far when it comes to this course.

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

For what it's worth, I use Figma as my design tool and VS Code as my code editor, but you're free to use any tools you're most 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 comprehensive course on JavaScript basics, I'd recommend Wes Bos and his course Beginner JavaScript.

YouTube is full of free tutorials, videos and courses, why should I take this course?

That's a very reasonable question! If you believe that you'll learn efficiently watching tutorials on YouTube (or anywhere else), then that's great! However, if you've ever felt that it would be nice if someone held your hand and walked you through how to build stuff from scratch, and learn one thing at a time, then you'd probably benefit from this course. All of the code content is freely available on GitHub. And as this course is free, you're also free of risk, so why not give it a spin?

I'm a designer who already knows how to build stuff. What can this course offer me?

Wow, then you've definitely stepped up your game already! Chances are you're already designing and building amazing things, so feel free to pass this course and continue on your path. If you, however, want to get another look at how someone else builds things, or if you're looking into challenges to build things we're building during the course, you'll probably enjoy more than you'll suffer from taking 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 for a couple of reasons. First, this is the first course I've ever taught. I'm learning as I'm teaching, and I don't want to charge for that. Second, 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, but after that you're free to skip to the lessons of your interest. One thing to note though: 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 actually told my wife that if my course gets even one positive feedback, the 200+ hours I've spent building this course have been well worth it. Back to the question: Yes! I am planning to create more courses in the future. Sign up to the course and I'll email you as soon as I have more information to share.

The JavaScript parts of your code include many bad practices and errors. Fix them!

Thanks for the feedback! I'll try to review my code and get better so that you get the best material in the future. If you'd like to point out something specific, hit me an email or create a pull request on GitHub and I'll see what I can do.

Why such small components? Why not build something bigger? Like a full dashboard UI?

I believe it's good to start small. Then we have time to pay attention to detail. To build high quality interfaces we need to narrow our focus down to smaller components. If you'd like to see more comprehensive content, I encourage you to ask it specifically by sending me an email or tweeting at me on Twitter @jussivirtanen.

Why on earth are you building stuff with plain / vanilla JavaScript?! I'd much rather see you use framework X, Y or Z!

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, Svelte or Angular. These libraries or frameworks are very 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.

Seriously, did you come with all these questions on your own?

Yup! Crazy, huh? And did you know you can ask me a question related to this course and I might post it to this site? Well now you do. It all starts with an email: jussi@jussivirtanen.com.

Hi, my name is Jussi Virtanen

I'm a full stack designer (I both design and develop) from Helsinki, Finland 🇫🇮. I'm passionate to teach you how to combine design and development. If you any have questions or suggestions, send me an email to jussi@jussivirtanen.com.

Jussi Virtanen