Full Stack User Interface

Course content

I'm so glad to see you here! Here you'll find all the lessons for the course in one comfortable place. If you have any questions, don't hesitate to ping me on Twitter or send me an email at jussi@jussivirtanen.com.

Preparation 2 videos

Intro and Setup

In this introduction lesson we get up and running with the tools we're going to use.

Useful links

Components 6 videos

Lesson 1: Content loading placeholder

We'll create a sleek loading animation with pure CSS. To make the component more dynamic, we use a bit of JS to randomize the width of the loading bars. Along the way we learn about random numbers and setting boundaries with minimum and maximum values.

Useful links

Lesson 2: Save button

We'll learn about transition curves and show a nice spinner when user interacts with a button.

Useful links

Lesson 3: Plus and Minus Buttons

We'll learn to target elements based on click events to use same functionality accross multiple similar buttons.

Useful links

Lesson 4: Notifications

We'll learn to get measures of elements on page and move other elements based on those dimensions.

Useful links

Lesson 5: Feedback

In this lesson we'll generate HTML in JS and put that on our page based on the type of feedback user is giving.

Useful links

Lesson 6: Chat

Coming to the end of our course we'll build a fancy chat with plenty of functionality. We'll tackle topics like event bubbling, keyboard events and simple input field validation.

Useful links

Final words 1 video

Goodbye!

Now we're ready to roll up our sleeves and start to build the foundation we'll use in all the components.

Useful links

That's it!

If you made it this far, chances are you've spend significant amount of time going through all the lessons. Now it's time to put all your learnings into action and build something on your own. All the best to that yourney! You're always welcome to send me a message on Twitter or send me an email at jussi@jussivirtanen.com. Have a good one!

Full Stack User Interface