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.
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
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.
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.