FREELessons: 6Length: 49 minutes


Next lesson playing in 5 seconds
CancelBuild an Onboarding Tour Using JavaScript
Welcome to the Course!
00:32
Offering users a product tour is a great way to give clear instructions for using that product. This method of "onboarding" can also be applied to websites or web apps. An interactive page tour can offer valuable insights into how to use the interface and can significantly reduce the learning time.
In this short course, you’ll learn how to create a very simple product tour using HTML, CSS, and vanilla JavaScript.
We've built a comprehensive guide to help you learn JavaScript, whether you're just getting started as a web developer or you want to explore more advanced topics:
1.Introduction1 lesson, 00:32
1 lesson, 00:32
1.1Welcome to the Course!00:32
1.1
Welcome to the Course!
00:32
2.Building Our Onboarding Tour4 lessons, 44:52
4 lessons, 44:52
2.1Writing the Markup05:33
2.1
Writing the Markup
05:33
2.2Initializing the Tour15:52
2.2
Initializing the Tour
15:52
2.3Positioning the Tour Window14:43
2.3
Positioning the Tour Window
14:43
2.4Handling the Navigation08:44
2.4
Handling the Navigation
08:44
3.Conclusion1 lesson, 03:21
1 lesson, 03:21
3.1Final Words03:21
3.1
Final Words
03:21
Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value.
Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals.
When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets.
You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.