In this introduction lesson we get up and running with the tools we're going to use.
Now we're ready to roll up our sleeves and start to build the foundation we'll use in all the components.
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.
We'll learn about transition curves and show a nice spinner when user interacts with a button.
span istead of div within the button element for valid HTML.We'll learn to target elements based on click events to use same functionality accross multiple similar buttons.
We'll learn to get measures of elements on page and move other elements based on those dimensions.
In this lesson we'll generate HTML in JS and put that on our page based on the type of feedback user is giving.
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.
That's it! You made it all the way to the end of our course and it's time to part ways. I wish you all the best!
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 journey! You're always welcome to send me a message on Twitter or send me an email at jussi@jussivirtanen.com. Have a good one!