Odyssey


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.

Try the Free 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…


03


Component Odyssey

Navigating Your Component Library Journey


04


Testimonials

profile of Bill G

Bill G

Component Odyssey is a well-thought-out, hands-on introduction to Web Components. It demystifies the ShadowDOM and the other inner workings of this modern, future-proofed approach to website development. After going through the course, I am using Web Components in my professional projects with confidence!


05


Charting Your Odyssey

Tools For Building User Interfaces

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

The Different Ways to Write a Component

HTML: The Backbone of the Internet

Utility Classes

Utility Classes: Their Benefits and Limitations

Utility Classes: Why Are We Not Using XYZ Instead?

Templating Languages

Web Components: The Browser's Built-in Answer to Reusable Components

Framework Components

Our Approach: Web Components and Utility Classes

Writing Your First Component

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

Setting up Your Development Environment

Writing a Checkbox in Vanilla HTML

The Anatomy of a Web Component

The Anatomy of a Web Component: Custom Elements

The Anatomy of a Web Component: HTML Templates

The Anatomy of a Web Component: Shadow DOM

Adding Custom Attributes To Your Component

Converting Your Checkbox to a Web Component

The Lifecycle of a Web Component

Writing an Advanced Web Component: Slots

Writing an Advanced Web Component: Reflection

Writing an Advanced Web Component: Events

Writing a Lit Component

Converting Your Checkbox to Lit

Styling Your Components

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

Styling Components: Static Styles

Styling Components: Dynamic Styles

Introduction to CSS Custom Properties

Styling Components: CSS Custom Properties

Styling Components: Shadow Parts

CSS Variables vs Shadow Parts

Reusing Styles Across Components

Naming Conventions for Variables

Bonus: Shorthand Variables vs Longhand Variables

Adding CSS Variables to Your First Component

Themes

Adding Utility Classes to Your Library

Running an Accessibility Review for Your Checkbox

Publishing Your Library

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

Preparing to Publish Your Library

Preparing Your Package.json

Adding a License to Your Library

The Right Output Format For Your Library

Understanding Dependencies: Dependency Resolution

Understanding Dependencies: Peer Dependencies

Publishing to NPM for the First Time

Consuming Your Library via NPM

Checkpoint

Adding React Support

What's Next?

Coming Soon

Automating Your Code Quality

Writing Tests for Your Components

Automating Your Workflows

Creating Your Second Component

Adding Types to Your Library

Documenting Your Components

Creating Your Third Component


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


Meet Your Instructor,
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

andrico karoulla

08


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.