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

Work in progress

I'm currently recording the lessons to teach you how to actually build these from ground up. Some content is subject to change.

Loading state

A sleek placeholder until actual content is available.

Save button

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

Amount chooser

Increment and decrement functionality familiar from flight booking services.

Chat

A snappy chat component with smooth transitions and interactivity.

Expand menu

A nice menu for choosing from a limited set of simple options.

Coming soon

...and more!

Sign up to the waiting list and you'll be the first to know when the course is ready.

FAQ*

* You caught me! No-one asked these questions. I wrote them myself. And you know what? I also wrote the answers!

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, 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. 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?

This course includes some basic JavaScript, but I wouldn't call this course a JavaScript course. Instead, I'd 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. 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.

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.

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 has been well worth it. Back to the question: Yes! I am planning to create more courses in the future. Sign up to the waiting list 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 at 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 have questions or suggestions, you'll reach my at my email jussi@jussivirtanen.com.

Jussi Virtanen