Skip to main contentCarbon Design System

Web components tutorial

Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML app using Web Components from the Carbon Design System. We’ll teach you the ins and outs of using Carbon components, while introducing web development best practices along the way.

Web components are native custom components based on standards that can be used in any modern browser with any JavaScript library or framework just like plain HTML elements.

For more information see Web Components.

Here’s a preview of what you will build:

Audience

This tutorial is intended for people with all amounts of web development experience. If you want to jump straight to code, you may want to skip this tutorial and go to the developers getting started page.

Prerequisites

HTML

This is a web development tutorial that uses HTML. If you’re not sure that you are quite ready then hop over to W3Schools

SCSS (CSS preprocessor)

This tutorial uses SASS, or rather the CSS styled flavour called SCSS. If you need help with CSS then head to W3Schools. For help with SCSS head to sass-lang.com.

ECMAScript (Javascript)

Javascript is fundemental to adding interaction to your HTML. There are many great resources out there, such as W3Schools, which is more than enough for everything in this tutorial.

GitHub

We’ll be using GitHub to build an app together, so if you’re new to GitHub, make sure you’ve made an account. Their getting started guide is a great way to learn GitHub.

Pnpm

This tutorial uses Pnpm for dependency management as that was the default for 

create-vite
. Make sure that you have Pnpm installed prior to starting the tutorial so you can follow along step-by-step.

Outline

Each step in this tutorial illustrates a different aspect of developing web applications with Carbon. We recommend starting with step 1, but you can pick up any step and take it from there.

  1. Installing Carbon
    • Create a web app with the UI shell component.
  2. Building pages
    • Build pages with the grid and various components.
  3. Using APIs
    • Populate the data table with an external data source.
  4. Creating components
    • Extend Carbon by creating your own components.
  5. Deploying
    • Build and host your app in a production environment.
Edit this page on GitHub
Previous
Developing: React tutorial
Next
Web components tutorial: Step 1