Component Odyssey

Navigating Your Component Library Journey

01

Learn to build and publish your own component library that works in any web framework.

Save yourself and your company weeks of development time. Build components your users will love. Become a future-proof web developer.

Go to Lessons

02

Building a Library is Hard

Every web developer has thought about creating their own component library. Building a library helps you express your creativity, improve your web accessibility skills, contribute to open source, prepare for a better-paid role, and become a well-rounded web developer.

But the web development landscape has gotten excessively complicated. Tools and frameworks pop up every day claiming to “fix” web development, but they just add another decision to the already growing list of choices you need to make.

You want components that work anywhere, but picking one framework stops your components from being used in others. It feels like making your library work everywhere is nothing short of a herculean effort.

And despite this, you want your end-users to have an enjoyable web experience, you want developers to easily use your library, and you want a smooth development experience to build, test, and publish your library.

So how can you achieve this?

You could build an open-source library and hope it takes off so your GitHub issues are flooded with feedback, bugs, and feature requests.

You could create a library for your company using the framework-of-the-month. But when your company decides to use a different framework, you’ll need to rebuild it from scratch.

You’ll learn a lot with these approaches, but they take up so much time and effort.

I want to save you that time and effort while leaving you with the skills to build better components.

With Component Odyssey, you’ll learn the ins and outs of building a modern web-based component library. You’ll learn how to build and distribute future-proof components that are interoperable with React, Vue, Svelte, and any other web framework.

It’s a journey, one that’s both challenging and immensely rewarding.

Welcome to…

04

Charting Your Odyssey

Available Now

Learn about the different ways of writing components, and why this course focuses on web components and CSS utility classes.

Dive head-first into web components. You’ll learn what they are, and what they're made of by building a bunch yourself.

Customise the appearance of your web component, while still giving your user's flexibility to style your components to their tastes.

Share you library with the world! You’ll learn about the JavaScript module system(s), publishing to the NPM registry, managing versions, and more!

Coming Soon

Keep your code clean by automating tools like linters and code formatters. A must-have for web developers working in teams or open-source.

Automate cross-browser tests for your library to ensure you're shipping robust components.

Combine your newfound knowledge to streamline your testing and publishing workflow using Continuous Integration.

Flex your coding muscles by building, testing, and publishing an interactive and customisable component. You’ll see just how far you’ve come on your Component Odyssey!

Improve your and your user's efficiency by using type systems. Type systems detect errors and double-up as in-code documentation.

Showcase your components with the world by building a user-friendly documentation site for your library.

Cap off your odyssey by building, styling, testing, typing, documenting, and publishing a complex component. You’ll use your fully-fledged component development workflow you've built along the way.

05

Meet Andrico Karoulla

Andrico Karoulla is a web developer based in London. He’s worked at a number of startups and has built design system automation tooling at Anima.

He’s also an open-source contributor, involved in projects like the Open UI, where he led the site rewrite.

Andrico’s also built component libraries for fun, like A2K, the Windows 2000-inspired web component library.

You can connect with him on Twitter and on LinkedIn

06

Embark On Your Component Odyssey

Full Access

$119

$99

One-time purchase, lifetime access

Build components that work in any framework
Use modern CSS to build highly customisable components
Publish your components safely for the world to use
Access to all future updates

07

FAQs

What is Component Odyssey?

Component Odyssey is a course that’ll teach you how to build, style, test, type, document, and publish your very own components. Along the way, you’ll build a simple and powerful workflow that you can apply in your future front-end projects.

Component Odyssey mixes videos, written materials, examples, and practical exercises to teach you how to write components that work with any web framework.

Why is Component Odyssey unique?

Component Odyssey won’t teach you the fancy framework of the week. Instead, the course focuses on teaching you how to build robust components using the built-in browser features.

You’ll learn all about web components, the browser feature that lets you write reusable components that work in any frontend framework.

You’ll learn to build browser-friendly components without the need for any complex build-tooling that clutter and complicate your development workflow.

What are the benefits of the course?

Build excellent components with minimal tech

Web components don’t require build tooling to run in the browser, which can simplify your development environment. This makes your component library easy for other developers to use.

Along the way, you’ll write tests, add typings, and learn to auto-generate documentation.

Become a future-proof web developer

You’ll learn about the core technologies built into the browser, not the currently popular frameworks, which often fall in and out of style.

Better understanding the browser's capabilities will serve you in almost any frontend project you work on in the future.

Boost career opportunities

Building a library can be a creatively rewarding and technically challenging project. You'll learn a ton about web development, and you'll have something awesome to show prospective employers, increasing your chances are getting hired.

You can even share it with the open-source community, which could kead to exciting collaborations with other passionate web developers.

Who should take the course?

To get the most out of Component Odyssey, it's highly recommended that you have experience with HTML, CSS, and basic JavaScript. If you've built a couple of websites then you're golden!

So it doesn't matter if you’re a junior developer or a seasoned backend developer. As long as you want to up your frontend development game, you'll benefit a lot from the course.

In the course, you'll use the terminal and version control tools like Git and GitHub. It's preferable that you're familiar with them, but it's not required.

How long is the course?

Component Odyssey contains 56 lessons and 5+ hours of videos. There are also a bunch of exercises and challenges for you to do.

There are additional modules planned, at no additional cost.

Are there discounts for bulk purchases?

Yes, if you’d like to buy multiple licenses for your team, you can reach out to me at hello@component-odyssey.com.

How long do I have access to the course?

By purchasing the course, you have access to it for as long as it’s online.

What is the refund policy?

Component Odyssey has a 90-day refund policy. If you’re unhappy with the course during this time, you can be refunded, no questions asked.

Component Odyssey

Building a Library is Hard